AlloyTouch与three.js 3D模型交互

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hj212cia0ab

以上是关于AlloyTouch与three.js 3D模型交互的主要内容,如果未能解决你的问题,请参考以下文章

three.js 3d 模型作为超链接

用three.js在网页实现3D模型

如何将 Blender 3D 模型导入到 three.js

Three.js基础入门系列--导入3D模型

从 DB 加载 3d 模型并在 Three.js 中使用它

如何将 ms3d 模型转换为 three.js?