当前位置：首页 > article >正文

Three.js世界中的三要素：场景、相机、渲染器

article 2025/3/31 9:48:56

一、Three.js简介

Three.js是一个基于WebGL的JavaScript库，它允许开发者在网页上创建和显示复杂的3D图形和动画，而无需用户安装任何额外的插件或软件。Three.js在Web开发中的地位非常重要，它通过提供简单直观的API，极大地降低了3D图形开发的门槛，使得开发者可以更专注于实现创意。Three.js广泛应用于游戏开发、虚拟现实、数据可视化、艺术创作等多个领域。

二、场景：3D世界的舞台

在Three.js中，场景（Scene）是一个3D世界的容器，所有对象都必须添加到场景中才能显示。场景管理着所有的3D对象、光源、相机等内容。你可以将场景想象成一个空房间，房间里面可以放置要呈现的物体、相机、光源等。

（一）场景的关键属性和相关操作

添加对象：你可以向场景中添加各种3D对象，如几何体、网格、光源等。例如，创建一个立方体并将其添加到场景中：

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

背景设置：你可以设置场景的背景颜色或纹理。例如，设置场景背景色为浅灰色：

scene.background = new THREE.Color(0xeeeeee);

加载模型：通过加载外部3D模型来拓展场景。例如，使用GLTFLoader加载一个模型：

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

三、相机：观察者的视角

相机（Camera）在Three.js中决定了我们从哪里以及如何观察场景。Three.js提供了两种常用的相机：透视投影相机（PerspectiveCamera）和正交投影相机（OrthographicCamera）。

{一}透视投影相机

透视投影相机模拟人眼看到的效果，近大远小。它的四个参数（fov、aspect、near、far）构成一个视锥体，只有视锥体之内的物体才会被渲染出来。

（二）正交投影相机

正交投影相机则远近都是一样的大小，三维空间中平行的线，投影到二维空间也一定是平行的。它通常用于制图、建模等方面，方便观察模型之间的大小比例。

（三）相机的关键参数

视角（fov）：控制视野角度。
宽高比（aspect）：控制相机的宽高比，通常设置为窗口的宽高比。
近裁剪平面（near）：控制相机能看到的最近距离。
远裁剪平面（far）：控制相机能看到的最远距离。

四、渲染器：将虚拟变为现实

渲染器（Renderer）负责将场景中的3D对象通过相机视角渲染到屏幕上。Three.js中最常用的渲染器是WebGLRenderer，它利用WebGL技术实现高性能的3D渲染。

渲染器的关键参数

大小设置：通过setSize方法设置渲染的长宽。
背景颜色：通过setClearColor方法设置渲染器的背景颜色。
渲染目标：除了渲染到屏幕外，还可以渲染到其他目标，如帧缓冲对象（FBO）。

五、三要素的协同工作

场景、相机和渲染器是如何协同工作的呢？通过一个具体的示例，展示从创建场景、设置相机到使用渲染器进行渲染的完整过程。

// 创建场景
const scene = new THREE.Scene();

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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