vue three.js

// Vue + Three.js 示例代码

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

<script>
import * as THREE from 'three';

export default {
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      // 创建场景
      const scene = new THREE.Scene();

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

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, 400);
      this.$refs.threeContainer.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);

      // 动画函数
      function animate() {
        requestAnimationFrame(animate);

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

        renderer.render(scene, camera);
      }

      animate();
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 模板部分 (<template>)：创建了一个 div 容器用于放置 Three.js 渲染的内容。
2. 脚本部分 (<script>)：
   • 导入了 Three.js 库。
   • 在 mounted 生命周期钩子中调用 initThree 方法初始化 Three.js。
   • 创建了场景 (THREE.Scene)、相机 (THREE.PerspectiveCamera) 和渲染器 (THREE.WebGLRenderer)。
   • 添加了一个简单的立方体 (THREE.BoxGeometry 和 THREE.MeshBasicMaterial) 到场景中。
   • 使用 requestAnimationFrame 实现动画效果，使立方体不断旋转。
3. 样式部分 (<style scoped>)：可以根据需要自定义样式。

这个示例展示了如何在 Vue.js 中集成 Three.js，并创建一个简单的旋转立方体。