threejs入门学习日记

前言：

Three.js 是一个强大的 JavaScript 3D 库，它让开发者无需深入了解 WebGL 底层 API 即可创建惊艳的 3D 场景。Three.js 通过封装 WebGL 的复杂细节，提供了一套更易于使用的 API，极大地降低了在网页端创建 3D 内容的门槛。

核心概念：

1、场景Scene

这是所有 3D 对象的容器，是一个三维空间。创建的所有物体、光源、相机都需要添加到场景中才能被渲染。

const scene = new THREE.Scene();

2、相机 Camera

相机决定了你观察场景的视角。最常用的两种相机是：

（1）、透视相机 (PerspectiveCamera)​​: 模拟人眼视角，会产生"近大远小"的效果，更 符合真实世界的观察体验。创建时需要指定视野角度、宽高比、近裁剪面和远裁剪面

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 设置相机位置

（2）、正交相机 (OrthographicCamera)​​: 无论物体远近，渲染尺寸都相同，常用于工程制图或一些特定游戏（如模拟城市）

/**
     * 相机设置 - 相机决定了我们从哪个角度观察3D场景
     */
    const width = window.innerWidth;   // 获取浏览器窗口宽度
    const height = window.innerHeight; // 获取浏览器窗口高度
    const k = width / height;          // 计算窗口宽高比
    const s = 70;                     // 场景显示范围控制系数，数值越大显示范围越大
    
    // 创建正交相机对象，参数分别为：左边界、右边界、上边界、下边界、近裁剪面、远裁剪面
    // 正交相机的特点是物体不会因为距离远近而产生透视效果（大小不变）
    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);

    camera.position.set(0, 0, 20);
    
    // 设置相机朝向场景中心点，这样相机会"看向"场景的原点(0,0,0)
    camera.lookAt(scene.position);

3.​**​渲染器 Renderer)**​

渲染器负责将场景和相机看到的画面渲染到浏览器页面上。通常使用 WebGLRenderer。

const renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias 开启抗锯齿
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
document.body.appendChild(renderer.domElement); // 将画布添加到页面

4、几何体 Geometry

定义物体的形状。Three.js 提供了许多内置几何体，如立方体 (BoxGeometry)、球体 (SphereGeometry)、圆锥体 (ConeGeometry) 等

const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建立方体几何体

​

    // 创建一个球体几何对象，参数分别为：半径10，水平分段数20，垂直分段数20
    // 分段数越高，球体越光滑，但性能消耗也越大
    const geometry = new THREE.SphereGeometry(10, 20, 20);

5.​​材质 Material

定义物体的外观，如颜色、光泽度、贴图等。常用的材质有不受光照影响的基础网格材质 (MeshBasicMaterial) 和受光照影响的朗伯材质 (MeshLambertMaterial) 等

color: 材质颜色（0xff0000红色）。

wireframe: 是否将几何体渲染为线框（true/false）。

注意！！！受光照影响的材质必须添加光源才能看到物体

6.网格 Mesh

将几何体和材质结合起来，才能创建一个可以添加到场景中的可见物体

const cube = new THREE.Mesh(geometry, material);
scene.add(cube); // 将立方体添加到场景中

7.​​光源 Light

没有光，场景就是一片漆黑（使用 MeshBasicMaterial 除外）。常见的光源有环境光 (AmbientLight)、点光源 (PointLight)、平行光 (DirectionalLight) 等

​

     /**
     * 光源设置 - 没有光源的话，Lambert材质的物体会是黑色的
     */
    // 创建点光源，颜色为白色(0xffffff)
    const point = new THREE.PointLight(0x33ff0);
    // 设置点光源的位置坐标(x=400, y=200, z=300)
    point.position.set(40, 40, 40);
    // 将点光源添加到场景中
    scene.add(point);
    
    // 创建环境光，提供整体的基础照明，颜色为灰色(0x444444)
    // 环境光会均匀照亮场景中的所有物体
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

8、定义函数方法使得物体动起来

    /**
     * 动画循环函数 - 让球体持续旋转
     */
    function animate(){
      requestAnimationFrame(animate);
    //   mesh.rotation.x += 0.01;
    //   mesh.rotation.y += 0.01;
      mesh.rotation.z += 0.01;
      mesh2.rotation.z += 0.01;
      mesh3.rotation.z += 0.01;
      renderer.render(scene, camera);
    }
    
    // 启动动画循环
    animate();

9、控制器 Controls

控制器是实现用户与3D场景交互的核心组件，它们能让你用鼠标、键盘或触摸来旋转、平移、缩放场景，或者实现第一人称漫游等高级交互。

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 启用阻尼（惯性）
    controls.dampingFactor = 0.1;  // 阻尼系数
    controls.enableZoom = true;   // 启用缩放
    controls.enableRotate = true; // 启用旋转
    controls.enablePan = false;    // 启用平移（右击）

在动画循环函数中需加入// 更新控制器
      controls.update();

有 controls.update() 的效果：

• 鼠标拖拽后松开，相机会平滑减速停止（有惯性）

• 操作感觉更流畅自然

没有 controls.update() 的效果：

• 鼠标拖拽后松开，相机会立即停止（无惯性）

• 操作感觉比较生硬

10、添加坐标轴辅助和网格辅助

// 添加3D坐标轴辅助（红色X, 绿色Y, 蓝色Z）
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

// 添加网格地面辅助
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);