threejs vue

// threejs-vue 示例代码

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

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

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

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

      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        75,
        threeContainer.value.clientWidth / threeContainer.value.clientHeight,
        0.1,
        1000
      );

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(threeContainer.value.clientWidth, threeContainer.value.clientHeight);
      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);

      // 设置相机位置
      camera.position.z = 5;

      // 渲染函数
      function animate() {
        requestAnimationFrame(animate);

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

        renderer.render(scene, camera);
      }

      animate();
    });

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

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

解释说明：

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

   • 使用 ref 绑定一个 DOM 元素，用于挂载 Three.js 的渲染器。

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

   • 导入 Three.js 和 Vue 的相关模块。
   • 使用 onMounted 钩子在组件挂载后初始化 Three.js 场景、相机、渲染器等。
   • 创建一个简单的立方体，并将其添加到场景中。
   • 设置相机的位置并开始动画循环，使立方体不断旋转。

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

   • 可以根据需要添加样式，这里没有特别的样式需求。