【Three.js基础入门】：创建你的第一个3D场景

引言：

Three.js是一种强大的JavaScript库，用于在Web浏览器中创建交互式的3D图形和动画。无需熟练的图形编程经验，你也可以通过Three.js轻松地构建令人惊叹的3D场景。

本文将带你逐步学习如何入门Three.js，从创建一个简单的3D场景开始。

创建步骤 

我们将介绍如何使用Three.js创建你的第一个3D场景。Three.js是一个基于WebGL的JavaScript库，可以帮助我们在Web上创建3D场景和交互式动画。

1.引入Three.js库

首先，我们需要在HTML文件中引入Three.js库。可以通过使用CDN或下载库文件来实现。在这里，我们将使用CDN方式引入Three.js库。

2 创建一个场景对象

接下来，我们需要创建一个场景对象、相机对象和渲染器对象。场景对象是用来存储和管理所有3D对象的容器，相机对象是用来定义我们的视角和观察场景的位置和方向，渲染器对象则是用来渲染场景和相机。

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

3 添加一个几何体对象

在场景中添加一个几何体对象，我们可以使用Three.js提供的几何体创建函数，并设置材质对象。在这里，我们将使用一个简单的立方体作为我们的几何体对象。

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

4.相机设置

最后，我们需要设置相机的位置并启动渲染器来渲染场景和相机。我们可以通过设置相机的位置来改变我们的视角和观察场景的方向。在这里，我们将相机的位置设置为z轴上5个单位的位置。

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

5 总结

以上就是创建你的第一个3D场景的基本步骤。完整的代码如下：

通过这个简单的例子，我们可以看到Three.js是如何帮助我们在Web上创建3D场景和交互式动画的。我们可以通过改变几何体对象和材质对象的属性，以及相机的位置和方向，来创建更加复杂和丰富的3D场景。

示例

简单星空

下面是一个简单的Three.js星空示例，我们将创建一个星空背景，展示闪烁的星星。

彩色星空