深入解析 Three.js 场景（Scene）：打造虚拟世界的画布

2024-01-02 09:47:02

Three.js 中的场景（Scene）是一个容器，它包含所有要渲染到屏幕上的对象。它是 Three.js 中虚拟世界的画布，负责管理和组织场景中的所有元素。本文将深入探究场景的属性和方法，为您提供一个全面的指南，帮助您创建身临其境的 3D 体验。

Scene 的属性

Scene 的属性定义了场景的基本设置和行为。以下是其最常用的属性：

fog ：控制场景中的雾效，可以设置雾的类型、颜色和密度。
background ：设置场景的背景色或纹理。
autoUpdate ：控制场景是否自动更新。如果设置为 false，则必须手动调用 render() 方法来更新场景。
userData ：一个自定义对象，可以附加任意数据到场景中。

Scene 的方法

Scene 的方法允许您操作场景的内容和行为。以下是其最常用的方法：

add() ：向场景中添加一个或多个对象。
remove() ：从场景中删除一个或多个对象。
clear() ：从场景中删除所有对象。
traverse() ：遍历场景中的所有对象及其子对象。
getObjectByName() ：根据名称获取场景中的对象。
updateMatrixWorld() ：更新场景中所有对象的变换矩阵。
clone() ：创建场景的一个副本。

创建一个简单的场景

以下是创建一个简单场景的示例代码：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();