Using AlloyTouch to control three.js 3D model

#three.js

#alloytouch

#js

#javascript

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

Demo(Mobile)

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:

You only need to set the AlloyTouch inertia to false.

Non inertia demo

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>