西安建设局网站,网站建设策划书提纲,wordpress 群晖,linux类似wordpress原理#xff1a;通过修改模型材质的 x,y,z 轴坐标 positon.set( x,y,z) 来实现拆解#xff0c;分解的效果。
注意#xff1a;支持模型材质position 修改的材质类型为 type“Mesh” ,其他类型的材质修改了position 可能没有实际效果
在上一篇 Three.js加载外部glb,fbx,gltf…原理通过修改模型材质的 x,y,z 轴坐标 positon.set( x,y,z) 来实现拆解分解的效果。
注意支持模型材质position 修改的材质类型为 type“Mesh” ,其他类型的材质修改了position 可能没有实际效果
在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上新增一个 setModelMeshDecompose(模型拆解方法)
安装 tween.js (用于处理模型拆解的位置移动缓冲动画效果)
yarn add tweenjs/tween.jsimport TWEEN from tweenjs/tween.js;setModelMeshDecompose 方法 // decompose 分解的大小距离setModelMeshDecompose(decompose ) {// 如果当前模型只有一个材质则不进行拆解if (this.glowMaterialList.length 1) return false// 修改材质位置移动const modelDecomposeMove (obj, position) {new TWEEN.Tween(obj.position).to(position, 500).onUpdate(function (val) {obj.position.set(val.x || 0, val.y || 0, val.z || 0);}).start();}const length this.glowMaterialList.lengthconst angleStep (2 * Math.PI) / length;// TODD glowMaterialList当前模型的所有材质列表名称this.glowMaterialList.forEach((name, i) {// 通过 getObjectByName 获取 要修改的材质const mesh this.model.getObjectByName(name)// 如果 type 类型为Mesh 则修改材质的位置if (mesh.type Mesh) {// 拆解位置移动的计算公式const angle i * angleStep;const x (decompose) * Math.cos(angle);const y (decompose) * Math.sin(angle);const position {x, y, z: 0}// 执行拆解modelDecomposeMove(mesh, position)}})}获取当前模型的所有材质名称的方法 getFlowMeaterList(){const modelMaterialList []this.model.traverse((v) {if (v.isMesh v.material) {modelMaterialList.push(v) }})this.glowMaterialList modelMaterialList.map(vv.name)}在场景渲染动画帧方法中添加 TWEEN.update() render(){this.renderer.render(this.scene, this.camera)TWEEN.update()
}完整的代码可参考:https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js
界面效果对比
