AlloyTouch与three.js 3D模型交互
2016-12-07 09:41
696 查看
如你所见,上面的cube的旋转、加速、减速停止都是通过AlloyTouch去实现的。
演示
代码
<script src="asset/three.js"></script> <script src="../../alloy_touch.js"></script> <script> var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 500; var scene = new THREE.Scene(); var texture = new THREE.TextureLoader().load( 'asset/crate.gif' ); //几何体 var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 ); //材质 var material = new THREE.MeshBasicMaterial( { map: texture } ); var mesh = new THREE.Mesh( geometry, material ); //添加到舞台 scene.add( mesh ); var renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); new AlloyTouch({ touch: document, //触摸整个文档 vertical: false, //监听横向触摸 target: mesh.rotation, //运动 mesh.rotation property: "y", //被运动的属性 y factor: 0.08, //运动期间的摩擦力 moveFactor: 0.2 //拖拽期间的摩擦力 }) </script>
factor需要自己不断去调试出最佳的值,让松手之后的惯性运动的速率和时间达到最佳的效果。
moveFactor需要自己不断去调试出最佳的值,就是让横向拖拽的距离映射到旋转的角度上达到最跟手的效果。
如果,不需要惯性运动。比如像王者荣耀里的任务旋转就是没有惯性的,手指离开屏幕就会立马停止运动。如:
你只需要在new AlloyTouch设置inertia为false便可。
无惯性演示
无惯性代码
<script src="asset/three.js"></script> <script src="../../alloy_touch.js"></script> <script> ... ... ... animate(); new AlloyTouch({ touch: document, //触摸整个文档 vertical: false, //监听横向触摸 target: mesh.rotation, //运动 mesh.rotation property: "y", //被运动的属性 y factor: 0.08, //运动期间的摩擦力 moveFactor: 0.2 , //拖拽期间的摩擦力 inertia: false //禁止惯性运动 }) </script>
开始AlloyTouch吧
Github地址:https://github.com/AlloyTeam/AlloyTouch欢迎issues:https://github.com/AlloyTeam/AlloyTouch/issues
相关文章推荐
- AlloyTouch与three.js 3D模型交互
- AlloyTouch与three.js 3D模型交互
- threejs加载3D模型例子
- 使用Three.js + Blender构建在浏览器端显示的3D模型(2)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(2)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(1)
- Three.js 3D打印数据模型文件(.STL)载入中
- Three.js 3D打印数据模型文件(.STL)加载
- Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
- 使用Three.js + Blender构建在浏览器端显示的3D模型(4)
- 使用Three.js + Blender构建在浏览器端显示的3D模型(3)
- HTML5 WebGL Three.js 加载 3D模型文件
- 【H5 3D应用开发】Blender 制作导出Obj模型带纹理到three.js(二)
- 在Three.js中重新设置3D模型的中心点
- 使用Three.js + Blender构建在浏览器端显示的3D模型(1)
- three.js模型搭建与地图的3D可视化参考资源
- 8 Three.js使用轨迹球插件(trackball)增加对模型的交互功能
- DirectX-3d中.x模型转换成three.js可用的obj文件或者js文件
- three.js实现3D模型展示的示例代码
- Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解