Three.js 入门指南:打造交互式3D Web体验
介绍
Three.js 是一个强大的 JavaScript 3D 图形库,它可以帮助开发者在 Web 上轻松构建交互式的 3D 应用和游戏。本篇博客将带你从零开始学习 Three.js,涵盖基本概念、环境设置、创建场景、添加对象、交互与动画等方面。无需担心你的 WebGL 知识,我们将一步步引导你掌握 Three.js。
准备工作
在开始之前,请确保你已经具备以下知识与工具:
- 基本的 HTML、CSS 和 JavaScript 编程知识。
- 最新版本的浏览器(建议使用 Chrome 或 Firefox)。
- 一个文本编辑器,例如 Visual Studio Code。
第一步:环境搭建
-
创建一个新的项目文件夹,命名为 “threejs-starter”。
-
在项目文件夹中创建以下文件:
index.html
:用于加载 Three.js 库和显示 3D 场景的页面。app.js
:用于编写 Three.js 代码的主要 JavaScript 文件。
-
在
index.html
中添加以下内容:
<!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>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="app.js"></script>
</body>
</html>
- 现在,我们需要下载 Three.js 库。在
<head>
标签中添加以下链接:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
- 创建
app.js
文件,并在index.html
中引用它。此文件将包含我们的 Three.js 代码。
第二步:创建场景与相机
在 app.js
中开始编写 Three.js 代码。
- 创建场景(Scene):
const scene = new THREE.Scene();
- 创建相机(Camera):
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
这里我们使用透视相机(PerspectiveCamera),设置视野角度为 75 度,纵横比为窗口的纵横比,可视范围从 0.1 到 1000 个单位。
- 创建渲染器(Renderer)并添加到页面中:
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
第三步:添加几何体
我们来添加一个简单的立方体到场景中。
- 创建立方体(BoxGeometry):
const geometry = new THREE.BoxGeometry();
- 创建材质(Material)并设置颜色:
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
- 创建网格(Mesh)并将几何体和材质绑定:
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();
第五步:交互
我们可以在场景中添加一些交互元素,比如鼠标控制。
- 在
index.html
中添加以下 CSS 样式:
<style>
body { margin: 0; }
canvas { display: block; }
</style>
- 在
app.js
中导入 OrbitControls:
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
- 创建 OrbitControls 实例:
const controls = new OrbitControls(camera, renderer.domElement);
- 在动画循环中更新 controls:
function animate() {
requestAnimationFrame(animate);
controls.update();
// 其他动画代码...
}
结语
恭喜!你已经完成了 Three.js 的入门指南。现在你已经具备了构建基本 3D 场景和交互式元素的知识,希望这篇博客能够激发你进一步探索 Three.js 的兴趣。祝你在 3D Web 开发中取得更多成功!
如有疑问或需要更多学习资源,请查阅 Three.js 官方文档以及社区教程。Happy coding!