基于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中,还得连接后台,存储数据。