Three.js 快速入门构建你的第一个 3D 应用

news2024/11/24 17:48:54

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙
技术栈：JavaScript、React、Three.js、WebGL、Go
经验经验：6年+ 前端开发经验，专注于图形渲染和AI技术
开源项目：github 晓智元宇宙、数字孪生引擎、前端面试题
大家好！我是 [晓智]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！

在这里插入图片描述

随着网页和应用对视觉效果要求的提高，3D 图形在前端开发中的应用越来越普遍。Three.js 是一种用于在浏览器中构建 3D 图形的 JavaScript 库，它封装了 WebGL，简化了 3D 图形的创建流程。本文将带你快速入门 Three.js，从基本概念到实现一个简单的 3D 场景。

什么是 Three.js？

Three.js 是一个用于在浏览器中创建和渲染 3D 图形的 JavaScript 库。它建立在 WebGL 之上，提供了更易于理解和操作的 API，大大降低了创建复杂 3D 应用的难度。

Three.js 的主要功能：

3D 模型：创建、导入和操作复杂的 3D 模型。
灯光和阴影：支持多种灯光类型和复杂的阴影效果。
材质和纹理：允许应用多种材质和纹理，为场景增加真实感。
相机控制：轻松设置和操控 3D 场景中的相机视角。
动画：支持对象动画，创建流畅的 3D 过渡效果。

构建你的第一个 Three.js 3D 场景

接下来，我们将使用 Three.js 创建一个简单的 3D 场景，包括一个旋转的立方体、一个光源和一个相机。

步骤 1：引入 Three.js

可以通过 CDN 直接引入 Three.js，也可以使用 npm 安装。

通过 CDN 引入：

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

通过 npm 安装：

npm install three

步骤 2：创建基本的 Three.js 场景

在 HTML 文件中创建一个，用于显示 3D 内容。然后在 JavaScript 文件中初始化场景。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js 入门</title>
  </head>
  <body>
    <canvas id="webgl-canvas"></canvas>
    <script src="app.js"></script>
  </body>
</html>

步骤 3：初始化场景、相机和渲染器

在 app.js 文件中编写代码，创建基本的场景、相机和渲染器。

import * as THREE from 'three';

const canvas = document.getElementById('webgl-canvas');
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({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

步骤 4：添加立方体

接下来，我们将创建一个立方体，并为其添加基础材质和颜色。

// 创建几何体
const geometry = new THREE.BoxGeometry();
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建立方体网格
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

步骤 5：添加灯光

我们添加一个点光源，提升场景的光照效果。

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

步骤 6：渲染循环

最后，创建一个渲染循环，让立方体在场景中旋转起来。

function animate() {
  requestAnimationFrame(animate);

  // 让立方体旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

完整代码

将以上代码整合，形成一个完整的 3D 场景应用。

import * as THREE from 'three';

// 初始化场景
const canvas = document.getElementById("webgl-canvas");
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({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);

// 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加灯光
const light = new THREE.PointLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

// 动画循环
function animate() {
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();