从入门到实践：Three.js 的奇幻 3D 世界探索
从入门到实践：Three.js 的奇幻 3D 世界探索
在 Web 开发领域，3D 图形的呈现越来越受到关注。Three.js 作为一个基于 JavaScript 的轻量级 3D 库，无需借助复杂的插件（如 Flash），就能在网页上创建出令人惊叹的 3D 场景。无论是制作 3D 游戏、产品展示，还是数据可视化，Three.js 都能大显身手。本文将带领你从基础概念出发，结合实际案例，一步步走进 Three.js 的 3D 世界。
一、Three.js 基础概念
在开始编写代码之前，我们需要先了解 Three.js 的几个核心概念，它们是构建 3D 场景的基石。
-
场景（Scene）：场景是所有 3D 对象的容器，它就像是一个虚拟的舞台，你可以在这个舞台上放置各种物体、灯光等元素。
-
相机（Camera）：相机决定了我们从哪个角度去观察场景，不同类型的相机（如透视相机、正交相机）会带来不同的视觉效果。
-
渲染器（Renderer）：渲染器负责将场景和相机的内容渲染到网页上，它会将 3D 场景转换为 2D 图像显示在浏览器中。
-
几何体（Geometry）：几何体定义了物体的形状，例如立方体、球体、平面等。
-
材质（Material）：材质决定了物体的外观，包括颜色、纹理、透明度等属性。
二、搭建第一个 Three.js 场景
接下来，我们通过一个简单的案例来搭建一个包含立方体的 3D 场景。
1. 准备工作
首先，在 HTML 文件中引入 Three.js 库。你可以通过 CDN 的方式引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js入门案例</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r151/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>
这里在<body>标签中引入了 Three.js 的 CDN 链接，并预留了一个script.js文件用于编写 JavaScript 代码。
2. JavaScript 代码实现
在script.js文件中，编写以下代码：
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格对象（将几何体和材质组合）
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染函数
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
代码解释：
-
首先创建了场景
scene、透视相机camera和 WebGL 渲染器renderer，并将渲染器的 DOM 元素添加到网页的body中。 -
然后创建了一个立方体的几何体
BoxGeometry和绿色的基础材质MeshBasicMaterial，将它们组合成一个网格对象cube并添加到场景中。 -
最后定义了一个
animate函数，使用requestAnimationFrame实现动画效果，让立方体在每一帧都绕 X 轴和 Y 轴旋转一定角度，并调用renderer.render方法渲染场景和相机。
运行 HTML 文件，你将看到一个绿色的立方体在浏览器中缓缓旋转。
三、进阶案例：创建带纹理的球体
接下来，我们进一步深入，创建一个带有纹理的球体，让场景更加生动。
1. 准备纹理图片
在项目目录下创建一个textures文件夹，放入一张纹理图片（例如一张地球的纹理图earth.jpg）。
2. 修改 JavaScript 代码
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();
// 加载纹理
const texture = textureLoader.load('textures/earth.jpg');
// 创建几何体
const geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建带有纹理的材质
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建网格对象
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 渲染函数
function animate() {
requestAnimationFrame(animate);
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
在这段代码中，我们新增了纹理加载的步骤：
-
使用
THREE.TextureLoader创建纹理加载器textureLoader。 -
通过
textureLoader.load方法加载指定路径下的纹理图片，并将其赋值给texture变量。 -
在创建材质时，将
map属性设置为加载的纹理texture，这样球体就会显示出纹理效果。
运行代码，你将看到一个带有纹理的球体在浏览器中旋转，仿佛一个真实的星球。
浙公网安备 33010602011771号