threejs怎么创建立方体并添加鼠标移入事件

Three.js是一个用于JavaScript的3D图形库，它允许你在Web浏览器上创建交互式的3D场景。要创建一个立方体并添加鼠标移入事件，你可以按照以下步骤操作：

1. **导入Three.js库**:
首先，在HTML文件中引入Three.js库：

   <script src="https://threejs.org/build/three.min.js"></script>

2. **初始化场景、相机和渲染器**:

   const scene = new THREE.Scene();
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   const renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

3. **创建立方体模型**:
使用`THREE.BoxGeometry`和`THREE.MeshBasicMaterial`创建一个基础的立方体：

   const geometry = new THREE.BoxGeometry(1, 1, 1);
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const cube = new THREE.Mesh(geometry, material);
   scene.add(cube);

4. **添加鼠标移入事件监听器**:
使用`THREE.Object3D`的`addEventListener`方法来监听鼠标移入事件，当鼠标指针移到立方体上时执行某些回调函数：

   cube.addEventListener('mouseover', function() {
     cube.material.color.setHex(0xff0000); // 立方体颜色变为红色
   });

   cube.addEventListener('mouseout', function() {
     cube.material.color.setHex(0x00ff00); // 移开时恢复原色
   });

这里`setHex`函数用来改变立方体表面的着色。

5. **设置动画和渲染循环**:
定义一个渲染函数并在窗口加载完成后启动它：

   function animate() {
     requestAnimationFrame(animate);
     camera.position.z += 0.1; // 每次渲染移动摄像机一点远离立方体
     renderer.render(scene, camera);
   }
   animate();