9.2常见项目类型

9.2常见项目类型

Three.js 项目实践与案例分析：常见项目类型详解

9.2 常见项目类型

以下是一些常见的 Three.js 项目类型：

• 9.2.1 3D 模型展示与交互: 加载、展示和交互操作 3D 模型。

• 9.2.2 虚拟现实 (VR) 与增强现实 (AR): 构建 VR 和 AR 应用。

• 9.2.3 数据可视化: 使用 3D 图形呈现数据。

• 9.2.4 游戏开发: 创建简单的 3D 游戏。

• 9.2.5 艺术创作与生成艺术: 使用 Three.js 进行艺术创作。

下面将分别详细介绍这些项目类型，并提供代码示例。

9.2.1 3D 模型展示与交互

3D 模型展示是 Three.js 最常见的应用之一。它涉及加载各种 3D 模型格式（如 glTF、OBJ、FBX），并在场景中展示它们。 交互操作包括旋转、缩放、平移模型，以及添加动画等。

代码实践 (glTF 模型加载与旋转)

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 创建场景、相机和渲染器
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 ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
// 添加平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 加载 glTF 模型
const loader = new GLTFLoader();
let model;
loader.load( 'path/to/your/model.gltf', function ( gltf ) {
    model = gltf.scene;
    scene.add( model );
    // 设置相机位置
    camera.position.z = 5;
}, undefined, function ( error ) {
    console.error( error );
} );
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    // 旋转模型
    if (model) {
        model.rotation.x += 0.01;
        model.rotation.y += 0.01;
    }
    renderer.render(scene, camera);
}
animate();
​

内容详解:

• 引入 Three.js 和 GLTFLoader: 首先，需要引入 Three.js 库和 GLTFLoader，用于加载 glTF 模型。

• 创建场景、相机和渲染器: 这是 Three.js 应用的基础，用于构建 3D 环境。

• 添加光照: 光照对于 3D 场景的视觉效果至关重要。这里添加了环境光和平行光。

• 加载 glTF 模型: 使用 GLTFLoader 加载 glTF 模型。loader.load() 方法接受模型路径、加载成功回调、加载进度回调和加载失败回调。

• 动画循环: animate() 函数负责每一帧的渲染。 在这个例子中，它旋转了加载的模型。

• requestAnimationFrame(): 用于创建平滑的动画循环。

mermaid 图示:

9.2.2 虚拟现实 (VR) 与增强现实 (AR)

Three.js 可以与 WebXR API 结合，构建 VR 和 AR 应用。 VR 应用将用户沉浸在虚拟环境中，而 AR 应用将虚拟对象叠加到现实世界中。

代码实践 (简单的 VR 场景)

import * as THREE from 'three';
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10);
camera.position.set( 0, 1.6, 3 );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true; // 启用 WebXR
document.body.appendChild( renderer.domElement );
document.body.appendChild( VRButton.createButton( renderer ) ); // 添加 VRButton
// 创建立方体
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 );
// 动画循环
renderer.setAnimationLoop( function () {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.02;
    renderer.render( scene, camera );
} );
​

内容详解:

• 引入 Three.js 和 VRButton: 需要引入 Three.js 和 VRButton，VRButton 用于在页面上创建一个按钮，以便用户进入 VR 模式。

• 启用 WebXR: renderer.xr.enabled = true; 启用 WebXR 功能。

• 添加 VRButton: VRButton.createButton(renderer) 创建一个 VRButton 并添加到页面。

• renderer.setAnimationLoop(): 使用 renderer.setAnimationLoop() 来启动动画循环。 当用户进入 VR 模式时，此循环将自动运行。

mermaid 图示:

9.2.3 数据可视化

Three.js 可以用于创建各种 3D 数据可视化图表，例如散点图、柱状图、曲面图等。 通过 3D 呈现数据，可以更清晰地展示数据的结构和关系。

代码实践 (简单的 3D 柱状图)

import * as THREE from 'three';
// 创建场景、相机和渲染器
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);
camera.position.z = 5;
// 数据
const data = [1, 2, 3, 4, 5];
// 创建柱状图
const barWidth = 0.5;
const barSpacing = 0.2;
for (let i = 0; i < data.length; i++) {
    const height = data[i];
    const geometry = new THREE.BoxGeometry(barWidth, height, barWidth);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const bar = new THREE.Mesh(geometry, material);
    // 设置柱状图位置
    bar.position.x = (i - data.length / 2) * (barWidth + barSpacing);
    bar.position.y = height / 2; // 将柱状图底部放置在 y=0
    scene.add(bar);
}
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
​

内容详解:

• 数据准备: 首先需要准备要可视化的数据。

• 创建柱状图: 根据数据创建柱状图。 每个柱状图都是一个 THREE.BoxGeometry 对象。

• 设置柱状图位置: 根据数据和柱状图间距设置每个柱状图的位置。

mermaid 图示:

9.2.4 游戏开发

Three.js 可以用于创建简单的 3D 游戏。虽然 Three.js 本身不是一个游戏引擎，但它可以提供 3D 渲染和基本的交互功能。

代码实践 (简单的 3D 躲避游戏)

import * as THREE from 'three';
// 创建场景、相机和渲染器
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);
camera.position.z = 5;
// 创建玩家
const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
const playerMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const player = new THREE.Mesh(playerGeometry, playerMaterial);
scene.add(player);
// 创建障碍物
const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
const obstacleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
obstacle.position.z = -10;
scene.add(obstacle);
// 玩家移动速度
const playerSpeed = 0.1;
// 障碍物移动速度
const obstacleSpeed = 0.05;
// 键盘控制
document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft') {
        player.position.x -= playerSpeed;
    } else if (event.key === 'ArrowRight') {
        player.position.x += playerSpeed;
    }
});
// 游戏循环
function animate() {
    requestAnimationFrame(animate);
    // 移动障碍物
    obstacle.position.z += obstacleSpeed;
    // 重置障碍物位置
    if (obstacle.position.z > 5) {
        obstacle.position.z = -10;
        obstacle.position.x = (Math.random() - 0.5) * 10; // 随机水平位置
    }
    // 碰撞检测
    if (player.position.distanceTo(obstacle.position) < 1) {
        alert('Game Over!');
    }
    renderer.render(scene, camera);
}
animate();
​

内容详解:

• 创建玩家和障碍物: 使用 THREE.BoxGeometry 和 THREE.MeshBasicMaterial 创建玩家和障碍物。

• 键盘控制: 使用 document.addEventListener('keydown', ...) 监听键盘事件，控制玩家移动。

• 移动障碍物: 在动画循环中，不断移动障碍物。

• 碰撞检测: 使用 player.position.distanceTo(obstacle.position) < 1 检测玩家和障碍物是否发生碰撞。

mermaid 图示:

9.2.5 艺术创作与生成艺术

Three.js 可以用于创建各种 3D 艺术作品和生成艺术。 艺术家可以使用 Three.js 创建复杂的几何形状、纹理和动画，从而创作出独特的视觉效果。

代码实践 (简单的粒子系统)

import * as THREE from 'three';
// 创建场景、相机和渲染器
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);
camera.position.z = 5;
// 创建粒子几何体
const particleCount = 1000;
const particlesGeometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3); // 每个粒子 3 个坐标 (x, y, z)
for (let i = 0; i < particleCount; i++) {
    positions[i * 3] = (Math.random() - 0.5) * 10; // x
    positions[i * 3 + 1] = (Math.random() - 0.5) * 10; // y
    positions[i * 3 + 2] = (Math.random() - 0.5) * 10; // z
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
// 创建粒子材质
const particleMaterial = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 0.1
});
// 创建粒子系统
const particles = new THREE.Points(particlesGeometry, particleMaterial);
scene.add(particles);
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    // 旋转粒子系统
    particles.rotation.x += 0.001;
    particles.rotation.y += 0.002;
    renderer.render(scene, camera);
}
animate();
​

内容详解:

• 创建粒子几何体: 使用 THREE.BufferGeometry 创建粒子几何体。 THREE.BufferGeometry 可以高效地存储大量顶点数据。

• 创建粒子材质: 使用 THREE.PointsMaterial 创建粒子材质。

• 创建粒子系统: 使用 THREE.Points 将几何体和材质组合成粒子系统。

mermaid 图示:

总结

本文介绍了 Five.js 的五种常见项目类型，并提供了相应的代码实践和内容详解。 希望这些示例能够帮助你更好地理解 Three.js 的应用，并激发你的创作灵感。 Three.js 的功能非常强大，可以用于创建各种各样的 3D 应用。 通过不断学习和实践，你一定能够掌握 Three.js，并创造出令人惊艳的 3D 作品。