引言

在数字化时代，3D网页动画与游戏已经成为网页设计的新宠。Three.js，作为一款强大的JavaScript库，让我们能够在网页上轻松实现3D效果。本文将从零开始，带你一步步掌握Three.js，让你轻松打造属于自己的3D网页动画与游戏。

第一章：Three.js简介

1.1 什么是Three.js？

Three.js是一个基于WebGL的JavaScript库，它提供了丰富的API，让我们能够轻松地在网页上创建和显示3D图形。

1.2 Three.js的优势

  • 简单易用：Three.js的API设计简洁，易于上手。
  • 跨平台：Three.js可以在任何支持WebGL的浏览器上运行。
  • 丰富的功能：Three.js支持3D模型加载、动画、光照、阴影等多种功能。

第二章：Three.js环境搭建

2.1 安装Three.js

首先，我们需要下载Three.js库。可以从Three.js官网下载最新版本的库。

2.2 创建HTML文件

创建一个HTML文件，并在其中引入Three.js库。

<!DOCTYPE html>
<html>
<head>
    <title>Three.js入门</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Three.js代码
    </script>
</body>
</html>

第三章：Three.js基础

3.1 场景（Scene）

场景是3D世界的容器，所有的物体、光线等都在场景中。

var scene = new THREE.Scene();

3.2 相机（Camera）

相机用于捕捉场景中的物体。

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

3.3 渲染器（Renderer）

渲染器用于将场景渲染到网页上。

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

3.4 物体（Mesh）

物体是场景中的基本元素，例如立方体、球体等。

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

3.5 动画

使用requestAnimationFrame函数实现动画效果。

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

第四章：3D模型加载与显示

4.1 GLTFLoader

GLTFLoader是Three.js的一个加载器，用于加载GLTF格式的3D模型。

var loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function (gltf) {
    scene.add(gltf.scene);
    renderer.render(scene, camera);
});

4.2 其他加载器

Three.js还支持其他多种格式的3D模型加载器，如OBJ、FBX等。

第五章：光照与阴影

5.1 光源（Light）

光源是场景中的光源，例如点光源、聚光灯等。

var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);

5.2 阴影

Three.js支持阴影效果，可以通过设置renderer.shadowMap.enabled属性来启用阴影。

renderer.shadowMap.enabled = true;

第六章：实战案例

6.1 3D网页动画

通过Three.js，我们可以轻松实现3D网页动画，例如旋转、缩放、平移等效果。

6.2 3D网页游戏

利用Three.js，我们可以开发出丰富的3D网页游戏，如角色扮演、射击等。

结语

通过本文的学习，相信你已经对Three.js有了初步的了解。接下来，你可以通过实际操作来提高自己的技能。祝你学习愉快！