简介：利用HTML5和Three.js库，本项目展示了如何制作3D方块和文字的空间旋转动画特效，实现交互功能。用户可以通过鼠标操作自定义文字标签，并支持英文字符和数字。介绍了项目结构，包括HTML的 <canvas> 元素使用、CSS样式设计、以及JavaScript中Three.js的具体应用，包括场景设置、相机配置、3D对象创建与动画实现。项目还涉及了光照的应用和连续动画的渲染技术，为开发者提供WebGL和Three.js应用的实践经验。
1. HTML5和Three.js基础
在现代Web开发中，将3D图形和交互式内容嵌入网页已成为可能，这部分得益于HTML5和WebGL的强大功能。本章将介绍HTML5与Three.js的基础知识，以及如何使用Three.js创建基本的3D场景。
HTML5的WebGL和Canvas
HTML5引入了 <canvas> 元素，为网页提供了一个绘图区域。通过结合WebGL（一种JavaScript API，允许在网页中渲染2D和3D图形），开发者可以在用户的浏览器中创建和显示3D图形。这一技术的发展让浏览器得以承载更加丰富的视觉体验，而无需额外插件。
Three.js简介
Three.js是一个轻量级的3D库，它抽象了WebGL复杂的API，提供简洁的语法来创建、管理和展示3D图形。Three.js的目的是让3D内容的创建和渲染更加容易，开发者无需深入了解底层图形编程，也能构建出令人印象深刻的3D场景。
建立第一个Three.js场景
要开始使用Three.js，首先需要在HTML页面中引入Three.js库。以下是一个简单的示例，展示如何创建一个带有旋转立方体的基础场景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js基础示例</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="***"></script>
<script>
// 创建场景
var scene = new THREE.Scene();
// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器并设置大小
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体和材质
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
// 将几何体添加到场景中
scene.add(cube);
// 设置相机位置
camera.position.z = 5;
// 创建旋转动画
var animate = function () {
requestAnimationFrame(animate);
// 旋转立方体
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景和相机
renderer.render(scene, camera);
};
// 开始动画循环
animate();
</script>
</body>
</html>
这个代码片段创建了一个简单的场景，其中包含一个旋转的绿色立方体。通过这段示例，我们可以看到Three.js如何通过封装WebGL的复杂性，简化了3D图形的创建和渲染过程。随着本章节的深入，我们将探索Three.js更多的功能和特性，以便构建更为复杂和交互式的3D场景。
2. 3D场景的搭建
2.1 场景的创建和基本设置
2.1.1 Three.js场景对象的使用方法
Three.js 的场景对象是展示 3D 对象的容器。创建一个 Three.js 的场景对象非常简单，只需几行代码即可。
// 创建场景对象
const scene = new THREE.Scene();
在 Three.js 中，场景对象可以看作是全局变量，所有的物体、相机、光源等都是场景的子对象。创建场景对象后，可以使用 scene.add() 方法将这些元素添加到场景中。场景对象也用于对整个场景进行操作，如设置场景背景、清除子对象等。
2.1.2 设置背景颜色和场景属性
场景的背景颜色可以通过设置 scene.background 属性来调整，这会影响渲染出的图像背景。
// 设置场景背景为黑色
scene.background = new THREE.Color('black');
Three.js 提供了多种方式来设置颜色，可以使用 RGB 值、十六进制值、颜色名称等。除背景颜色外，场景还有一系列属性可以设置，如雾效（fog），这可以给场景添加一层雾化效果，根据距离改变物体的颜色和透明度。
// 设置场景的雾效
const fog = new THREE.Fog('black', 5, 25);
scene.fog = fog;
雾效的具体表现取决于雾的类型和参数，Three.js 提供了 Fog 和 FogExp2 两种雾效类型。
2.2 渲染器的选择和配置
2.2.1 使用WebGL渲染器
在 Three.js 中，WebGL 渲染器是基于 WebGL API 的渲染器，它是最常用的渲染器，适用于大多数现代浏览器。要创建一个 WebGL 渲染器，可以使用以下代码：
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的DOM元素添加到HTML文档中
document.body.appendChild(renderer.domElement);
这段代码首先创建了一个 WebGL 渲染器实例，然后设置了渲染器的大小，并将它的 DOM 元素添加到 HTML 文档中，使得渲染器渲染的图像能够显示在网页上。
2.2.2 渲染器的参数配置
WebGL 渲染器还有一些其他可配置的参数，如抗锯齿等级、阴影映射的设置等。
// 设置抗锯齿参数
renderer.setPixelRatio(window.devicePixelRatio);
// 启用阴影
renderer.shadowMap.enabled = true;
setPixelRatio 方法用于设置渲染器在高分辨率设备上是否启用高 DPI 渲染。 shadowMap.enabled 属性用于开启阴影效果，使得场景中的阴影更加逼真。
渲染器的配置需要根据应用的具体需求和目标平台进行调整，以获得最佳的性能和视觉效果。
在本节中，我们深入探讨了 Three.js 在创建 3D 场景和渲染器配置中的基础知识。我们学习了如何创建场景，设置背景颜色，如何选择和配置 WebGL 渲染器，以及如何利用它的高级功能提升渲染效果。本节介绍的内容为构建一个基础的 3D 应用提供了必要的工具和理解，是构建更加复杂场景的基础。
在下一节中，我们将深入探讨相机的配置和视角控制，以及如何导入和配置 3D 对象，继续构建我们的 3D 世界。
3. 相机和3D对象设置
3.1 相机的配置与视角调整
3.1.1 选择合适的相机类型
在Three.js中，相机是负责捕获场景并通过渲染器展示给用户的窗口。选择合适的相机类型对于能否获得期望的3D效果至关重要。Three.js提供了多种相机类型，包括 PerspectiveCamera （透视相机）、 OrthographicCamera （正交相机）和 CubeCamera （立方体相机）等。
-
PerspectiveCamera是最常用的相机类型，它模拟了人眼观看物体的方式，具有近大远小的透视效果。这种相机类型特别适合创建真实感的3D场景。 -
OrthographicCamera不具有透视效果，所有物体无论距离远近都以相同大小显示。它通常用于2.5D效果或工程图纸等需要精确尺寸展示的场景。 -
CubeCamera常用于渲染环境映射（如反射和折射）的场景，它会从一个点渲染出六个面的立方体纹理。
通过代码示例，我们可以了解如何在Three.js中设置透视相机：
// 创建一个场景
const scene = new THREE.Scene();
// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 设置相机距离原点的深度
// 创建渲染器并添加到HTML文档中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
// 这里可以添加旋转等动画效果代码
// 渲染场景
renderer.render(scene, camera);
}
// 开始渲染循环
animate();
在上述代码中，我们首先创建了场景和透视相机，并设置了相机的视角、宽高比、近远平面距离以及相机的初始位置。接着创建了一个WebGL渲染器，并将渲染器的DOM元素添加到HTML文档的body中。最后，我们定义了一个 animate 函数来实现渲染循环，这个函数会递归调用自身，并在每次调用时执行渲染操作。
3.1.2 视角控制和相机位置设置
控制相机的视角是创建3D动画中的一个关键步骤。通过调整相机的位置、旋转角度、焦点等参数，我们可以获得不同的视角效果。对于透视相机而言，视角主要由两个参数控制：
-
fieldOfView（视野角度），决定了相机观察场景的范围，数值越大视野越宽广。 -
near和far（近远平面），限制了相机可观察的场景距离，仅在该范围内（near到far之间）的物体才会被渲染。
视角的控制代码示例如下：
// 设置相机的视野角度
camera.fovy = 75; // 垂直视野角度为75度
camera.aspect = window.innerWidth / window.innerHeight; // 水平视野角度根据窗口大小自动调整
// 设置相机可观察的距离范围
camera.near = 0.1;
camera.far = 1000;
// 设置相机在场景中的位置和朝向
camera.position.x = 10;
camera.position.y = 10;
camera.position.z = 10;
camera.lookAt(scene.position); // 相机朝向场景中心
在上述代码中，我们设置了相机的视野角度、宽高比和可观察的距离范围，并将相机移动到场景的特定位置，并使相机朝向场景的中心点。这样设置可以确保相机可以覆盖整个场景，同时避免因超出可观察范围而导致渲染错误。
相机位置的设置通常结合用户输入进行动态调整，比如响应键盘事件或鼠标移动事件来实现动态的视角变化，提供交互式的用户体验。
通过调整相机的不同参数，我们可以从多个角度观察到3D场景中的各种物体。相机设置不仅影响场景的视觉效果，还直接影响用户的交互体验和场景的动态表现。在实际开发中，相机的灵活运用是提升3D场景表现力的关键所在。
3.2 3D对象的导入和配置
3.2.1 导入3D模型资源
在Three.js中，导入3D模型资源可以通过多种方式实现。最常见的是使用如.glTF、.obj等格式的外部资源文件。glTF（GL Transmission Format）是一种开放标准的3D传输格式，它支持场景、模型、动画、材质等复杂3D内容的高效传输和加载。
Three.js内置了多种加载器，其中 GLTFLoader 专门用于加载glTF格式的文件。在使用该加载器之前，需要先通过npm或yarn安装 @three/gltf-loader 模块。
导入模型资源的代码示例如下：
// 导入Three.js和GLTFLoader
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 初始化场景和相机
// ...
// 创建加载器并指定模型文件路径
const loader = new GLTFLoader();
loader.load(
// 文件路径
'models/scene.gltf',
// 加载成功回调函数
function (gltf) {
scene.add(gltf.scene);
// 可以添加动画播放代码等
},
// 正在加载中回调函数
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
},
// 加载错误回调函数
function (error) {
console.error('An error happened', error);
}
);
// 渲染循环和其他代码
// ...
上述代码段展示了使用 GLTFLoader 加载一个glTF格式的模型文件，并将其添加到场景中的步骤。加载器在加载成功后会执行回调函数，并将加载的模型添加到场景中。此外，还可以在加载过程中使用进度回调函数显示加载进度，并在发生错误时进行错误处理。
3.2.2 设置3D对象的材质和纹理
3D模型导入后，可以通过设置材质来调整其表面属性，如颜色、反光度和透明度等。Three.js提供了多种材质类型，包括 MeshBasicMaterial 、 MeshLambertMaterial 、 MeshPhongMaterial 等，分别对应不同的渲染效果。
纹理是3D模型上的一张图片，可以提供额外的视觉细节。通过将纹理应用到模型上，可以增强模型的真实感，提高视觉效果。
设置材质和纹理的代码示例如下：
// 创建一个基本材质
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00, // 绿色
wireframe: true // 网格线材质
});
// 创建一个带有纹理的Phong材质
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('textures/wood.jpg');
const phongMaterial = new THREE.MeshPhongMaterial({
map: texture, // 应用纹理
color: 0xffffff, // 白色
specular: 0x444444, // 反光度
shininess: 30 // 反光亮度
});
// 应用材质到模型
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), phongMaterial);
// 将模型添加到场景
scene.add(cube, sphere);
在上述代码中，我们首先创建了一个基础材质，并将其应用到一个立方体模型上，同时设置为网格线模式以便更清楚地看到模型结构。接着，我们使用 TextureLoader 加载了一张木材纹理图片，并创建了一个带有纹理的 MeshPhongMaterial 材质，然后将此材质应用到了一个球体模型上。通过调整材质参数，我们能够对模型的外观进行个性化定制，以达到预期的视觉效果。
在实际开发过程中，材质和纹理的设置需要根据模型特点和场景需求来细致调整。例如，反光度和反光亮度的设置将直接影响模型的光泽感，透明度则关系到模型是否需要显示内部结构等。材质和纹理的合理运用，能够极大提升3D场景的真实感和观赏性。
模型的导入和材质纹理的设置是构建高质量3D场景的基础。通过结合相机设置、视角控制和3D对象配置，我们可以构建出富有层次感和真实感的虚拟世界。在接下来的章节中，我们将进一步探讨如何利用Three.js实现旋转动画、用户交互以及光照效果，来进一步提升3D场景的动态表现和交互体验。
4. 3D旋转动画的实现
4.1 创建旋转动画的基本框架
理解动画循环的原理
在Three.js中创建3D旋转动画首先需要理解动画循环的概念。动画循环是程序中一个持续执行的过程，它不断地计算场景更新，使3D对象能够表现出连续的运动。为了实现动画循环，Three.js提供了一个渲染器的渲染方法 render ，结合 requestAnimationFrame 来保证动画的流畅性。 requestAnimationFrame 是一个浏览器提供的方法，它会在浏览器重绘之前调用指定的函数，使得动画能够在正确的时间间隔内渲染，提高性能。
代码示例：
function animate() {
requestAnimationFrame(animate); // 使动画函数能够在下一帧继续执行
// 更新场景中的动画效果，例如旋转角度
object.rotation.x += 0.01;
object.rotation.y += 0.01;
renderer.render(scene, camera); // 渲染场景和相机
}
animate(); // 启动动画循环
参数解释： object.rotation.x 和 object.rotation.y 是控制3D对象绕x轴和y轴旋转的属性，分别增加的0.01是旋转的增量。
逻辑分析：上述代码通过递归调用 animate 函数创建了一个动画循环。在每次循环中，更新了3D对象的旋转角度，并调用渲染器的 render 方法来将更新后的场景渲染到HTML页面上。
设置动画循环的时间和条件
动画循环的时间和条件对于动画的质量至关重要。Three.js允许我们通过 .Clock 对象来跟踪时间，并且可以利用它来设置动画的速度和控制时间依赖的行为。例如，你可以使用它来确保动画在不同的帧率下以相同的速率运行，从而避免快慢不一的问题。
代码示例：
var clock = new THREE.Clock(); // 创建时钟对象
var time = 0; // 初始化时间变量
function animate() {
requestAnimationFrame(animate);
var delta = clock.getDelta(); // 获取前一帧的时间间隔
time += delta; // 更新时间变量
// 根据时间变量来计算旋转角度，使得动画速率独立于帧率
object.rotation.x = Math.sin(time * 0.5) * 0.5;
object.rotation.y = Math.cos(time * 0.5) * 0.5;
renderer.render(scene, camera);
}
animate();
参数解释： THREE.Clock() 实例用于测量时间间隔。 getDelta() 方法返回的是自上一次调用 getDelta() 以来的秒数。这允许我们创建与帧率无关的动画，即使在帧率波动的情况下也能保持平滑。
逻辑分析：在每次动画循环中，我们通过 THREE.Clock 对象来获取时间增量，再根据时间来计算对象的旋转角度。通过这种方式，我们能够创建出一个既平滑又与具体帧率无关的旋转动画效果。
4.2 旋转动画的细节控制
控制3D对象的旋转速度和方向
要实现平滑的旋转效果，我们需要对旋转速度和方向进行精确的控制。这通常通过设置3D对象的 rotation 属性来实现。旋转速度可以视为一个单位时间内旋转的角度，而方向则是围绕对象的哪个轴旋转。
代码示例：
// 设置旋转速度
var rotationSpeed = 0.01; // 每帧旋转的角度
function animate() {
requestAnimationFrame(animate);
// 控制旋转速度
object.rotation.x += rotationSpeed;
object.rotation.y += rotationSpeed;
renderer.render(scene, camera);
}
animate();
参数解释： rotationSpeed 变量定义了对象每帧旋转的角度大小。通过改变这个值，可以控制对象的旋转速度。
逻辑分析：上述代码块中，我们为3D对象的x轴和y轴设置了一个旋转速度，该速度在每次动画循环时加到对象当前的旋转角度上，从而实现平滑旋转。
实现复杂旋转效果的数学基础
对于更加复杂的旋转效果，我们需要用到线性代数中的旋转矩阵和四元数等数学概念。旋转矩阵可以帮助我们在三维空间中实现精确的旋转。而四元数是一种避免万向锁（Gimbal Lock）问题的高效计算方式。
代码示例：
// 使用四元数创建一个围绕Z轴旋转的效果
var quaternion = new THREE.Quaternion();
quaternion.setFromEuler(new THREE.Euler(0, 0, Math.PI / 4, 'ZYX'));
function animate() {
requestAnimationFrame(animate);
// 应用四元数旋转
object.quaternion.copy(quaternion);
renderer.render(scene, camera);
}
animate();
参数解释： new THREE.Quaternion() 用于创建一个四元数对象， setFromEuler 方法接受一个欧拉角对象来计算相应的四元数。欧拉角由绕Z轴、Y轴、X轴的旋转角度组成，本例中分别为0、0和π/4弧度。
逻辑分析：通过使用四元数，我们避免了在使用欧拉角时可能发生的万向锁问题，并且能够实现更加精确和稳定的旋转动画。在上述代码中，我们将四元数应用到3D对象的 quaternion 属性上，这样对象在渲染时就会围绕Z轴旋转，角度为π/4弧度。
5. 鼠标交互功能与自定义文字标签
5.1 鼠标交互功能的实现
在3D场景中引入鼠标交互功能能够极大地提升用户体验，使用户能够通过鼠标操作来探索和与场景中的对象进行互动。在Three.js中，鼠标事件可以用来控制相机视角、选择对象、触发特定动作等。
5.1.1 捕获和处理鼠标事件
首先，我们需要在场景中设置监听器来捕获鼠标事件。这通常包括 mousemove 、 mousedown 、 mouseup 、 click 等事件。下面是一个设置鼠标事件监听器的示例代码：
// 创建渲染器对象并添加到HTML文档
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
// 监听鼠标移动事件
renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
let mouseX = 0;
let mouseY = 0;
function onDocumentMouseMove(event) {
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
}
// 渲染场景的动画循环中使用鼠标位置数据
function animate() {
requestAnimationFrame(animate);
// 更新场景逻辑...
renderer.render(scene, camera);
}
animate();
在上面的代码中，我们监听了鼠标移动事件，并将鼠标的屏幕坐标转换为Three.js使用的标准化设备坐标。这些坐标随后可以在动画循环中使用，以根据鼠标的移动来改变相机的位置或视角。
5.1.2 结合鼠标交互实现用户反馈
为了提供用户反馈，我们可以在3D对象上实现高亮显示效果或者在用户与对象交互时触发特定的动作。下面的代码段演示了如何根据鼠标的位置高亮显示场景中的一个对象：
let INTERSECTED;
// 创建一个射线检测器用于检测鼠标指向的对象
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// 更新函数，更新鼠标位置和射线检测器
function update() {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// 指向鼠标位置发射射线
raycaster.setFromCamera(mouse, camera);
// 计算射线与场景中对象的交点
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
INTERSECTED = intersects[0].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex(0x222222);
}
} else {
if (INTERSECTED) INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
INTERSECTED = null;
}
}
通过检测鼠标位置和场景对象之间的交集，并根据检测结果改变交集对象的材质属性，我们可以在用户将鼠标悬停在对象上时提供视觉反馈。
5.2 自定义文字标签的添加和样式设置
在3D场景中添加文本标签是向用户提供额外信息的有效方式。Three.js 提供了 TextGeometry 类来创建3D文字。
5.2.1 创建和定位文字标签
要创建文字标签，我们需要定义文字的字体、大小、高度和曲线细分等参数。然后我们可以创建一个 TextGeometry 对象并将其添加到场景中。下面的示例代码展示了如何添加一个简单的文字标签：
const loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
const geometry = new THREE.TextGeometry('Hello, Three.js!', {
font: font,
size: 1,
height: 0.1,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.03,
bevelSize: 0.02,
bevelSegments: 5
});
const material = new THREE.MeshBasicMaterial({ color: 0x0095DD });
const text = new THREE.Mesh(geometry, material);
text.position.set(0, 0.5, 0); // 调整标签位置
scene.add(text);
});
在这个例子中，我们首先加载了一个字体文件，然后使用这个字体创建了一个 TextGeometry 对象。之后，我们通过设置材质属性和位置来添加文字到场景中。
5.2.2 文字标签的样式和动画效果
文字标签可以被赋予不同的样式，并且可以通过动画来增强表现力。例如，我们可以使用 MeshBasicMaterial 来设置文字的颜色，或者使用 MeshPhongMaterial 来增加光照和反光效果。同时，我们也可以给文字添加一些动画效果，比如放大缩小、旋转等。
// 设置文字标签的材质为Phong材料以支持光照效果
const material = new THREE.MeshPhongMaterial({ color: 0x0095DD, specular: 0x111111, shininess: 200 });
// 创建标签
const text = new THREE.Mesh(geometry, material);
// 动画效果：使标签根据时间放大缩小
function animateText() {
text.scale.x = text.scale.y = Math.sin(Date.now() * 0.002) * 0.5 + 1;
text.rotation.x += 0.01;
text.rotation.y += 0.01;
}
// 在动画循环中调用animateText函数
function animate() {
requestAnimationFrame(animate);
animateText();
renderer.render(scene, camera);
}
animate();
通过上述代码，我们可以使文字标签随时间的变化进行周期性的放大缩小运动，并且使其旋转，从而增加视觉的动态效果。
下一章节，我们将深入探讨光照效果的应用，以使3D场景更加真实和引人入胜。
简介：利用HTML5和Three.js库，本项目展示了如何制作3D方块和文字的空间旋转动画特效，实现交互功能。用户可以通过鼠标操作自定义文字标签，并支持英文字符和数字。介绍了项目结构，包括HTML的 <canvas> 元素使用、CSS样式设计、以及JavaScript中Three.js的具体应用，包括场景设置、相机配置、3D对象创建与动画实现。项目还涉及了光照的应用和连续动画的渲染技术，为开发者提供WebGL和Three.js应用的实践经验。
扫一扫
5207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
