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

  • 相关阅读:
    OGRE源代码resource分析
    全排列
    各种让人无语的库
    python Kmeans算法
    Linux服务器安装MariaDB数据库
    初探SEO,BSP收录速度测试
    MetaWeblog API调用
    Patterns
    腾讯。。。对Linux的支持程度直接扼杀了Linux在国内用户群的增长
    个人电子商务网站建设之——整站静态化实现的选择、设计与实现(二):静态页面的实现方式;
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/6139942.html
Copyright © 2011-2022 走看看