AlloyTouch 与 three.js 3D 模型交互 - 文章教程

AlloyTouch 与 three.js 3D 模型交互

发布于 2020-06-07 字数 2343 浏览 1153 评论 0

如你所见,上面的 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>

Github地址:https://github.com/AlloyTeam/AlloyTouch

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0