Three.js教程_02场景、相机与渲染器全面解析

Three.js 场景、相机与渲染器全面解析

Three.js 是一个强大的 JavaScript 库，用于在网页上创建和渲染 3D 图形。本文将深入解析 Three.js 中的几个核心概念，并介绍它们的用法及拓展方法。内容包括场景、相机、渲染器、网格对象、光源、坐标轴、控制器和动画的基本用法与技巧。

目录

1. Scene（场景）
2. Camera（相机）
3. Renderer（渲染器）
4. Mesh（网格对象）
5. Light（光源）
6. AxesHelper（坐标轴辅助工具）
7. Controls（控制器）
8. Animation（动画）

---

1. Scene（场景）

场景是 Three.js 中的一个容器，它保存了所有的 3D 对象、光源、相机等内容。每个 Three.js 应用至少需要一个场景对象。

场景拓展：

• 添加更多对象：不仅仅是物体，还可以添加光源、相机、背景等。
• 背景设置：你可以设置场景的背景颜色或纹理。

  scene.background = new THREE.Color(0xeeeeee); // 设置场景背景色为浅灰色
  // 或者使用纹理
  scene.background = new THREE.TextureLoader().load('background.jpg');
  

• 加载模型：通过加载外部 3D 模型来拓展场景。

  const loader = new THREE.GLTFLoader();
  loader.load('model.glb', function(gltf) {scene.add(gltf.scene);
  });
  

---

2. Camera（相机）

相机定义了 3D 世界的视角。Three.js 中常用的相机类型有 PerspectiveCamera（透视相机）和 OrthographicCamera（正交相机）。

透视相机

• fov：控制视野角度。
• aspect：控制宽高比。
• near 和 far：控制可见范围。

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

正交相机

• 正交相机常用于二维图像或正交投影。

  const camera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.1, 1000);
  

相机动画

• 动态修改相机的位置、角度或旋转，创造动画效果。

  camera.position.x = Math.sin(Date.now() * 0.001) * 10;
  camera.position.y = 5;
  camera.position.z = Math.cos(Date.now() * 0.001) * 10;
  

---

3. Renderer（渲染器）

渲染器负责将 3D 场景渲染为 2D 图像并显示在网页上。WebGLRenderer 是 Three.js 默认的渲染器。

渲染器拓展：

• 启用阴影：渲染器可以启用阴影效果，增强真实感。

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 设置阴影类型
  

• 渲染目标：除了渲染到屏幕外，还可以渲染到其他目标，如帧缓冲对象（FBO）。

  const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
  renderer.setRenderTarget(renderTarget);
  renderer.render(scene, camera);
  

---

4. Mesh（网格对象）

网格是场景中的实际物体，由几何体（形状）和材质组成。

网格拓展：

• 多个网格：可以创建多个不同的几何体，并将它们组合在同一个场景中。

  const sphereGeometry = new THREE.SphereGeometry(1);
  const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.set(0, 0, 0);
  scene.add(sphere);
  

• 添加纹理：通过 THREE.TextureLoader 加载纹理并应用到材质上。

  const texture = new THREE.TextureLoader().load('texture.jpg');
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const cube = new THREE.Mesh(geometry, material);
  

---

5. Light（光源）

光源是 Three.js 中的关键元素，用于照亮场景中的物体。常见的光源有：点光源（PointLight）、平行光（DirectionalLight）、环境光（AmbientLight）等。

光源拓展：

• 点光源：模拟从一个点发出的光线。

  const pointLight = new THREE.PointLight(0xffffff, 1, 100);
  pointLight.position.set(10, 10, 10);
  scene.add(pointLight);
  

• 平行光：模拟太阳光，光线平行。

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(5, 5, 5).normalize();
  scene.add(directionalLight);
  

• 环境光：提供均匀的光照。

  const ambientLight = new THREE.AmbientLight(0x404040); // 灰色环境光
  scene.add(ambientLight);
  

---

6. AxesHelper（坐标轴辅助工具）

坐标轴辅助工具用于在场景中显示坐标轴，帮助理解物体的位置。

坐标轴拓展：

• 自定义坐标轴的颜色和尺寸：

  const axesHelper = new THREE.AxesHelper(10); // 坐标轴长度为10
  axesHelper.material.linewidth = 2; // 设置坐标轴线宽
  scene.add(axesHelper);
  

• 移除坐标轴：可以动态移除坐标轴辅助工具。

  scene.remove(axesHelper);
  

---

7. Controls（控制器）

OrbitControls 是一种用于控制相机的工具，可以实现旋转、缩放和平移操作，并支持平滑的惯性效果。

控制器拓展：

• 控制器属性：

  controls.enableZoom = true; // 启用缩放
  controls.minDistance = 5; // 设置相机缩放的最小距离
  controls.maxDistance = 100; // 设置相机缩放的最大距离
  controls.enablePan = true; // 启用平移
  

• 平滑效果：为控制器启用惯性效果。

  controls.enableDamping = true; // 开启惯性
  controls.dampingFactor = 0.25; // 设置惯性强度
  

---

8. Animation（动画）

动画是 Three.js 中的核心部分，使用 requestAnimationFrame 函数来实现平滑的动画效果。

动画拓展：

• 物体动画：

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

---

通过以上八大核心部分，你可以构建一个丰富的 3D 场景，加入各种动态元素和交互控制，打造出炫酷的网页 3D 应用。这些基础知识是学习 Three.js 的起点，你可以在此基础上进行拓展和创新。