基于WebGL的外圆车刀在线实验平台开发

2019-12-09  本文已影响0人  MoreCode

一、平台介绍

       车刀角度在线测量实验系统,在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中,还得连接后台,存储数据。

上一篇 下一篇

猜你喜欢

热点阅读