특정 위치로 시체 이동

body.position.set (x, y, z)를 사용하여 시체를 즉시 움직일 수 있음을 알고 있지만 어떻게 움직이는 지 애니메이션 방식으로 부드럽게 움직일 수 있습니까? 물리학과 다른 시체와 충돌 할 수 있습니까? body.velocity.set (x, y, z)를 사용하면 속도가 설정되고 body.linearDamping = v를 사용하면 약간의 마찰/저항이 생깁니다. 그러나 원하는 곳을 정확히 지정할 수있을만큼 충분하지 않습니다. 시체가 멈추어.특정 위치로 시체 이동

출처

2014-12-17 Dane Iracleous

운동기구가 필요한 것 같습니다. 운동기구를 사용하면 운동에 대한 완전한 제어권을 가지게되고 다른 운동기구를 밀어냅니다. 그러나 신체는 무한한 질량을 가지며 충돌하는 다른 신체의 영향을받지 않습니다.

신체의 시작 및 끝 위치를 정의하여 시작하십시오.

var startPosition = new CANNON.Vec3(5, 0, 2); 
var endPosition = new CANNON.Vec3(-5, 0, 2); 
var tweenTime = 3; // seconds

다음으로기구를 만듭니다. 이 예제에서는 상자 모양을 추가합니다.

var body = new CANNON.Body({ 
    mass: 0, 
    type: CANNON.Body.KINEMATIC, 
    position: startPosition 
}); 
body.addShape(new CANNON.Box(new CANNON.Vec3(1,1,1))); 
world.add(body);

트위스트 경로의 총 길이를 계산합니다.

var direction = new CANNON.Vec3(); 
endPosition.vsub(startPosition, direction); 
var totalLength = direction.length(); 
direction.normalize();

속도와 속도는 익숙한 공식 v = s/t를 사용하여 계산할 수 있습니다.

var speed = totalLength/tweenTime; 
direction.scale(speed, body.velocity);

트위닝 진행률을 계산합니다. 0에서 1 사이의 숫자입니다. 여기서 0은 위치를 시작하고 1은 끝 위치입니다. 이 번호를 사용하여 현재 신체 위치를 계산할 수 있습니다.

var progress = (world.time - startTime)/tweenTime; 
if(progress < 1){ 
    // Calculate current position 
    direction.scale(progress * totalLength, offset); 
    startPosition.vadd(offset, body.position); 
} else { 
    // We passed the end position! Stop. 
    body.velocity.set(0,0,0); 
    body.position.copy(endPosition); 
}

아래의 전체 코드를 참조하십시오. one of the cannon.js demos을 복제하고이 코드를 붙여 넣기 만하면됩니다.

var demo = new CANNON.Demo(); 

var postStepHandler; 

demo.addScene("Tween box",function(){ 
    var world = demo.getWorld(); 

    // Inputs 
    var startPosition = new CANNON.Vec3(5, 0, 2); 
    var endPosition = new CANNON.Vec3(-5, 0, 2); 
    var tweenTime = 3; // seconds 

    var body = new CANNON.Body({ 
    mass: 0, 
    type: CANNON.Body.KINEMATIC, 
    position: startPosition 
    }); 
    body.addShape(new CANNON.Box(new CANNON.Vec3(1,1,1))); 
    world.add(body); 
    demo.addVisual(body); 

    if(postStepHandler){ 
    world.removeEventListener('postStep', postStepHandler); 
    } 

    // Compute direction vector and get total length of the path 
    var direction = new CANNON.Vec3(); 
    endPosition.vsub(startPosition, direction); 
    var totalLength = direction.length(); 
    direction.normalize(); 

    var speed = totalLength/tweenTime; 
    direction.scale(speed, body.velocity); 

    // Save the start time 
    var startTime = world.time; 

    var offset = new CANNON.Vec3(); 

    postStepHandler = function(){ 

    // Progress is a number where 0 is at start position and 1 is at end position 
    var progress = (world.time - startTime)/tweenTime; 

    if(progress < 1){ 
     direction.scale(progress * totalLength, offset); 
     startPosition.vadd(offset, body.position); 
    } else { 
     body.velocity.set(0,0,0); 
     body.position.copy(endPosition); 
     world.removeEventListener('postStep', postStepHandler); 
     postStepHandler = null; 
    } 
    } 

    world.addEventListener('postStep', postStepHandler); 
}); 

demo.start();

출처

2015-03-15 16:57:57 schteppe

Physics와 같이 물리 라이브러리를 사용해야합니다. Three.js에서 쉽게 작동합니다. "Physijs Three.js"에 대한 인터넷 검색은 예제를 제공합니다.

출처

2014-12-17 20:10:11

특정 위치로 시체 이동

답변

관련 문제