Question

这里我有一个简单的例子，说明在Three.js中使用MTLLoader()和OBJLoader()加载的对象

var loader = new THREE.MTLLoader();
loader.load(<?php echo "'".$mPart."'"; ?>, function (materials) {
    materials.preload();
    var objLoaderOfficeChair = new THREE.OBJLoader();
    objLoaderOfficeChair.setMaterials(materials);
    objLoaderOfficeChair.load(<?php echo "'".$oPart."'"; ?>, function (object) {
        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ){
                x=document.getElementsByClassName("popup");  
                   for(var i = 0; i < x.length; i++){
                      x[i].innerHTML += "<li class='mi_child'>"+child.name+"</li>";    
                    var timer = performance.now();
                    geometry = child.geometry;
                    geometry.dynamic = true;
                    material = child.material;
                    mesh = new THREE.Mesh(geometry, material);
                    model = object.children[i].geometry;
                    model2 = object;  
                    scene.add(mesh);
                    }

现在稍后在anim（）代码中，我调用另一个动作来移动子对象加载。现在我希望这些项目可以在所有不同的方向上移动。

var center = new THREE.Vector3(0, 0, 0);
var distanceToMove = 0.1;
if(params.explodeEnabled)  {
for (var i = 0; i < model2.children.length; i++) {
   model2.children[i].position.x =  explodeValue + outlinePass.Explode * i;
   model2.children[i].position.y = explodeValue + outlinePass.Explode * i - 0.02;
   model2.children[i].position.z =  explodeValue + outlinePass.Explode * i + 0.06;
}
}

但是在这个例子中，所有项目都按照此处所示的相同方向移动。 More Info

Answer 1

您需要沿着与对象中心不同的路径移动每个部分。保存每个零件的旧位置，并计算远离中心的方向。

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

for (var i = 0; i < model2.children.length; i++) {
    var child = model2.children[i];

    if (!child.geometry.boundingSphere) child.computeBoundingSphere();

    child.oldPosition = child.oldPosition || geometry.boundingSphere.center.clone();
    var direction = child.oldPosition.clone().sub(explosionCenter).normalize(); 

    child.position.x = child.oldPosition.x + explodeValue + outlinePass.Explode * direction.x;
    child.position.y = child.oldPosition.y + explodeValue + outlinePass.Explode * direction.y;
    child.position.z = child.oldPosition.z + explodeValue + outlinePass.Explode * direction.z;
}

这样，每个组件将根据其初始位置远离中心移动。你应该为一些大的组件使用自定义方向向量，以确保它们不包括小组件：

if (i == <index of big component>) {
    direction = new THREE.Vector3(1, 1, 0); // Custom direction for a component 
}

如何在3D对象上执行子位移，Three.js？

1 个答案: