HTML5技术

AlloyTouch与three.js 3D模型交互 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2016-12-08 10:00 我要评论( )

如你所见,上面的cube的旋转、加速、减速停止都是通过AlloyTouch去实现的。 演示 代码 ../script..)scene ..geometry .)material .texture .....() .()(document.) /script factor需要自己不断去调试出最佳的值,让松手之后的惯性运动的速率和时间达到最佳的

如你所见,上面的cube的旋转、加速、减速停止都是通过AlloyTouch去实现的。

演示

代码

../script..)scene ..geometry .)material .texture .....() .()(document.) </script>

factor需要自己不断去调试出最佳的值,让松手之后的惯性运动的速率和时间达到最佳的效果。
moveFactor需要自己不断去调试出最佳的值,就是让横向拖拽的距离映射到旋转的角度上达到最跟手的效果。

如果,不需要惯性运动。比如像王者荣耀里的任务旋转就是没有惯性的,手指离开屏幕就会立马停止运动。如:

你只需要在new AlloyTouch设置inertia为false便可。

无惯性演示

无惯性代码

../script> ... ... ... (document.) </script>

开始AlloyTouch吧

Github地址:https://github.com/AlloyTeam/AlloyTouch
欢迎issues:https://github.com/AlloyTeam/AlloyTouch/issues


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

    移动Web触摸与运动解决方案AlloyTouch开源啦 - 【当耐特】

    2016-12-07 15:00

  • Three.js制作360度全景图 - 九成

    Three.js制作360度全景图 - 九成

    2016-12-01 16:00

  • THREE.js 学习笔记(一) - jerrylsxu

    THREE.js 学习笔记(一) - jerrylsxu

    2016-06-03 16:00

  • 浅谈个人对12306的核心用户诉求的核心模型设计思路和架构设计 - netfocus

    浅谈个人对12306的核心用户诉求的核心模型设计思路和架构设计 - netf

    2016-02-13 11:00

网友点评
/