从粒子到场景 - Three.js的进阶之路

Three.js是一个JavaScript库，用于在网络浏览器中创建和显示3D图形。它基于WebGL，一种允许您在浏览器中渲染3D图形的API。Three.js被广泛用于创建游戏、虚拟现实和增强现实应用程序，以及交互式数据可视化。

在本文中，我们将创建一个简单的Three.js场景，其中包含一个球体和一个灯光。我们将学习如何创建场景、添加对象到场景中，以及如何控制摄像机。

首先，我们需要创建一个场景。场景是Three.js中存储所有对象的地方。您可以通过以下方式创建场景：

const scene = new THREE.Scene();

接下来，我们需要创建一个球体。球体是Three.js中的一种基本形状。您可以通过以下方式创建一个球体：

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(geometry, material);

球体几何体由一系列顶点和三角形面组成。顶点定义了球体的形状，而三角形面则填充了顶点之间的空间。材质定义了球体的颜色和光泽。

现在，我们需要将球体添加到场景中。您可以通过以下方式将球体添加到场景中：

scene.add(sphere);

现在，我们需要创建一个灯光。灯光是Three.js中用于照亮场景的工具。您可以通过以下方式创建一个灯光：

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(5, 5, 5);

灯光的位置定义了灯光在场景中的位置。灯光的颜色定义了灯光发出的光线颜色。灯光的强度定义了灯光发出的光线强度。

现在，我们需要将灯光添加到场景中。您可以通过以下方式将灯光添加到场景中：

scene.add(light);

现在，我们需要创建一个摄像机。摄像机是Three.js中用于查看场景的工具。您可以通过以下方式创建一个摄像机：

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

摄像机的参数定义了摄像机的视角、宽高比、近裁剪平面和远裁剪平面。摄像机的位置定义了摄像机在场景中的位置。

现在，我们需要将摄像机添加到场景中。您可以通过以下方式将摄像机添加到场景中：

scene.add(camera);

现在，我们需要创建一个渲染器。渲染器是Three.js中用于将场景渲染到屏幕上的工具。您可以通过以下方式创建一个渲染器：

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

渲染器的大小定义了渲染器的大小。

现在，我们需要将渲染器添加到页面中。您可以通过以下方式将渲染器添加到页面中：

document.body.appendChild(renderer.domElement);

现在，我们需要创建一个动画循环。动画循环是Three.js中用于更新场景并将其渲染到屏幕上的工具。您可以通过以下方式创建一个动画循环：

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}

animate();

动画循环会不断调用requestAnimationFrame()方法，该方法会告诉浏览器在下次屏幕刷新时调用animate()方法。在animate()方法中，我们更新场景并将其渲染到屏幕上。

现在，您可以运行您的代码了。您可以看到一个球体悬浮在场景中，并且有一个灯光照亮了球体。您可以通过拖动鼠标来旋转球体。