Three.js 3D网页开发，从入门到项目实战

Three.js 是一个流行的 JavaScript 库，用于创建和显示三维动画和可视化，本文将从基础到高级，涵盖 Three.js 的关键概念，如场景、相机、渲染器、几何体、材质和灯光，通过理论和实践项目，读者将掌握如何使用 Three.js 轻松创建互动式 3D 体验，文章还将探讨优化技巧，以提升性能并确保良好的用户体验，无论您是初学者还是希望提升技能的开发者，本教程都旨在提供全面的指导和支持，帮助您快速掌握 Three.js 并实现出色的 3D 网页设计。

随着Web技术的不断发展，三维图形在网页上的表现变得越来越重要，Three.js作为一款强大的JavaScript库，为Web开发者提供了一个简单而高效的3D图形解决方案，本文将从基础知识讲起，逐步深入到项目实战，带领读者掌握Three.js 3D网页开发的技能。

Three.js基础

1 初始化场景

在Three.js中，首先需要创建一个场景（Scene）,它是所有3D对象的总容器。

const scene = new THREE.Scene();

2 创建相机

相机（Camera）用于观察场景中的3D对象，常见的相机类型有透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

3 创建渲染器

渲染器（Renderer）负责将场景渲染到屏幕上,需要创建一个HTML元素作为渲染器的画布。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

三维对象的创建

1 立方体（Box）

立方体是Three.js中最简单的3D对象之一。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

2 圆柱体（Cylinder）

圆柱体可以看作是两个平行的圆形底面和一个侧面组成的立体。

const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 32);
const cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
scene.add(cylinder);

灯光和阴影

灯光（Light）是赋予3D对象生命力的关键，Three.js提供了多种类型的灯光，如方向光（DirectionalLight）、点光源（PointLight）和聚光灯（SpotLight）。

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 3, 5);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

动画和交互

1 动画控制器

通过使用动画控制器（Animator）,可以实现3D对象的平滑运动。

const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clipPath);
action.play();
function animate() {
    requestAnimationFrame(animate);
    mixer.update(0.01);
    renderer.render(scene, camera);
}
animate();

2 交互设备

通过监听用户的交互事件，如鼠标点击、键盘输入等,可以实时响应用户的操作。

window.addEventListener('click', (event) => {
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('Clicked on:', intersects[0].object);
    }
});

项目实战：构建一个简单的3D场景

1 创建一个旋转立方体

我们创建一个旋转的立方体。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const cubeMesh = cube.children[0];
function animate() {
    requestAnimationFrame(animate);
    cubeMesh.rotation.x += 0.01;
    cubeMesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

2 添加灯光和背景

我们添加一些灯光,并创建一个简单的背景。

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(3, 3, 3);
scene.add(directionalLight);
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const backgroundGeometry = new THREE.PlaneGeometry(10, 10);
const backgroundMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
scene.add(backgroundMesh);

3 实现用户交互

我们添加一些用户交互功能,如点击立方体时打印其信息。

window.addEventListener('click', (event) => {
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        console.log('Clicked on:', intersects[0].object);
    }
});

通过本文的学习，相信读者已经掌握了Three.js 3D网页开发的基本技能，通过不断的实践和探索，读者可以进一步深入研究Three.js的更多高级特性，构建更加复杂和逼真的3D网页应用，拿起你的键盘和鼠标,开始你的3D网页开发之旅吧！