初识Three.js：用JavaScript打造你的首个3D世界初识Three.js：用JavaScript打造你的首个

初识Three.js：用JavaScript打造你的首个3D世界

动画.gif

引言

Three.js 是一个强大的JavaScript 3D库，它让开发者无需深入了解WebGL底层API即可创建惊艳的3D场景。本文将以一个可互动的三角锥体案例为起点，带你快速上手Three.js的核心概念与开发流程。

一、环境准备

1. 引入Three.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js入门</title>
    <style>body{margin:0}</style>
</head>
<body>
    <!-- 直接通过CDN引入最新版本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r152/three.min.js"></script>
</body>
</html>

2. 创建基础HTML框架

保持页面简洁，移除默认边距以便画布铺满视窗。

二、核心三要素

1. 场景(Scene) - 三维世界的容器

// 创建全局场景对象
const scene = new THREE.Scene();

2. 相机(Camera) - 观察视角

// 创建透视相机（参数详解）：
// 视野角度 45° | 宽高比自适应屏幕 | 近裁剪面0.1 | 远裁剪面1000
const camera = new THREE.PerspectiveCamera(
    45, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
);

// 设置相机初始位置（推远至z轴5单位处）
camera.position.z = 5;

3. 渲染器(Renderer) - 画面输出引擎

// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 设置画布尺寸匹配窗口
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染结果挂载到DOM
document.body.appendChild(renderer.domElement);

三、构建3D对象

1. 几何体(Geometry)

// 创建三角锥体几何（底半径1，高度1，3个分段形成三角形底面）
const geometry = new THREE.ConeGeometry(1, 1, 3);

2. 材质(Material)

// 创建基础网格材质（橙色+线框显示）
const material = new THREE.MeshBasicMaterial({ 
    color: 0xff6600,  // 十六进制颜色
    wireframe: true   // 开启线框模式
});

3. 网格(Mesh) - 几何体与材质的结合

// 组合成可渲染的网格对象
const pyramid = new THREE.Mesh(geometry, material);

// 将网格添加到场景
scene.add(pyramid);

四、动画与交互

1. 动画循环函数

function animate() {
    requestAnimationFrame(animate); // 请求下一帧动画
    
    // 每帧执行旋转操作
    pyramid.rotation.x += 0.01;
    pyramid.rotation.y += 0.01;
    
    // 颜色渐变逻辑（基于时间改变色相）
    const time = Date.now() * 0.002;
    material.color.setHSL((time % 1), 1, 0.5);
    
    // 渲染最终画面
    renderer.render(scene, camera);
}
animate();

2. 响应式画布调整

// 监听窗口大小变化
window.addEventListener('resize', () => {
    // 更新相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    // 重置渲染器尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
});

五、完整代码示例

// 导入Three.js库
import * as THREE from 'three';

// 初始化场景
const scene = new THREE.Scene();

// 配置相机
const camera = new THREE.PerspectiveCamera(
    45, 
    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.ConeGeometry(1, 1, 3);
const material = new THREE.MeshBasicMaterial({ color: 0xff6600, wireframe: true });
const pyramid = new THREE.Mesh(geometry, material);
scene.add(pyramid);

// 动画驱动函数
function animate() {
    requestAnimationFrame(animate);
    
    // 旋转变换
    pyramid.rotation.x += 0.01;
    pyramid.rotation.y += 0.01;
    
    // 动态色彩
    const time = Date.now() * 0.002;
    material.color.setHSL((time % 1), 1, 0.5);
    
    // 渲染输出
    renderer.render(scene, camera);
}
animate();

// 响应窗口调整
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

六、效果预览

你将看到一个缓慢旋转的三角锥体，其表面呈现彩虹般的流动色彩。线框模式下可以清晰观察到几何体的网格结构。

七、常见问题排查

黑屏问题：检查相机是否在场景之外，尝试调整camera.position.z的值
变形拉伸：确保在窗口调整事件中同步更新相机比例
性能卡顿：复杂场景下考虑降低几何体细分参数
颜色不变化：确认material.color使用的是支持HSL的方法

八、进阶方向

探索其他几何体（BoxGeometry、SphereGeometry等）
添加光源系统（PointLight、DirectionalLight）
加载外部模型（GLTFLoader）
实现用户交互（OrbitControls拖拽旋转）

通过这个简单的示例，你已经掌握了Three.js的基础架构。不妨尝试修改参数值，替换几何体类型，或者添加多个对象来丰富你的3D世界！