zoukankan      html  css  js  c++  java
  • AlloyTouch与three.js 3D模型交互

    如你所见,上面的cube的旋转、加速、减速停止都是通过AlloyTouch去实现的。

    演示

    代码

    <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需要自己不断去调试出最佳的值,就是让横向拖拽的距离映射到旋转的角度上达到最跟手的效果。

    如果,不需要惯性运动。比如像王者荣耀里的任务旋转就是没有惯性的,手指离开屏幕就会立马停止运动。如:

    你只需要在new AlloyTouch设置inertia为false便可。

    无惯性演示

    无惯性代码

    <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地址:https://github.com/AlloyTeam/AlloyTouch
    欢迎issues:https://github.com/AlloyTeam/AlloyTouch/issues

  • 相关阅读:
    利用NABCD模型进行竞争性需求分析
    团队组建及项目启动
    结对项目
    归档二
    归档(1)
    自定义cell
    CoreData(数据持久化的方式)
    autoLayout(相对布局)二
    autoLayout (相对布局)1()
    细节知识点的记忆
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/6139942.html
Copyright © 2011-2022 走看看