Three.js机器人与星系动态场景（四）：封装Threejs业务组件

实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部，通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于react+threejs开发，感兴趣可以看看之前的博客关于这部分详细的介绍

Three.js机器人与星系动态场景：实现3D渲染与交互式控制-CSDN博客

Three.js机器人与星系动态场景（二）：强化三维空间认识-CSDN博客

Three.js机器人与星系动态场景（三）：如何实现动画-CSDN博客

封装ThreeTool类

在src目录下新建BasicThree文件夹，index.ts

导入相关依赖

导入three的所有方法，命名为THREE

导入轨道控制器类

性能监控库

字体加载

文本geometry

import * as THREE from "three"; // 引入Three.js库
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";import Stats from "three/examples/jsm/libs/stats.module.js"; // 引入性能监控库
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";

添加属性和构造方法

export class ThreeTool {public camera: THREE.PerspectiveCamera; // 相机对象public scene: THREE.Scene; // 场景对象public renderer: THREE.WebGLRenderer; // 渲染器对象// 构造函数，初始化Three.js工具constructor() {this.renderer = this.initRenderer(); // 初始化渲染器this.scene = this.initScene(); // 初始化场景this.camera = this.initCamera(); // 初始化相机this.initOrbitControls();}
}

初始化渲染器

  // 初始化渲染器的方法public initRenderer(): THREE.WebGLRenderer {const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);return renderer;}

初始化场景

  // 初始化场景的方法public initScene(): THREE.Scene {const scene = new THREE.Scene();return scene;}

初始化渲染器

  // 初始化渲染器的方法public initRenderer(): THREE.WebGLRenderer {const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);return renderer;}

初始化相机

  // 初始化相机的方法public initCamera(): THREE.PerspectiveCamera {const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);return camera;}

初始化轨道控制器

  //初始化轨道控制器public initOrbitControls() {const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.update();}

初始化性能监控

  // 初始化性能监控的方法public initStats(container: HTMLDivElement) {const stats = new Stats();stats.dom.style.position = "absolute";stats.dom.style.left = "0";stats.dom.style.zIndex = "100";container.appendChild(stats.dom); // 将性能监控DOM元素添加到容器中return stats;}

初始化辅助坐标系

  //初始化坐标系辅助public initAxisHelper(axesLength: number = 150, showText: boolean = true) {const helper = new THREE.AxesHelper(axesLength);if (showText) {const loader = new FontLoader();let meshX = new THREE.Mesh();let meshY = new THREE.Mesh();let meshZ = new THREE.Mesh();loader.load("fonts/optimer_regular.typeface.json", (font) => {meshX = this.createText("X", font);meshY = this.createText("Y", font);meshZ = this.createText("Z", font);meshX.position.x = 12;meshY.position.y = 12;meshZ.position.z = 12;this.scene.add(meshX);this.scene.add(meshY);this.scene.add(meshZ);});}this.scene.add(helper);}

初始化文本

  private createText(content: string, font: any) {const textGeometry = new TextGeometry(content, {font: font,size: 1,depth: 0.1,curveSegments: 1,});textGeometry.center();const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); // frontconst mesh = new THREE.Mesh(textGeometry, textMaterial);return mesh;}

完整代码

import * as THREE from "three"; // 引入Three.js库
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";import Stats from "three/examples/jsm/libs/stats.module.js"; // 引入性能监控库
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";
export class ThreeTool {public camera: THREE.PerspectiveCamera; // 相机对象public scene: THREE.Scene; // 场景对象public renderer: THREE.WebGLRenderer; // 渲染器对象// 构造函数，初始化Three.js工具constructor() {this.renderer = this.initRenderer(); // 初始化渲染器this.scene = this.initScene(); // 初始化场景this.camera = this.initCamera(); // 初始化相机this.initOrbitControls();}public rendererContainer() {this.renderer.render(this.scene, this.camera); // 渲染场景和相机}// 初始化场景的方法public initScene(): THREE.Scene {const scene = new THREE.Scene();return scene;}// 初始化渲染器的方法public initRenderer(): THREE.WebGLRenderer {const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);return renderer;}// 初始化相机的方法public initCamera(): THREE.PerspectiveCamera {const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);return camera;}public initOrbitControls() {const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.update();}// 初始化性能监控的方法public initStats(container: HTMLDivElement) {const stats = new Stats();stats.dom.style.position = "absolute";stats.dom.style.left = "0";stats.dom.style.zIndex = "100";container.appendChild(stats.dom); // 将性能监控DOM元素添加到容器中return stats;}public initAxisHelper(axesLength: number = 150, showText: boolean = true) {const helper = new THREE.AxesHelper(axesLength);if (showText) {const loader = new FontLoader();let meshX = new THREE.Mesh();let meshY = new THREE.Mesh();let meshZ = new THREE.Mesh();loader.load("fonts/optimer_regular.typeface.json", (font) => {meshX = this.createText("X", font);meshY = this.createText("Y", font);meshZ = this.createText("Z", font);meshX.position.x = 12;meshY.position.y = 12;meshZ.position.z = 12;this.scene.add(meshX);this.scene.add(meshY);this.scene.add(meshZ);});}this.scene.add(helper);}private createText(content: string, font: any) {const textGeometry = new TextGeometry(content, {font: font,size: 1,depth: 0.1,curveSegments: 1,});textGeometry.center();const textMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }); // frontconst mesh = new THREE.Mesh(textGeometry, textMaterial);return mesh;}
}

代码中使用

通过new ThreeTool()形式创建一个工具类的实例

  // 创建 ThreeTool 实例const instance = new ThreeTool();

通过示例的属性操作相机、场景

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { generateRobot, generateStarts } from "./generate";
import { ThreeTool } from "../../BasicThree";
import Stats from "three/examples/jsm/libs/stats.module.js";/*** 创建一个Three.js场景，包括相机和渲染器*/
function Robot() {// 创建一个div容器，用于存放渲染的Three.js场景const containerRef = useRef<HTMLDivElement>(null);const statsRef = useRef<Stats>(); // 创建用于引用统计信息的 ref// 创建 ThreeTool 实例const instance = new ThreeTool();// 初始化相机位置和朝向instance.camera.position.set(15, 12, 8);instance.camera.lookAt(0, 0, 0);// 添加坐标系instance.initAxisHelper();// 生成机器人和星星const robot = generateRobot();const robot2 = generateRobot();robot2.position.x = 6;robot2.position.z = 6;const starts = generateStarts(200);// 将物体添加到场景instance.scene.add(robot, robot2, starts);// 创建并设置方向光const straightLight = new THREE.DirectionalLight(0xffffff, 5);straightLight.position.set(20, 20, 20);instance.scene.add(straightLight);// 动画函数const animate = () => {requestAnimationFrame(animate);robot.rotation.z -= 0.005;robot2.rotation.y -= 0.005;starts.rotation.y -= 0.001;starts.rotation.z += 0.001;starts.rotation.x += 0.001;instance.renderer.render(instance.scene, instance.camera);statsRef.current && statsRef.current.update(); // 更新统计信息};// 监听组件挂载和卸载useEffect(() => {if (containerRef.current) {containerRef.current.appendChild(instance.renderer.domElement);instance.renderer.render(instance.scene, instance.camera);statsRef.current = instance.initStats(containerRef.current); // 初始化统计信息// 启动动画循环animate();}}, [containerRef]);// 返回div容器，用于存放渲染的Three.js场景return <div ref={containerRef} style={{ width: "100vw", height: "100vh" }}></div>;
}// 导出Robot组件
export default Robot;

generate模型生成文件

import * as THREE from "three";
function createHead() {//SphereGeometry创建球形几何体const head = new THREE.SphereGeometry(4, 32, 16, 0, Math.PI * 2, 0, Math.PI * 0.5);const headMaterial = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const headMesh = new THREE.Mesh(head, headMaterial);return headMesh;
}
//触角
function generateHorn(y: number, z: number, angle: number) {//触角 CapsuleGeometry 创建胶囊形状的几何体。胶囊形状可以看作是一个圆柱体两端加上半球体const line = new THREE.CapsuleGeometry(0.1, 2);const lineMaterial = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const lineMesh = new THREE.Mesh(line, lineMaterial);lineMesh.position.y = y;lineMesh.position.z = z;lineMesh.rotation.x = angle;return lineMesh;
}
//机器人眼睛
function generateEye(x: number, y: number, z: number) {//SphereGeometry创建球形几何体const eye = new THREE.SphereGeometry(0.5, 32, 16, 0, Math.PI * 2, 0, Math.PI * 2);const eyeMaterial = new THREE.MeshStandardMaterial({color: 0x212121,roughness: 0.5,metalness: 1.0,});const eyeMesh = new THREE.Mesh(eye, eyeMaterial);eyeMesh.position.x = x;eyeMesh.position.y = y;eyeMesh.position.z = z;return eyeMesh;
}
//机器人身体
export function generateBody() {//CylinderGeometry第一个参数是上部分圆的半径，第二个参数是下部分圆的半径，第三个参数是高度，材质使用的跟腿一样const body = new THREE.CylinderGeometry(4, 4, 6);const bodyMaterial = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const bodyMesh = new THREE.Mesh(body, bodyMaterial);return bodyMesh;
}
//胳膊、腿
function generateLegs(y: number, z: number) {const leg1 = new THREE.CapsuleGeometry(1, 4);const legMaterial1 = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 1.0,});const leg1Mesh = new THREE.Mesh(leg1, legMaterial1);leg1Mesh.position.y = y;leg1Mesh.position.z = z;return leg1Mesh;
}
//创建机器人
export function generateRobot() {// 创建一个Three.js对象，用于存放机器人const robot = new THREE.Object3D();const headMesh = createHead();headMesh.position.y = 6.5;robot.add(headMesh);//眼睛const leftEye = generateEye(3, 8, -2);const rightEye = generateEye(3, 8, 2);robot.add(leftEye);robot.add(rightEye);const leftHorn = generateHorn(11, -1, (-Math.PI * 30) / 180);const rightHorn = generateHorn(11, 1, (Math.PI * 30) / 180);robot.add(leftHorn);robot.add(rightHorn);const body = generateBody();body.position.y = 4;robot.add(body);// 生成机器人左腿robot.add(generateLegs(0, -2));// 生成机器人右腿robot.add(generateLegs(0, 2));//胳膊robot.add(generateLegs(3, 5));robot.add(generateLegs(3, -5));//物体缩放robot.scale.x = 0.3;robot.scale.y = 0.3;robot.scale.z = 0.3;return robot;
}
//创建粒子星星
export function generateStarts(num: number) {//制作粒子特效const starts = new THREE.Object3D();const obj = new THREE.SphereGeometry(0.2, 3, 3);const material = new THREE.MeshStandardMaterial({color: 0x43b988,roughness: 0.5,metalness: 5,});const mesh = new THREE.Mesh(obj, material);for (let i = 0; i < num; i++) {const target = new THREE.Mesh();target.copy(mesh);target.position.x = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));target.position.y = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));target.position.z = Math.floor(Math.random() * 18 + Math.floor(Math.random() * -18));starts.add(target);}return starts;
}