-
Notifications
You must be signed in to change notification settings - Fork 526
Using AlloyTouch to control three.js 3D model
dntzhang edited this page Dec 22, 2016
·
1 revision
As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch to achieve.
<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, //touch the whole document
vertical: false, //monitor horizontal touch
target: mesh.rotation, //animate mesh.rotation's y property
property: "y",
factor: 0.08, //friction coefficient
moveFactor: 0.2 //touch move friction coefficient
})
</script>
factor need to continue to debug the best value for the speed and time of inertial motion let go after the best effect. moveFactor need to continue to debug the best value, is to let the lateral drag distance map to achieve the rotation angle.
If you don't need an inertial motion. For example, the king of glory in the task rotation is not inertia, the finger left the screen will immediately stop moving. Such as:
You only need to set the AlloyTouch inertia to false.
<script src="asset/three.js"></script>
<script src="../../alloy_touch.js"></script>
<script>
...
...
...
animate();
new AlloyTouch({
touch: document,
vertical: false,
target: mesh.rotation,
property: "y",
factor: 0.08,
moveFactor: 0.2 ,
inertia: false //disable the inertia animation
})
</script>
Github:https://github.com/AlloyTeam/AlloyTouch Any question, please let me know:https://github.com/AlloyTeam/AlloyTouch/issues