使用 THREE.js 制作3D场景与动画

THREE.js 是一个用于创建并展示3D场景和动画的JavaScript库。它是基于WebGL技术构建的，并提供了一套简化的API用于创建和渲染3D模型、灯光、材质等。

开始

在开始使用 THREE.js 之前，您需要确保您已经将其引入到您的项目中。可以通过以下方式来获取 THREE.js 的源码:

<script src="https://threejs.org/build/three.js"></script>

另外，为了方便编程，我们还可以引入 OrbitControls.js：

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

创建场景

首先，我们需要创建一个场景（Scene），一个相机（Camera）和一个渲染器（Renderer）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

添加物体

接下来，我们可以创建一些3D物体并将它们添加到场景中：

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

添加光源

要使物体可见，我们还需要添加一个光源。常见的光源有点光源（PointLight）、平行光源（DirectionalLight）和环境光（AmbientLight）等：

var pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(0, 0, 10);
scene.add(pointLight);

渲染动画

最后，我们要编写一个动画渲染函数来更新场景并在每一帧中进行渲染：

function animate() {
    requestAnimationFrame(animate);
    
    // 旋转物体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();

添加控制器

为了更方便地控制相机的视角，我们可以使用 OrbitControls 来添加鼠标交互控制：

var controls = new THREE.OrbitControls(camera, renderer.domElement);

结论

使用 THREE.js，您可以创建出丰富多样的3D场景和动画。本文仅作为一个简单的入门指南，下一步您可以尝试更复杂的场景和动画效果，学习更多的THREE.js特性和功能。

希望您能够通过使用 THREE.js ，探索出令人惊叹的3D世界！