Using AlloyTouch to control three.js 3D model

Using AlloyTouch to control  three.js 3D model

As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch to achieve.

Demo(Mobile)

Using AlloyTouch to control  three.js 3D model

Code

<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:

Using AlloyTouch to control  three.js 3D model

You only need to set the AlloyTouch inertia to false.

Non inertia demo

Using AlloyTouch to control  three.js 3D model

Code

<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>

AlloyTouch

Github:https://github.com/AlloyTeam/AlloyTouch

Any question, please let me know:https://github.com/AlloyTeam/AlloyTouch/issues

上一篇:LCD_ILI9320横竖屏方向的问题。


下一篇:处理jQuery选择器中的特殊符号,如(、#等