引言：
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库。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First Three.js Scene</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> <script> // Three.js code here </script> </body> </html>
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场景的基本步骤。完整的代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My First Three.js Scene</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script> <script> 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); var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html>通过这个简单的例子，我们可以看到Three.js是如何帮助我们在Web上创建3D场景和交互式动画的。我们可以通过改变几何体对象和材质对象的属性，以及相机的位置和方向，来创建更加复杂和丰富的3D场景。
示例
简单星空
下面是一个简单的Three.js星空示例，我们将创建一个星空背景，展示闪烁的星星。
<!DOCTYPE html>
<html>
<head>
<title>Three.js星空示例</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建WebGL渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到HTML页面中
document.body.appendChild(renderer.domElement);
// 创建星星材质
var starMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.1
});
// 创建星星几何体
var starGeometry = new THREE.BufferGeometry();
var starVertices = [];
for (var i = 0; i < 1000; i++) {
var x = (Math.random() - 0.5) * 2000;
var y = (Math.random() - 0.5) * 2000;
var z = (Math.random() - 0.5) * 2000;
starVertices.push(x, y, z);
}
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
// 创建星星点云对象
var stars = new THREE.Points(starGeometry, starMaterial);
// 将星星点云对象添加到场景中
scene.add(stars);
// 将相机位置设为z轴向后200个单位，使星空在视野内
camera.position.z = 200;
// 添加动画效果，使星星闪烁
function animate() {
requestAnimationFrame(animate);
// 让星星随机闪烁
stars.rotation.x += 0.001;
stars.rotation.y += 0.001;
// 渲染场景
renderer.render(scene, camera);
}
// 调用动画函数
animate();
</script>
</body>
</html>
彩色星空
<!DOCTYPE html>
<html>
<head>
<title>五彩宇宙星空 - Three.js示例</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建透视相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建WebGL渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器添加到HTML页面中
document.body.appendChild(renderer.domElement);
// 创建粒子材质
var particleMaterial = new THREE.PointsMaterial({
size: 2,
vertexColors: true, // 开启顶点颜色，使每个粒子有不同的颜色
transparent: true,
opacity: 0.7
});
// 创建粒子几何体
var particleGeometry = new THREE.BufferGeometry();
var particleVertices = [];
var colors = [];
for (var i = 0; i < 1000; i++) {
var x = (Math.random() - 0.5) * 2000;
var y = (Math.random() - 0.5) * 2000;
var z = (Math.random() - 0.5) * 2000;
particleVertices.push(x, y, z);
// 为每个粒子随机生成一个五颜六色的颜色
var color = new THREE.Color();
color.setRGB(Math.random(), Math.random(), Math.random());
colors.push(color.r, color.g, color.b);
}
particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(particleVertices, 3));
particleGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
// 创建粒子系统对象
var particles = new THREE.Points(particleGeometry, particleMaterial);
// 将粒子系统对象添加到场景中
scene.add(particles);
// 将相机位置设为z轴向后1000个单位，使星空在视野内
camera.position.z = 1000;
// 添加动画效果，让粒子随机闪烁
function animate() {
requestAnimationFrame(animate);
// 使粒子随机闪烁
particles.rotation.x += 0.001;
particles.rotation.y += 0.001;
// 渲染场景
renderer.render(scene, camera);
}
// 调用动画函数
animate();
</script>
</body>
</html>