Three.js实战，3D交互网站开发从入门到精通

本文目录导读：

1. 引言
2. js简介">1. Three.js简介
3. 2. 搭建Three.js开发环境
4. 4" title="3. Three.js进阶：光照、纹理与交互">3. Three.js进阶：光照、纹理与交互
5. 4. Three.js高级应用：模型加载与动画
6. 优化与性能调优">5. 优化与性能调优
7. 6. 实战案例：构建一个3D产品展示网站
8. 7. 总结

随着Web技术的快速发展,3D交互网站逐渐成为现代网页设计的重要趋势，Three.js作为一款基于WebGL的JavaScript 3D库，因其易用性和强大功能，成为开发者构建3D交互网站的首选工具，本文将带领你从Three.js的基础概念入手，逐步深入实战开发，最终掌握3D交互网站的高级技巧。

---

Three.js简介

1 什么是Three.js？

Three.js是一个开源的JavaScript 3D图形库，由Ricardo Cabello（Mr.doob）创建，旨在简化WebGL的开发流程，它提供了丰富的API，使开发者能够轻松创建3D场景、模型、动画和交互效果，而无需深入了解复杂的WebGL底层实现。

2 Three.js的核心概念

• 场景（Scene）：3D对象的容器，相当于一个虚拟世界。
• 相机（Camera）：决定用户如何观察场景，常用的有透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。
• 渲染器（Renderer）：负责将3D场景渲染到2D屏幕上。
• 几何体（Geometry）：定义3D物体的形状，如立方体、球体等。
• 材质（Material）：决定物体的外观，如颜色、纹理、光照效果等。
• 网格（Mesh）：几何体和材质的结合，构成可渲染的3D对象。

---

搭建Three.js开发环境

1 安装Three.js

Three.js可以通过多种方式引入项目：

• CDN引入：

  <script src="HTTPS://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

• npm安装：

  npm install three

2 创建第一个3D场景

以下是一个简单的Three.js示例代码，创建一个旋转的立方体：

import * as THREE from 'three';
// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
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);
camera.position.z = 5;
// 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

---

Three.js进阶：光照、纹理与交互

1 添加光照

Three.js支持多种光源类型，如环境光（AmbientLight）、平行光（DirectionalLight）、点光源（PointLight）等，以下示例展示如何添加光照：

const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

2 加载纹理

纹理可以让3D物体更真实,Three.js支持加载图片作为纹理：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

3 实现交互

Three.js可以与鼠标、键盘等输入设备交互，以下示例实现鼠标拖动旋转物体：

import { OrbitControls } from 'three/exAMPles/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼效果，使旋转更平滑
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
}

---

Three.js高级应用：模型加载与动画

1 加载外部3D模型

Three.js支持加载多种3D模型格式（如GLTF、OBJ、FBX），以下是加载GLTF模型的示例：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader();
loader.load('path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

2 骨骼动画

Three.js支持播放3D模型的骨骼动画：

const mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[0]);
action.play();
function animate() {
  requestAnimationFrame(animate);
  mixer.update(deltaTime); // 更新动画
  renderer.render(scene, camera);
}

---

优化与性能调优

1 减少渲染开销

• 使用THREE.BufferGeometry代替THREE.Geometry以提高性能。
• 合并相同材质的几何体以减少绘制调用。

2 使用WebGLRenderer的高级功能

• 开启抗锯齿（Antialiasing）：

  const renderer = new THREE.WebGLRenderer({ antialias: true });

• 使用阴影：

  renderer.shadowMap.enabled = true;
  directionalLight.castShadow = true;

---

实战案例：构建一个3D产品展示网站

1 项目需求

• 展示3D产品模型（如汽车、家具）。
• 支持鼠标拖拽旋转、缩放。
• 添加产品信息面板。

2 实现步骤

1. 使用GLTFLoader加载3D模型。
2. 添加OrbitControls实现交互。
3. 使用CSS3D渲染器创建信息面板。

3 完整代码示例

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加载模型
const loader = new GLTFLoader();
loader.load('car.glb', (gltf) => {
  scene.add(gltf.scene);
});
// 添加控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 动画循环
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

---

本文从Three.js的基础概念讲起，逐步深入3D交互网站的开发实战，涵盖了光照、纹理、模型加载、动画和性能优化等核心内容，通过实际案例，你可以掌握如何利用Three.js构建高性能的3D交互网站，随着WebGPU等新技术的发展，Three.js将继续引领Web 3D开发的潮流。

如果你对Three.js感兴趣，建议深入学习官方文档（https://threejs.org/）并尝试更多创意项目，祝你成为3D交互开发的高手！

• 喜欢（0）
• 不喜欢（0）