three.js实现obj模型爆炸

时间：2024-03-30 21:06:30

由于obj模型是一个有多个mesh组成的组，而不是mesh，因此通过改变obj模型中mesh即children的位置，可实现模型爆炸。
通过在控制台输入console.log(model.children)查看，如图
three.js实现obj模型爆炸
首先获取模型中心坐标，由于在设置模型的位置信息时，将模型的中心的设置为（0，0，0），因此这里直接获取（0，0，0）作为模型中心坐标。

var modelWorldCenter=new THREE.Vector3(0,0,0);

接着获取模型中children的中心坐标，通过获取children的包围盒，且通过包围盒中最大值坐标和最小值坐标计算出中心坐标，在获取模型中心坐标时同样可采取该方式。

var childBox=new THREE.Box3();
	scene.traverse(function(child){
		if(child.isMesh){
			childBox.setFromObject(child);
			var childCenter=new THREE.Vector3().addVectors(childBox.max,childBox.min).multiplyScalar(0.5);
			if(isNaN(childCenter.x))return;
			child.childCenter=new THREE.Vector3().subVectors(childCenter,modelWorldCenter).normalize();
		}
	});

最后计算爆炸公式，即设置children的位置

child.position.copy(child.childCenter).multiplyScalar(num);

方法实现，model为要进行爆炸的模型，num为爆炸的数值，数组越大爆炸程度则越大：

function modelExplode(model,num){
	var modelWorldCenter=new THREE.Vector3(0,0,0);//.addVectors(box.max,box.min).multiplyScalar(0.5);//模型中心坐标
	console.log("model中心点",modelWorldCenter);
	var childBox=new THREE.Box3();
	scene.traverse(function(child){
		if(child.isMesh){
			childBox.setFromObject(child);
			var childCenter=new THREE.Vector3().addVectors(childBox.max,childBox.min).multiplyScalar(0.5);
			if(isNaN(childCenter.x))return;
			child.childCenter=new THREE.Vector3().subVectors(childCenter,modelWorldCenter).normalize();
			 //保存初始坐标
             //child.userData.oldPs = child.getWorldPosition(new THREE.Vector3());
             // console.log("初始坐标",child.userData.oldPs);
             if(!child.isMesh || !child.childCenter) return;
     
                //爆炸公式
              child.position.copy(child.childCenter).multiplyScalar(num);
             //console.log("child.position",child.position);
		}
	});
}

未爆炸：
three.js实现obj模型爆炸
爆炸后：
three.js实现obj模型爆炸

参考：https://blog.csdn.net/qq_30621091/article/details/84585790

相关文章