threejs 基础知识点汇总

Three.js 是一款基于 JavaScript 的 3D 渲染库，它允许你在 Web 页面上创建交互式的 3D 场景。以下是 Three.js 的一些基础知识点：

1. **设置场景**（Scene）[^4]：

   const scene = new THREE.Scene();

2. **加载几何体**（Geometry）[^5]：

   const geometry = new THREE.BoxGeometry(1, 1, 1);

3. **创建材质**（Material）[^6]：

   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

4. **创建网格物体**（Mesh）[^7]:

   const mesh = new THREE.Mesh(geometry, material);

5. **添加到场景**：

   scene.add(mesh);

6. **相机设置**（Camera）[^8]：

   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

7. **渲染器**（Renderer）[^9]：

   const renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

8. **动画循环**（Animation Loop）[^10]:

   function animate() {
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
   }
   animate();

这些是基本的开始，Three.js 还支持纹理贴图、光照、事件监听、动画控制等功能。要深入学习，可以探索它的官方文档[^11]。