Three.js - 场景(Scene)（十）

在Three.js中，右手坐标系是被使用的，这与数学中常用的左手坐标系不同。这种坐标系的选择是由于WebGL默认使用右手坐标系。在右手坐标系中，X轴的正方向指向右，Y轴的正方向指向向上，Z轴的正方向指向外。

在Three.js中，场景(Scene)的概念是指用于组织和管理三维对象（例如网格、光源、相机等）的容器。场景本身并不渲染任何东西，它只是提供了一个包含所有要渲染对象的组织结构。

场景(Scene)包含以下几个主要组件：

• 坐标系(Coordinate System) ：three.js使用右手坐标系，x轴指向右，y轴指向向上，z轴指向外。
• 视口(Viewport) ：视口是用于显示场景的矩形区域。它可以是窗口的整个区域，也可以是窗口的一部分。
• 渲染器(Renderer) ：渲染器负责将场景转换为图像。three.js支持多种渲染器，包括WebGLRenderer、CanvasRenderer和SVGRenderer。
• 相机(Camera) ：相机用于定义观察场景的角度和位置。three.js支持多种相机，包括PerspectiveCamera、OrthographicCamera和StereoCamera。

接下来我们介绍如何使用Three.js创建场景。

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

// 创建渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

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

// 将相机添加到场景中
scene.add(camera);

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

// 将立方体添加到场景中
scene.add(cube);

// 将场景和相机添加到dom元素中
document.body.appendChild(renderer.domElement);

// 渲染场景
renderer.render(scene, camera);

这段代码创建了一个场景，并将立方体添加到场景中。然后将场景和相机添加到dom元素中，最后渲染场景。