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 的起点,你可以在此基础上进行拓展和创新。