three.js中的重要基础概念

Three.js 是一个功能强大的 JavaScript 库，用于创建和展示基于 WebGL 的三维图形。在学习使用Three.js来构建3D世界之前，有一些基本概念是需要牢记的，否则，在你绘制3D世界时，思绪会是杂乱无章的：

1. 场景（Scene）
   定义：场景是所有三维对象的容器，用于存储和管理几何体、光源、相机等元素。
   作用：场景是渲染的基础，所有需要显示的对象都必须添加到场景中。
   创建：

   const scene = new THREE.Scene();

2. 相机（Camera）
   定义：相机定义了从哪个视角观察三维场景。
   常见类型：
   透视相机（PerspectiveCamera）：模拟人眼透视效果，远处物体看起来更小。

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

   正交相机（OrthographicCamera）：不考虑透视效果，所有物体大小一致。

   const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 1000);

3. 渲染器（Renderer）
   定义：渲染器负责将场景和相机中的内容绘制到屏幕上。
   常用渲染器：THREE.WebGLRenderer 是最常用的渲染器。
   创建：

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

4. 几何体（Geometry）
   定义：几何体定义了物体的形状。
   常见几何体：

   • BoxGeometry：立方体。
   • SphereGeometry：球体。
   • PlaneGeometry：平面。
   • BufferGeometry：更高效的自定义几何体。

   创建：

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

5. 材质（Material）
   定义：材质定义了物体的外观属性，如颜色、纹理、反射等。
   常见材质：

   • MeshBasicMaterial：基础材质，不考虑光照。
   • MeshLambertMaterial：漫反射材质，适合哑光表面。
   • MeshPhongMaterial：高光材质，适合光滑表面。
   • MeshStandardMaterial：基于物理的材质，适合现代渲染效果。

   创建：

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

6. 网格（Mesh）
   定义：网格是几何体和材质的组合，用于创建具体的三维物体。
   创建：

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

7. 光源（Light）
   定义：光源用于照亮场景中的物体。现实中的一切物体之所以能被看到，都是因为有了光，在three.js 的世界里，亦是如此，需要看到哪个地方，就需要有光线照亮那个地方
   常见光源：

   • AmbientLight：环境光，均匀照亮整个场景。
   • DirectionalLight：方向光，模拟太阳光。
   • PointLight：点光源，从一点向四周发射光线。
   • SpotLight：聚光灯，模拟手电筒或舞台灯光。

   创建：

   const light = new THREE.DirectionalLight(0xffffff, 1);
   scene.add(light);

8. 控制器（Controls）
   定义：控制器用于控制相机的移动和旋转，实现用户交互。
   常见控制器：

   • OrbitControls：允许用户通过鼠标或触摸屏旋转、平移和缩放视图。
   • TrackballControls：类似于轨道球的交互方式。

   使用：

   const controls = new THREE.OrbitControls(camera, renderer.domElement);

9. 加载器（Loader）
   定义：加载器用于加载外部资源，如模型、纹理、字体等。这个库很重要，没有这个库，所有的东西都需要我们用代码来绘制，这是相当庞大的工作量，而有了这个库，我们就可以加载设计师和建模师做好了的模型，纹理图等内容到场景中，
   常见加载器：

   • GLTFLoader：加载 GLTF 格式的 3D 模型。
   • TextureLoader：加载图像作为纹理。
   • FontLoader：加载字体文件。

   使用：

   const loader = new THREE.TextureLoader();
   const texture = loader.load('texture.jpg');

10. 动画（Animation）
    定义：动画用于实现动态效果，如旋转、移动、缩放等。
    实现方式：
    使用 requestAnimationFrame 实现循环更新。
    使用 THREE.AnimationMixer 播放模型动画。
    示例：

    function animate() {
     requestAnimationFrame(animate);
     mesh.rotation.y += 0.01;
     renderer.render(scene, camera);
    }
    animate();

11. 坐标系（Coordinate System）
    定义：Three.js 使用右手坐标系，X 轴指向右方，Y 轴指向上方，Z 轴指向屏幕外。
    注意：默认情况下，原点位于场景中心。

12. 缓冲区几何体（BufferGeometry）
    定义：BufferGeometry 是一种高效的数据结构，用于定义复杂的几何体。
    优点：性能更高，适合大规模数据处理。
    使用：

    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array([
     0, 0, 0,   1, 0, 0,   0, 1, 0
    ]);
    
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

13. 辅助工具（Helpers）
    定义：辅助工具用于可视化调试，如网格、轴、光源范围等。
    常见工具：

    • GridHelper：显示网格。
    • AxesHelper：显示坐标轴。
    • DirectionalLightHelper：显示方向光的方向。

14. 雾效（Fog）
    定义：雾效用于模拟远近物体的模糊效果。
    使用：

    scene.fog = new THREE.Fog(0xffffff, 1, 10);