如你所见,上面的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