电子 公司 网站建设企业站seo

简介

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它为开发者提供了一系列易于使用的 API，让开发者能够在网页上轻松创建和展示复杂的 3D 场景、动画和交互效果，而无需深入了解 WebGL 的底层细节。下面将从其特点、应用场景和基本原理等方面详细介绍 Three.js。

特点

• 简单易用：Three.js 对 WebGL 复杂的底层操作进行了封装，提供了直观且易于理解的 API，降低了开发 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);
camera.position.z = 5;// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 渲染循环
function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}
animate();

• 功能强大：Three.js 支持多种几何体（如立方体、球体、平面等）、材质（如基础材质、标准材质、纹理材质等）、光照（如环境光、平行光、点光源等）、动画（如关键帧动画、Tween 动画等）以及模型加载（如 GLTF、OBJ 等格式）。
• 跨平台兼容：由于基于 WebGL 技术，Three.js 可以在支持 WebGL 的现代浏览器（如 Chrome、Firefox、Safari 等）中运行，无需额外的插件。

应用场景

• 游戏开发：可以利用 Three.js 创建各种类型的网页游戏，如角色扮演游戏、射击游戏、益智游戏等。通过创建 3D 场景、角色和道具，以及实现动画和交互效果，为玩家带来沉浸式的游戏体验。
• 数据可视化：将数据以 3D 形式展示，使数据更加直观和易于理解。例如，展示地理信息、科学数据、商业数据等。
• 虚拟现实（VR）和增强现实（AR）：结合 VR 和 AR 设备，Three.js 可以创建沉浸式的虚拟和增强现实体验。例如，在网页上实现 3D 虚拟展厅、AR 购物等应用。
• 建筑和室内设计：创建 3D 建筑模型和室内场景，让客户能够提前预览设计效果，进行交互式的漫游和体验。

基本原理

Three.js 的核心是场景（Scene）、相机（Camera）和渲染器（Renderer）。

• 场景（Scene）：是所有 3D 对象的容器，就像一个舞台，所有的物体、灯光等都将放置在这个舞台上。
• 相机（Camera）：决定了我们从哪个角度观察场景。Three.js 提供了多种类型的相机，如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机模拟了人眼的视觉效果，有近大远小的特点；正交相机则没有透视效果，物体的大小不会随距离变化。通过new THREE.PerspectiveCamera()创建透视相机。
• 渲染器（Renderer）：负责将场景和相机的内容渲染到网页上的画布中。Three.js 提供了多种渲染器，如 WebGL 渲染器（WebGLRenderer）和 CSS3D 渲染器（CSS3DRenderer）。通过new THREE.WebGLRenderer()创建 WebGL 渲染器。

通过组合场景、相机和渲染器，以及添加各种几何体、材质、光照和动画，就可以创建出丰富多彩的 3D 网页应用。

1. 基础设置与初始化

1.1 场景（THREE.Scene）

场景是 Three.js 中所有对象的容器，就像一个舞台，所有的物体、灯光等都将放置在这个舞台上。

import * as THREE from 'three';
const scene = new THREE.Scene();

这样创建一个场景并导出供其他模块使用。

1.2 相机（THREE.PerspectiveCamera）

相机决定了我们从哪个角度观察场景。PerspectiveCamera是透视相机，它模拟了人眼的视觉效果，有近大远小的特点。

// 主相机
const camera = new THREE.PerspectiveCamera(45, // 视角大小window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面1000 // 远裁剪面
);
camera.position.set(0, 0, 5); // 设置相机位置

封装创建相机的函数：

const defaultOptions = {fov: 45,aspect: window.innerWidth / window.innerHeight,near: 0.1,far: 1000,position: [0, 0, 5]
};const createCamera = (options = {}) => {const cameraOpts = Object.assign(defaultOptions, options);const camera = new THREE.PerspectiveCamera(...Object.values(cameraOpts));camera.position.set(...cameraOpts.position);return camera;
};export default createCamera;

1.3 渲染器（THREE.WebGLRenderer）

渲染器负责将场景和相机的内容渲染到网页上的画布中。

class Renderer extends THREE.WebGLRenderer {constructor(scene, camera) {super({ antialias: true }); // 开启抗锯齿this.scene = scene;this.camera = camera;this.init();}init() {this.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小document.body.appendChild(this.domElement); // 将渲染器的DOM元素添加到页面中this.render(this.scene, this.camera); // 渲染场景}// 创建动画函数animation(cb) {if (typeof cb!== 'function') {console.error('animation callback必须是一个函数');return;}this.setAnimationLoop(cb); // 设置动画循环}
}export default Renderer;

2. 几何体与网格

2.1 几何体（THREE.BoxGeometry、THREE.PlaneGeometry等）

几何体定义了物体的形状，例如立方体、平面、球体等。

// 创建立方体几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);// 创建平面几何体
const planeGeometry = new THREE.PlaneGeometry(30, 30);

2.2 材质（THREE.MeshBasicMaterial、THREE.MeshStandardMaterial等）

材质决定了物体的外观，如颜色、光泽等。

// 基础网格材质，不受光照影响
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });// 标准网格材质，受光照影响
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });

不同材质的使用：

let material;
switch (val) {case 'basic':  // 基础网格材质（不受光照影响）material = new THREE.MeshBasicMaterial({color: materialParam.color,wireframe: materialParam.wireframe});break;case 'normal':  // 法向可视化材质material = new THREE.MeshNormalMaterial();break;case 'lambert':  // Lambert漫反射材质（适合哑光表面）material = new THREE.MeshLambertMaterial({color: materialParam.color});break;case 'phong':  // Phong高光材质（适合光滑表面）material = new THREE.MeshPhongMaterial({color: materialParam.color,shininess: materialParam.shininess});break;default:console.warn('未知材质类型');break;
}

2.3 网格（THREE.Mesh）

网格是几何体和材质的组合，将形状和外观结合在一起形成一个可渲染的物体。

const mesh = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(mesh); // 将网格添加到场景中

3. 光照

3.1 环境光（THREE.AmbientLight）

环境光会均匀照亮场景中的所有物体，没有特定的方向。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.2); // 颜色为白色，强度为0.2
scene.add(ambientLight);

3.2 平行光（THREE.DirectionalLight）

平行光从一个特定的方向照射物体，就像太阳光一样。

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(3, 3, 3); // 设置光源位置
scene.add(directionalLight);

如何设置平行光的阴影：

directionalLight.castShadow = true; // 开启平行光投射阴影
plane.receiveShadow = true; // 平面接收阴影
renderer.shadowMap.enabled = true; // 开启渲染器的阴影映射

4. 辅助工具

4.1 坐标轴辅助工具（THREE.AxesHelper）

坐标轴辅助工具用于可视化场景中的坐标轴，方便我们确定方向。

const axesHelper = new THREE.AxesHelper(10); // 长度为10
scene.add(axesHelper);

4.2 网格辅助工具（THREE.GridHelper）

网格辅助工具用于可视化场景中的网格，帮助我们确定物体的位置。

const gridHelper = new THREE.GridHelper(20, 20); // 大小为20，分割为20份
scene.add(gridHelper);

4.3 轨道控制器（OrbitControls）

轨道控制器允许用户通过鼠标交互来控制相机的视角，实现旋转、缩放和平移。

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

封装辅助工具类：

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';class Helper {constructor(options = {}, camera, renderer, scene) {const defaultOpts = {OrbitControls: true,axesHelper: { size: 10 },gridHelper: { size: 20, division: 20 }};this.options = Object.assign(options, defaultOpts);this.camera = camera;this.renderer = renderer;this.scene = scene;this.init();}init() {const { OrbitControls, axesHelper, gridHelper } = this.options;OrbitControls && this.initOribit();axesHelper && this.initAxesHelper(axesHelper);gridHelper && this.initGrid(gridHelper);}initOribit() {this.oribitControl = new OrbitControls(this.camera, this.renderer.domElement);}initAxesHelper(option) {const { size } = option;const axesHelper = new THREE.AxesHelper(size);this.scene.add(axesHelper);}initGrid(option) {const { size, division } = option;const grid = new THREE.GridHelper(size, division);this.scene.add(grid);}
}export default Helper;

5. 纹理与材质

5.1 纹理加载（THREE.TextureLoader）

纹理加载器用于加载图像纹理，将其应用到物体的材质上。

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('/src/assets/texture/地球.jpeg');
const material = new THREE.MeshStandardMaterial({ map: texture });

纹理的使用：

const texture = new THREE.TextureLoader().load('/src/assets/texture/地球.jpeg');
const textureAlpha = new THREE.TextureLoader().load('/src/assets/texture/world_normal.jpg');shpere.material = new THREE.MeshStandardMaterial({map: texture,normalMap: textureAlpha
});

6. 模型加载

6.1 GLTF 模型加载（GLTFLoader）

GLTFLoader 用于加载 GLTF 或 GLB 格式的 3D 模型。

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';const gltfLoader = new GLTFLoader();
const darcoLoader = new DRACOLoader();
darcoLoader.setDecoderPath('/node_modules/three/examples/jsm/libs/draco/');
gltfLoader.setDRACOLoader(darcoLoader);gltfLoader.load('/src/assets/models/gltf/ferrari.glb', (gltf) => {const model = gltf.scene;model.traverse(mesh => {if (mesh.isMesh) {mesh.castShadow = true;}});scene.add(model);
});

6.2 OBJ 模型加载（OBJLoader和MTLLoader）

OBJLoader 用于加载 OBJ 格式的 3D 模型，MTLLoader 用于加载对应的材质文件。

import { MTLLoader } from 'three/addons/loaders/MTLLoader';
import { OBJLoader } from 'three/addons/loaders/OBJLoader';const mtlLoader = new MTLLoader();
const basePath = '/src/assets/models/obj/';
mtlLoader.setPath(basePath);
mtlLoader.load('ambulance.mtl', (material) => {material.preload();const objLoader = new OBJLoader();objLoader.setMaterials(material);objLoader.load(`${basePath}ambulance.obj`, (object) => {object.traverse(mesh => {if (mesh.isMesh) {mesh.castShadow = true;}});scene.add(object);});
});

7. 动画

7.1 关键帧动画（THREE.KeyframeTrack、THREE.AnimationClip、THREE.AnimationMixer）

关键帧动画允许我们通过定义关键帧来创建物体的动画效果。

// 1. 创建关键帧数据
const times = [0, 4, 8];
const positions = [0, 0, 0, 3, 4, 5, 0, 0, 0];
const kf = new THREE.KeyframeTrack('box.position', times, positions);// 2. 创建剪辑对象clip
const clip = new THREE.AnimationClip('moving_clip', 8, [kf]);// 3. 创建一个播放器mixer
const mixer = new THREE.AnimationMixer(cube);
const action = mixer.clipAction(clip);
action.play();
action.loop = THREE.LoopRepeat;const clock = new THREE.Clock();
renderer.animation(() => {if (mixer) {mixer.update(clock.getDelta());}renderer.render(scene, camera);
});