Three.js教程_02场景、相机与渲染器全面解析
Three.js 场景、相机与渲染器全面解析
Three.js 是一个强大的 JavaScript 库，用于在网页上创建和渲染 3D 图形。本文将深入解析 Three.js 中的几个核心概念，并介绍它们的用法及拓展方法。内容包括场景、相机、渲染器、网格对象、光源、坐标轴、控制器和动画的基本用法与技巧。
目录
- Scene（场景）
- Camera（相机）
- Renderer（渲染器）
- Mesh（网格对象）
- Light（光源）
- AxesHelper（坐标轴辅助工具）
- Controls（控制器）
- 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 的起点，你可以在此基础上进行拓展和创新。