做海报用什么网站,科技公司简介,天津购物网站搭建,网站开发学什么编程语言实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以 将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部#xff0c;通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于reactthre… 实际在写业务的时候不会在每个组件里都写几十行的threejs的初始化工作。我们可以 将通用的threejs的场景、相机、render、轨道控制器等进行统一初始化。同时将非主体的函数提到组件外部通过import导入进组件。将业务逻辑主体更清晰一些。下面的代码是基于reactthreejs开发感兴趣可以看看之前的博客关于这部分详细的介绍 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 useRefHTMLDivElement(null);const statsRef useRefStats(); // 创建用于引用统计信息的 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;
}效果图
