Three.js教程，3D网页开发

本文详细介绍了Three.js的基础知识、特性与实际应用，Three.js是一个强大的3D图形库，简化了复杂3D模型的创建、渲染和交互，文章从基本概念入手，逐步深入到光照、材质、相机等关键领域，并展示了Three.js在VR、AR等前沿领域的实践，通过案例分析和实例演示，读者可以快速掌握Three.js的使用技巧，实现沉浸式的3D网页体验。

随着互联网技术的快速发展，网页设计已经不再局限于传统的二维平面设计，为了给用户带来更加沉浸式的体验，越来越多的网站开始使用三维技术，而Three.js作为一款强大的JavaScript库,可以帮助开发者轻松地在网页上创建复杂的3D场景和模型。

本文将为大家详细介绍Three.js教程，包括其基础概念、常用对象、光照与材质、相机控制等核心内容，并通过实战案例指导读者如何运用Three.js进行3D网页开发。

Three.js基础

Three.js是一个基于WebGL的JavaScript库，它可以简化在浏览器中渲染三维图形的复杂过程，在使用Three.js之前，首先需要了解其基本架构，包括场景（Scene）、摄像机（Camera）和渲染器（Renderer）三个核心对象。

场景（Scene）

场景是Three.js中所有物体（包括对象、灯光等）的容器，在一个场景中，可以创建多个对象,并设置它们之间的层次关系。

const scene = new THREE.Scene();

摄像机（Camera）

摄像机用于观察场景中的物体，它有三个重要的属性：位置（position）、视角（angle）和上下文（context），在Three.js中，可以通过THREE.PerspectiveCamera类来创建一个摄像机对象。

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

渲染器（Renderer）

渲染器负责将场景和摄像机的状态转换为浏览器可以识别的图像，在Three.js中，可以使用THREE.WebGLRenderer类来创建一个渲染器对象。

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

常用对象与几何体

在Three.js中，可以使用多种几何体（Geometry）来创建物体的形状，常用的几何体包括球体（Sphere）、立方体（Cube）、圆柱体（Cylinder）等。

除了几何体，还可以创建材质（Material）来定义物体的外观，常用的材质包括PhongMaterial、MeshBasicMaterial等。

// 创建一个球体几何体
const geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建一个Phong材质
const material = new THREE.PhongMaterial({ color: 0x00ff00 });
// 创建一个网格对象并应用材质
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

光照与材质

为了使场景更加真实，我们需要添加光照（Light）来模拟现实世界中的光线效果，Three.js提供了多种光源类型，如点光源（PointLight）、方向光源（DirectionalLight）、聚光灯（SpotLight）等。

// 创建一个点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(2, 2, 2);
scene.add(pointLight);
// 创建一个材质并应用光照效果
const materialWithLight = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const sphereWithLight = new THREE.Mesh(geometry, materialWithLight);
scene.add(sphereWithLight);

相机控制与渲染循环

为了实现动态的3D场景，我们需要控制摄像机的移动和旋转，并实时更新渲染结果，这可以通过使用键盘事件（如箭头键）来实现相机的移动，以及使用requestAnimationFrame()函数来实现渲染循环。

function animate() {
    requestAnimationFrame(animate);
    // 更新相机位置
    camera.position.x += 0.01;
    camera.position.y += 0.01;
    // 更新渲染结果
    renderer.render(scene, camera);
}
animate();

实战案例

为了更好地理解Three.js的应用，下面通过一个简单的案例来展示如何使用Three.js创建一个旋转的立方体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">Three.js旋转立方体示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
    // 创建场景、摄像机、渲染器等对象
    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(1, 1, 1);
    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();
</script>
</body>
</html>

通过上述步骤，你可以在网页上实现一个简单的旋转立方体，随着对Three.js的学习不断深入，你将能够创造出更加复杂、逼真的3D场景和交互式应用。