three.js vue

// three.js 与 Vue.js 结合的示例代码

<template>
  <div ref="threeContainer" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import * as THREE from 'three';
import { onMounted, onUnmounted, ref } from 'vue';

export default {
  name: 'ThreeVueExample',
  setup() {
    const threeContainer = ref(null);

    let scene, camera, renderer;

    const init = () => {
      // 创建场景
      scene = new THREE.Scene();

      // 创建相机
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 5;

      // 创建渲染器
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      threeContainer.value.appendChild(renderer.domElement);

      // 添加一个立方体
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 渲染循环
      const animate = function () {
        requestAnimationFrame(animate);

        // 旋转立方体
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    };

    const onWindowResize = () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    };

    onMounted(() => {
      init();
      window.addEventListener('resize', onWindowResize);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', onWindowResize);
    });

    return {
      threeContainer,
    };
  },
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用 ref 绑定一个 DOM 元素，用于放置 Three.js 的渲染内容。
   • 设置样式以确保容器占满整个视口。

2. 脚本部分 (<script>)：

   • 引入 Three.js 和 Vue 的相关模块。
   • 定义了一个 setup 函数来初始化 Three.js 场景、相机和渲染器。
   • 创建一个简单的立方体并将其添加到场景中。
   • 实现了一个动画循环，使立方体不断旋转。
   • 使用 onMounted 和 onUnmounted 钩子函数来处理组件的生命周期事件，确保在组件挂载时初始化 Three.js，并在组件卸载时清理资源。
   • 添加了窗口大小变化时的响应逻辑，以确保相机和渲染器能够正确调整尺寸。

3. 样式部分 (<style scoped>)：

   • 可以根据需要自定义样式。