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

  • 相关阅读:
    数据结构 AVL树
    数据结构 快速排序
    Mybatis 传递多个参数
    数据结构 二叉搜索树
    Java 多线程 ReadWriteLock
    Java 基础 集合框架
    SourceTree安装跳过注册
    【前端部署】阿里云 windows2019服务器用node部署静态项目
    【node开发】node简易服务器一分钟搞定
    【node开发】node.js编写一个接口
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/6143555.html
Copyright © 2011-2022 走看看