three.js 零基础到入门

什么是 three.js

Three.js 是一个用于在网页上创建和展示 3D 图形的 JavaScript 库。它简化了 WebGL 的复杂性，为开发者提供了一组易于使用的 API，使得创建、显示和操控 3D 对象变得更加方便。以下是对 Three.js 的更详细解释：

为什么使用 three.js

解决了在前端开发中实现 3d 效果的繁琐问题

• 封装 WebGL：WebGL 是一个用于在浏览器内呈现 3D 图形的低级 API，它提供了强大的功能，但学习曲线陡峭。Three.js 封装了 WebGL 的许多复杂性，提供了更简单的接口。
• 易于使用的 API：开发者可以使用简单的函数和对象来创建和操控 3D 场景，而不需要深入理解 WebGL 的细节。
• 快速原型：由于其易用性，开发者能够快速创建和测试 3D 原型，缩短了开发周期。

使用 Three.js

1. 创建场景

在 Three.js 中，Scene 类是构建 3D 环境的基础组件。它充当所有 3D 对象（例立方体、球体、灯光、相机等）的容器，并管理这些对象的渲染。

示例

const scene = new THREE.Scene();

2.创建相机

• 在 Three.js 中，PerspectiveCamera 类用于创建透视相机，它能够模拟人眼的视角，让场景中的物体在视觉上具有深度感。透视相机是 3D 图形中常用的一种相机类型，尤其适用于展示真实世界中的场景。
• 在 Three.js 的所有类中，position 属性用于修改物体在三维空间中的坐标。通过设置 position，我们可以控制相机或其他对象在 X、Y 和 Z 轴上的位置。这使得我们能够灵活地决定视角和观察点，进而影响最终的渲染效果。通过调整相机的位置，我们可以改变观察者的视角，以便获得不同的视觉体验。

示例

const camera = new THREE.PerspectiveCamera();
camera.position.z = 10;
camera.position.y = 2;

3. 创建立方体并添加网格地面

• BoxGeometry 是 Three.js 中用于创建立方体的一个类。构造函数接受三个参数，分别表示立方体的宽度、高度和深度。
• MeshBasicMaterial 是一种材质类型，它用于定义 3D 对象的外观。与其他材质不同，MeshBasicMaterial不受光照影响，因此它总是以定义的颜色显示，无论场景中的光照条件如何。
• Mesh 是 Three.js 中用于创建网格的一个类。Mesh 对象结合了几何体（如 BoxGeometry）和材质（如 MeshBasicMaterial）来构建可视的 3D 物体。通过将几何体和材质结合，Mesh 表示一个具有具体形状和视觉外观的三维对象，可以在场景中进行操作和渲染。

示例

//创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//设置立方体的颜色
const material = new THREE.MeshBasicMaterial({ color: 0x888 });
//创建网格并把立方体放进去
const cube = new THREE.Mesh(geometry, material);
//设置立方体的位置在可视范围内
cube.position.set(0, 3, 0);
//添加网格地面
const gridHelper = new THREE.GridHelper(10, 10);
//把立方体和网格地面加入场景中
scene.add(cube);
scene.add(gridHelper);

提示
GridHelper 是 Three.js 提供的一个辅助类，用于在场景中生成一个可视化的网格。它的主要功能是帮助开发者和设计师在 3D 空间中定位和对齐对象。GridHelper 的网格通常由线条构成，便于快速判断场景的坐标和对象的位置。

数字代表的含义：

• 第一个参数定义了网格的边长，即网格范围的大小。
• 第二个参数决定了每个维度上将网格细分为多少个单元，影响网格的密度和视觉清晰度。

5. 创建渲染器

在 Three.js 中，WebGLRenderer 是主要的渲染器，它利用 WebGL 技术来在浏览器中绘制高效的 3D 图形。

示例

const renderer = new THEE.WebGLRenderer();
//渲染到id名为container的容器里面
document.getElemnetById("container").appendChild(renderer.domElement);
//调整窗口的大小
renderer.setSize(window.innerWidth, window.innerHeight);
//刚才创建的场景和立方体放进来
renderer.render(scene, camera);

6. 添加效果(移动/雾/相机跟随物体/背景)

自动旋转

• 让立方体自动旋转，可以通过调整 Mesh 对象的 rotation 属性来实现。在 onMounted 中定义一个名为 animate 的函数，该函数内使用 requestAnimationFrame(animate) 实现持续的动画循环，并在每帧中更新

示例

const animate = () => {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  //重新放进来
  renderer.render(scene, camera);
};

animate();

效果

相机自动旋转

• 为了实现相机的自动旋转，可以使用 OrbitControls 类。该类提供了 autoRotate 属性，启用此属性后，相机将自动旋转。此外，可以通过 autoRotateSpeed 属性设置旋转的速度，以控制相机自转的快慢。

示例

const controls = new OrbitControls(camera, renderer.domElement);
// 对轨道控制器改变时候进行监听
controls.addEventListener("change", function () {
  console.log("触发change");
});

// 添加阻尼
controls.enableDamping = true;
controls.dampingFactor = 0.01;

// 自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;

// 进行渲染
// renderer.render(scene, camera);

// 让立方体动起来
function animate() {
  // 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 轨道控制器更新
  controls.update();
  renderer.render(scene, camera);
}
animate();

展示效果

实现由远到近的雾

• 为了实现 场景由远到近的雾 可以使用 Three.js 中的 Fog 类来添加

示例

scene.fog = new THREE.Fog(0xcccccc, 10, 15);

展示效果

Three.js 环境贴图应用

• 使用THREE.CubeTextureLoader加载 6 面环境贴图
• 同时应用于场景背景和球体材质
• 实现全景天空盒+环境反射效果

示例

/**
 * 立方体贴图加载
 * 图片顺序：右(x+)、左(x-)、上(y+)、下(y-)、后(z+)、前(z-)
 * 注意：路径需要替换为实际资源目录
 */
const cubleTExture = new THREE.CubeTextureLoader()
  .setPath("/") // 纹理资源目录路径
  .load([
    "04.jpg",
    "01.jpg", // 右/左
    "05.jpg",
    "02.jpg", // 上/下
    "06.jpg",
    "03.jpg", // 后/前
  ]);

// 将立方体贴图设置为场景背景（全景天空盒效果）
scene.background = cubleTExture;

/**
 * 创建带环境贴图的球体
 * 参数说明：
 *   SphereGeometry(半径, 宽度分段, 高度分段)
 *   MeshBasicMaterial 基础材质支持环境贴图
 */
const sphere = new THREE.SphereGeometry(1); // 单位半径的球体
const material = new THREE.MeshBasicMaterial({
  envMap: cubleTExture, // 材质反射环境贴图
});
scene.add(sphere); // 注：原代码中的cube应为sphere

展示效果

实现物体反光和阴影(点光源,环境光源)

受光材质

• 在 Three.js 中，有一个材质类叫 MeshPhongMaterial。该材质能够通过光源影响其外观，这意味着它适合于需要呈现高光和材质细节的场景。使用 MeshPhongMaterial 时，必须为场景添加光源，以便正确地渲染出材质的反射效果和光影变化。

光源

• AmbientLight 是环境光，它接受两个参数：第一个是光的颜色，第二个是光的强度。
• PointLight 是点光源，它接受三个参数：第一个是光的颜色，第二个是光的强度，第三个是光的衰减距离（或范围）。

接受光源/投射效果(阴影)

• 在 Mesh 中 有 receiveshadow和 castshadow 分别是 接受光源和投射阴影

示例

const meterial = new THREE.MeshPhongMaterial({
  color: 0x00ff00,
  shininess: 1000,
});

// 创建MESH
const cubezft = new THREE.Mesh(zft, meterial);
cubezft.position.set(0, 0.5, 0);
//让物体接受光源
cubezft.receiveShadow = true;
//物体投射效果
cubezft.castShadow = true;

const light = new THREE.AmbientLight(0xffffff, 1);
const lightD = new THREE.PointLight(0xffffff, 1000, 100);
lightD.position.set(5, 3, 5);
lightD.castShadow = true;
scene.add(light);
scene.add(cubezft);
//添加点光源
scene.add(lightD);
//创建地面
const meshFloor = new THREE.Mesh(
  //创建地面接受两个参数长宽
  new THREE.PlaneGeometry(20, 20),
  new THREE.MeshPhongMaterial({
    color: 0x1b5e20,
    side: THREE.DoubleSide, //双面都显示
  })
);
//设置位置
meshFloor.position.set(0, 0, -1);
//设置旋转90%
meshFloor.rotation.x -= Math.PI / 2;
//地面也要接受光源
meshFloor.receiveShadow = true;
scene.add(meshFloor);

效果

7. 总结练习

新知识

• 平移属性 translate 有三个值 X Y Z 接受一个参数 表示平移的单位

控制移动思想

• 使用键盘侦听事件 @keyDOwn 在此事件中有一个参数 里面包含 key 和 keyCode 两个对象 key 输出你所点击的键盘 比如我点击 a 它的值为a keyCode 的是以 ASCll码 来存储的 比如 我点击的是 a 则输出 65
• 使用if判断(也可以使用switch) 判断 你点击的键盘COde值 我使用 wasd来控制前后左右移动 只要判断它对应的code值 然后 使用平移属性 translate 进行一系列的操作

如何让场景跟着移动
首先要让相机看向物体 camera.lookAt 接受三个参数 这里 我直接使用 物体的坐标传入 position
然后 让相机跟随物体 设置 相机位置实时 跟着物体 的坐标 这里我使用的是第三人称的效果 在原有物体的y轴+1 还有x轴加4 可以获得第三视角

示例

  const up = (event) => {
  console.log(event.keyCode);
  console.log(event.key);
  if (event.key === "ArrowUp") {

    cubezft.translateY(0.1);
  } else if (event.key == "ArrowDown") {

    cubezft.translateY(-0.1);
  }else if(event.key === 'ArrowLeft'){
    cubezft.rotation.y +=0.1
  }
  if (event.keyCode === 65) {
    cubezft.translateX(-0.1);
  } else if (event.keyCode === 87) {
    cubezft.translateZ(-0.1);
  } else if (event.keyCode === 68) {
    cubezft.translateX(0.1);
  } else if (event.keyCode === 83) {
    cubezft.translateZ(0.1);
  }else{
    return
  }
  camera.lookAt(cubezft.position);
  
  camera.position.set(
    cubezft.position.x,
    cubezft.position.y + 1,
    cubezft.position.z + 4
  );
};

效果

8. 总结知识点