AlloyTouch與three.js 3D模型互動

當耐特發表於2016-12-07
JS3D模型

AlloyTouch與three.js 3D模型互動

如你所見，上面的cube的旋轉、加速、減速停止都是通過AlloyTouch去實現的。

演示

AlloyTouch與three.js 3D模型互動

程式碼

<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需要自己不斷去除錯出最佳的值，就是讓橫向拖拽的距離對映到旋轉的角度上達到最跟手的效果。

如果，不需要慣性運動。比如像王者榮耀裡的任務旋轉就是沒有慣性的，手指離開螢幕就會立馬停止運動。如：

AlloyTouch與three.js 3D模型互動

你只需要在new AlloyTouch設定inertia為false便可。

無慣性演示

AlloyTouch與three.js 3D模型互動

無慣性程式碼

<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地址：github.com/AlloyTeam/A…
歡迎issues:github.com/AlloyTeam/A…

相關文章