一、平台介绍

车刀角度在线测量实验系统，在web端用三维交互形式复现传统的ppt，word文档资料，并附带三维模型进行介绍，可以更加直观的进行学习。

图1 平台界面截图

二、今日完成分享

1.镜头动画

主要是控制camera在z轴方向上的平移，之前尝试过通过Tween.Js插件对controls的position0和target0同时在 tween.onUpdate()进行更新但效果不理想。可能自己使用的方式有问题。

其实引入OrbitControls控制时，鼠标右键按下拖动就能实现平移，但是源码里面涉及许多事件的绑定等等，看起来比较复杂，因此通过程序改变camera的position.z就能达到平移的效果，并在移动结束后重置controls的target0。下面是控制镜头平移的代码。


function animateCamera(oldPosition, oldTarget, newPosition, newTarget) {

    camera.position.set(oldPosition.x, oldPosition.y, oldPosition.z);

    controls.target.set(oldTarget.x, oldTarget.y, oldTarget.z);

    controls.update();

    var tween = new TWEEN.Tween({

        x1: oldPosition.x, // 相机x

        y1: oldPosition.y,

        z1: oldPosition.z,

    });

    tween.to({

        x1: newPosition.x,

        y1: newPosition.y,

        z1: newPosition.z,

    }, 500);

    tween.onUpdate(function(object) {

        camera.position.x = object.x1;

        camera.position.y = object.y1;

        camera.position.z = object.z1;

        controls.enabled = false;

    })

    tween.onComplete(function() {

        controls.target.set(newTarget.x, newTarget.y, newTarget.z);

        controls.update();

        controls.enabled = true;

    })

    tween.start();

    animate();

    function animate() {

        requestAnimationFrame(animate);

        TWEEN.update();

    }

}

效果如下，录屏软件太辣鸡了，后面都乱了，晚上也没时间再录好一点的了，讲究看吧，懂意思就行。