加载FBX模型
ps 文章断更一个多月了，今天女朋友提醒，再次沉下心来继续记录最近学习过程。生命不止，学习不休。<script lang="ts" setup>import * as THREE from "three";import {onMounted, ref } from "vue";//引入加载器import {FBXLoader } from "three/examples/jsm/loaders/FBXLoader";import {GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'import {OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'//引入控制器import {OrbitControls } from "three/examples/jsm/controls/OrbitControls";const visible = ref<boolean>(false);const percent = ref<Number>(0); // 进度条let raycaster: THREE.Raycaster;let mouse: THREE.Vector2;let dom: HTMLCanvasElement | null;let camera: THREE.PerspectiveCameralet clickObjects: THREE.Grouplet scene:THREE.SceneonMounted(() => {dom = document.querySelector("#three-model");let controls: OrbitControls;if (dom) {scene = new THREE.Scene();// 创建相机 倾斜度 画布大小1200/900 最小视距 最大视距camera = new THREE.PerspectiveCamera(45, 1200 / 900, 1, 10);camera.position.set(2, 2, 4);camera.lookAt(new THREE.Vector3());const renderer = new THREE.WebGLRenderer({canvas: dom,antialias: true,alpha: true,});renderer.setClearColor("rgba(0,0,0,1)");renderer.setSize(1200, 900);// 添加辅助工具 坐标系 与坐标轴const axesHelper = new THREE.AxesHelper(5);scene.add(axesHelper);const pointLigth = new THREE.PointLight("#fff", 1);pointLigth.position.set(2, 2, 2);scene.add(new THREE.PointLightHelper(pointLigth, 0.1));scene.add(new THREE.GridHelper(5, 20));//添加光源 有些模型的材质是感光的 不加光源看不到const AmbientLight = new THREE.AmbientLight("#fff");scene.add(AmbientLight);//添加控制器controls = new OrbitControls(camera, dom);//添加模型 FBX加载const loader: FBXLoader = new FBXLoader();//加载模型loader.load("/models/robot.fbx",(object) => {percent.value = 0;// 模型缩放object.scale.set(0.01, 0.01, 0.01);scene.add(object);clickObjects = objectconsole.log(object);},(xhr) => {visible.value = true;percent.value = (xhr.loaded / xhr.total) * 100;if (percent.value === 100) visible.value = false;});//GLTF加载loader.load(`/models/2CylinderEngine.gltf`, (obj) => {const color = new THREE.Color(255, 0, 0)obj.scene.traverse(function (child) {// 放射光颜色与放射光贴图 不设置可能导致黑模if (child.isMesh) {if (child.name === 'body_23') {child.material.oldColor = child.material.color.clone()child.material.color = color}}if (child instanceof THREE.Mesh) {// 每个储位单独赋予一个基础材质child.material = child.material.clone() // new THREE.MeshBasicMaterial({ color: 0xffffff })}})obj.scene.scale.set(0.001, 0.001, 0.001)scene.add(obj.scene)this.clickObjects = obj})// OBJ加载const objLoader = new THREE.OBJLoader();objLoader.load('/models/xl.obj', (obj) => {obj.scale.set(0.05, 0.05, 0.05);scene.add(obj)})const render = () => {requestAnimationFrame(render);renderer.render(scene, camera);};render();// 添加点击事件raycaster = new THREE.Raycaster();mouse = new THREE.Vector2();dom.addEventListener("click", onMouseClick, false);}});const onMouseClick = (event: any) => {if (dom) {// 计算点击位置时，是canvas元素距离左上角的距离 不然点击会获取错乱var width = dom.offsetWidth;var height = dom.offsetHeight;var marginLeft = dom.getBoundingClientRect().left;var marginTop = dom.getBoundingClientRect().top;mouse.x = ((event.clientX - marginLeft) / width) * 2 - 1;mouse.y = -((event.clientY - marginTop) / height) * 2 + 1;raycaster.setFromCamera(mouse, camera);// 获取raycaster直线和所有模型相交的数组汇合var intersects = raycaster.intersectObjects([clickObjects]); // // var intersects = raycaster.intersectObjects(scene.children) // 场景中所有的if (intersects.length > 0) {// 获取点击界面第一个物体console.log(intersects[0]);}}};</script>
关于模型太大优化
THREE开发项目，模型的三角面越多，体量就越大
因为三维模型文件往往比较大，所以Web3D项目相比较普通的前端web项目，需要加载文件体积比较大，需要花费的时间自然比较多，加载时间比较长的情况下，对于用户来说体验肯定不太好。
1、二进制格式
使用不同文件格式，文件的大小会有所不同，如果同一个模型，导出二进制.fbx大小要比文本格式的.obj文件要小1~2倍。常见的GLTF格式可以是文本格式，也可以使二进制格式，为了更好的传输性能可以选择二进制格式，.glTF打包转化为.glb二进制文件。
2、减面和法线贴图
一般3D美术导出模型的时候，会进行减面操作，并导出模型的法线贴图,比如你只是加载一个机械零件模型(非批量)，你可以让3D美术进行减面然后导出法线贴图，这样的话在不影响曲面显示质量前提下，减少模型三角形面数，一方面可以降低模型文件大小提高网络传输性能，另一方面可以提高threejs渲染模型的渲染性能。
3、加载进度条
因为Web3D项目加载时间相对普通web页面时间比较长，如果用户一直等着，web页面没有什么反应，可能会关掉，这种情况下，可以在web页面放置一个进度条实时显示模型文件加载进度。
如何获得三维模型文件的加载进度可以查看threejs文档关于FileLoader类的介绍，至于web进度条，可以通过普通HTML和CSS代码去实现，然后和threejs加载进度数据进行绑定即可。
4、动态分批加载
如果一个场景中，有多个网格模型模型，比如室内设计效果展示，里面有沙发、椅子、电视等三维模型，这时候把这些模型分别单独建立一个文件，threejs可以按照一定的顺序分别先后加载这些单独的网格模型文件，然后插入到场景中。这样的话，用户可以以最快速度查看到场景中的部分模型，不用一直等待，没有什么反应，用户体验更好。
