动画时三个Js更新对象的位置(Blender导出,变形动画)

时间:2014-08-24 01:37:48

标签: javascript animation canvas three.js

我从一个加载到我场景中的blender导出动画。我想要实现的是单击对象,对象通过它的关键帧动画50%并停止,然后如果我再次单击该对象,其余50%的关键帧将被迭代。

到目前为止,我的对象动画为50%。问题是在click事件处理程序中找不到交集。

function mousedown( event ) 
{
    event.preventDefault();

    // update mouse object
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    // find intersections

    // create a reay with origin at the mouse position
    //   and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );

    var ray = projector.pickingRay( vector.clone(), camera );

    //Check for intersections
    var intersects = ray.intersectObjects( targetList , true);

    // if there is one (or more) intersections
    if ( intersects.length > 0 )
    {
        console.log(intersects);
        //Start animating - animation is a global var in this scene triggering
        //the animation.
        animation = true;

    }
    else
    {
        console.log("No intersections");        
    }

}

这在首次实例化对象时有效。但是在对象被“动画化”之后它不起作用。经过一些调试后,我可以看到,即使在对象移动后(动画的前50%已经播放),对象的几何体的位置=(0,0,0)。

对于为什么mousedown事件没有拾取交叉点似乎是有意义的,因为在“世界”中,对象实际上并未定位在屏幕上的位置。

以下是加载对象的代码:

jsonLoader.load("assets/models/cheese01.js", function(geometry){
    geometry.computeMorphNormals();
    geometry.computeVertexNormals(); 
    // geometry.computeBoundingSphere();
    // geometry.normalsNeedUpdate = true; 
    // verticesNeedUpdate = true; 

    var material = new THREE.MeshLambertMaterial({
        color: 0xaa1100,
        morphTargets: true,
        morphNormals: true,
        wrapAround: true
    });

    var mesh = new THREE.MorphAnimMesh(geometry, material);

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    mesh.duration = 3000;
    mesh.time = 0;
    mesh.scale.set( 1, 1, 1 );

    mesh.rotation.x = degToRad(175);

    mesh.matrixAutoUpdate = false;
    mesh.updateMatrix();

    geometry.normalsNeedUpdate = true;

    mesh.parseAnimations();

    scene.add(mesh);
    //Objects subject to intersection checks (from mouse click)
    targetList.push(mesh);
    //Objects to animate
    morphs.push(mesh);

 });

提前干杯以获得任何帮助!

0 个答案:

没有答案