3D 개체 인 Three.js에서 하위 변위를 수행하는 방법은 무엇입니까?

Question

여기에 내가 개체가로드 된 아이를 이동합니다 다른 작업을 호출 객체의 간단한 예는 나중에 ANIM() 코드 지금 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); 
        } 

을로드 할 수 있습니다. 이제이 항목들을 다른 방향으로 이동 시키길 원합니다.

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 
}