threejs3正方体

Three.js是一个基于WebGL的JavaScript库，它简化了在浏览器上创建三维图形的过程。如果你想要在Three.js中制作一个正方体，首先你需要做的是导入Three.js库，然后创建一个场景、相机和渲染器。以下是创建一个简单正方体的基本步骤：

1. **设置环境**：

   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);

2. **创建立方体几何体**：

   const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽度、高度和深度各为1
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 绿色材质
   const cubeMesh = new THREE.Mesh(geometry, material);
   scene.add(cubeMesh);

3. **移动和旋转立方体**：

   function animate() {
     requestAnimationFrame(animate);
     cubeMesh.rotation.x += 0.01; // 沿X轴旋转
     cubeMesh.rotation.y += 0.01; // 沿Y轴旋转
     renderer.render(scene, camera);
   }
   animate();

4. **添加事件监听器** (可选)：
为了响应用户的交互，你可以添加鼠标事件来控制立方体的位置或大小。