zoukankan      html  css  js  c++  java
  • 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)

    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>
    

    AlloyTouch

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

  • 相关阅读:
    babel
    >/dev/null
    write to file
    fortran 77 example
    mix c with fortran
    automake
    Rockie's Android Porting Guide(4)——Add SD card to your system
    android平台初步分析
    Rockie's Android Porting Guide(4)——Add SD card to your system
    Android(1.5) 开机图片/文字/动画 修改
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/6143555.html
Copyright © 2011-2022 走看看