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

Three.js 是一款强大的 3D Web 库，让开发者轻松创建沉浸式 3D Web 应用程序，从基础入门到项目实战，我们逐步探索 Three.js 的关键特性和功能，包括场景设置、相机控制、光照添加、材质使用及动画制作，深入理解这些概念后，通过实践项目不断提升技能，最终能够创建出功能丰富、交互性强的 3D 体验。

随着Web技术的不断发展,3D图形在网页上的展示越来越受到欢迎，Three.js作为一款流行的JavaScript 3D库，为开发者提供了强大的工具，让他们能够轻松地创建出绚丽的3D场景，本文将从基础入门到项目实战，带您领略Three.js 3D网页开发的魅力。

入门篇： Three.js基础

在开始编写3D代码之前,我们需要了解Three.js的基本概念，Three.js是一个基于WebGL的JavaScript库，它提供了一种简单、直观的方式来创建和显示3D图形。

需要在HTML文件中引入Three.js库，您可以通过CDN链接直接引入，也可以将库文件下载到本地。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

我们将创建一个简单的场景、相机和渲染器，并将它们添加到页面中。

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(75, 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);

进阶篇： Three.js高级功能

在掌握了基本操作后,我们可以进一步学习Three.js的高级功能，例如灯光、材质、阴影等。

灯光

灯光是赋予3D对象生命力的关键元素,在Three.js中，有多种类型的灯光可供选择，如环境光、点光源、方向光源等。

// 创建点光源
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(2, 2, 2);
scene.add(pointLight);

材质

材质决定了3D对象的表面属性,如颜色、纹理等，Three.js提供了多种内置材质，也可以自定义材质。

// 创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建一个网格对象，并应用材质
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

阴影

阴影可以让场景更加真实,在Three.js中，可以通过设置光源的属性来控制阴影的生成。

// 开启点光源的阴影
pointLight.castShadow = true;
// 设置阴影属性
pointLight.shadow.camera.left = -5;
pointLight.shadow.camera.right = 5;
pointLight.shadow.camera.top = 5;
pointLight.shadow.camera.bottom = -5;
pointLight.shadow.camera.near = 1;
pointLight.shadow.camera.far = 10;
pointLight.shadow.mapSize.width = 512;
pointLight.shadow.mapSize.height = 512;