JSONLoader로 여러 모프 타겟으로 애니메이션을 처리 할 수 ​​없습니다.

Question

간단한 상자와 두 개의 변형 변형 키 프레임이 포함 된 간단한 장면을 블렌더에서 만들었습니다.

내 보낸 .js 파일에는 많은 모프 타겟이 포함되어 있습니다 (각 애니메이션 프레임마다 하나씩 있긴하나요?).하지만 정적 인 상자에는 애니메이션이 표시되지 않습니다.

여기에 나는이 작업을 얻기 위해 노력하고있어 방법 : 또한 오류가 콘솔에보고되지 않았다

http://touhou.ru/upload/7b7513a903963b0804b0be763b8cc67c.js

:

이

<script src="three.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    var size_width = window.innerWidth; 
    var size_height = window.innerHeight; 
    var player; 
    var scene = new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(75, size_width/size_height, 0.1, 1000); 
    var renderer = new THREE.WebGLRenderer(); 
    var animation; 

    var animOffset = 1; 

    var duration = 1000; 
    var keyframes = 101; 
    var interpolation = duration/keyframes; 
    var lastKeyframe = 0; 
    var currentKeyframe = 0; 


    renderer.setSize(size_width, size_height); 
    document.body.appendChild(renderer.domElement); 

    camera.position.x = 10; 
    camera.position.y = -20; 
    camera.position.z = 10; 

    camera.rotation.x = 1.4; 

    var player_loader = new THREE.JSONLoader(); 

    player_loader.load("boxy.js", function(geo) { 
    player = new THREE.Mesh(geo); 
    scene.add(player); 
    }); 

    function animate() { 
    requestAnimationFrame(animate); 
    render(); 
    } 

    function render() { 
    if (player) { 
       var time = Date.now() % duration; 
       var keyframe = Math.floor(time/interpolation); 
       if (keyframe != currentKeyframe) { 
        player.morphTargetInfluences[ lastKeyframe ] = 0; 
        player.morphTargetInfluences[ currentKeyframe ] = 1; 
        player.morphTargetInfluences[ keyframe ] = 0; 

        lastKeyframe = currentKeyframe; 
        currentKeyframe = keyframe; 
       } 
       player.morphTargetInfluences[ keyframe ] = (time % interpolation)/interpolation; 
       player.morphTargetInfluences[ lastKeyframe ] = 1 - player.morphTargetInfluences[ keyframe ]; 
      } 
    renderer.render(scene, camera); 
    } 
    animate(); 
</script> 

여기 내 수출입니다.

Answer 1

모프 타겟을 예상하는 재료로 메쉬를 렌더링해야합니다. 이 작업은 생성자 옵션에서 morphTargets 부울을 true로 설정하여 재질을 인스턴스화하여 수행 할 수 있습니다.

당신이 three.js에 얼마나 익숙한 지 잘 모르겠지만, 대부분의 경우 사람들은 메쉬 생성자에 인수로 전달 된 메쉬 개체와 메쉬 개체를 메쉬 개체로 만듭니다. 당신은 생성자에게 기하학 객체만을주었습니다. 수

player = new THREE.Mesh(geo); 

이 모프 대상과 소재와 메쉬 인스턴스화 :

는 로더 콜백에서 새로운 메쉬 인스턴스화 라인을 변경 코드에서 실행되는 애니메이션을 얻으려면

player = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({ morphTargets: true })); 

변경 사항을 적용하여 코드를 실행했을 때 큐브의 한 모서리가 바깥쪽으로 변형 된 다음 다시 변형되는 것을 보았습니다.