一、平台介绍

       车刀角度在线测量实验系统，在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();

    }

}

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

平移动画.gif

2.模型导入

这个就是将.fbx模型导入，没什么特别的东西，模型画好看点就行了，我的就凑合看吧。

ppt与三维模型融合.png

三、总结

       今天忙活了一天，场景有了个样子了，可以进行切换镜头操作，实现了三维平面ppt的效果，不够div的排版还得请教大佬，目前的工作注重功能的实现，美观程度还没能力考虑。后面的工作得把示意操作动画导入web中，还得连接后台，存储数据。