第一个场景&相机介绍

three.js中的场景

在three.js中，场景是一个对象，用于容纳场景中的所有其他对象，包括模型、灯光和相机。场景本身并不具备可视性，但它定义了场景中所有对象的坐标系和位置。

创建场景非常简单，只需要创建一个新的Scene对象即可。

const scene = new THREE.Scene();

three.js中的相机

相机是用于观察场景的工具。相机可以通过不同的方式进行分类，例如，根据相机的类型，可以分为透视相机和正交相机；根据相机的焦距，可以分为广角相机和长焦相机。

在three.js中，最常用的相机是透视相机。透视相机模拟了人眼的视觉效果，它可以创建具有透视效果的场景。

创建透视相机也很简单，只需要创建一个新的PerspectiveCamera对象即可。

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

第一个参数是相机的视场，第二个参数是相机的宽高比，第三个参数是相机的近裁剪平面，第四个参数是相机的远裁剪平面。

将相机添加到场景中

为了能够观察场景，我们需要将相机添加到场景中。

scene.add(camera);

渲染场景

为了将场景渲染到画布上，我们需要使用WebGL渲染器。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

创建一个简单的场景

现在，我们已经了解了场景和相机的概念，我们可以创建一个简单的场景了。

首先，我们需要创建一个场景。

const scene = new THREE.Scene();

接下来，我们需要创建一个相机。

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

然后，我们需要将相机添加到场景中。

scene.add(camera);

最后，我们需要创建一个WebGL渲染器并渲染场景。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);

现在，我们已经创建了一个简单的场景，其中包含一个相机。我们可以通过调整相机的参数来观察场景的不同部分。

添加模型到场景中

我们可以使用three.js内置的几何体或自定义几何体来创建模型。

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);

这样，我们就向场景中添加了一个立方体模型。

添加灯光到场景中

为了能够看到模型，我们需要向场景中添加灯光。

const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

这样，我们就向场景中添加了一盏环境光。

总结

在本文中，我们介绍了three.js中场景和相机的概念，以及它们在创建3D场景中的作用。我们还介绍了如何使用three.js创建简单的场景，并添加模型、灯光和相机。通过本文，您已经了解了three.js中场景和相机的工作原理，并能够在自己的three.js项目中使用它们。