javascript - 移动设备上 onMouseWheel 的触摸行为 - Three.js

Question

如何在移动触摸设备上实现向前和向后滚动或与桌面上(onMouseWheel)具有相同的行为？示例:

JS fiddle :https://jsfiddle.net/xzwve647/

桌面(动画在桌面上来回工作正常)

移动设备(动画无法向后播放 - 只能向前播放):

function onTouchStart(event) {
        startY = event.touches[0].pageY;
    }
    function onTouchMove(event) {
        var delta = event.deltaY;
        if (event.deltaY > 0) {
            for (var i = 0; i < mixers.length; i++) {
                mixers[i].update(clock.getDelta() * 5);
            }
        } else {
            for (var i = 0; i < mixers.length; i++) {
                mixers[i].update(clock.getDelta() * -5);
            }
        }
    }

事件监听器:

 window.addEventListener( 'mousewheel', onMouseWheel, false );
 window.addEventListener( 'touchstart', onTouchStart, false );
 window.addEventListener( 'touchmove', onTouchMove, false );

var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();

var mixer = [];

var mixers = [];

init();

animate();

function init() {

  container = document.createElement('div');
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 100, 100);

  scene = new THREE.Scene();

  light = new THREE.HemisphereLight(0xffffff, 0x444444);
  light.position.set(0, 200, 0);
  scene.add(light);

  light = new THREE.DirectionalLight(0xffffff);
  light.position.set(0, 200, 100);
  light.castShadow = true;
  light.shadow.camera.top = 180;
  light.shadow.camera.bottom = -100;
  light.shadow.camera.left = -120;
  light.shadow.camera.right = 120;
  scene.add(light);

  // scene.add( new THREE.CameraHelper( light.shadow.camera ) );

  var grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
  grid.material.opacity = 0.2;
  grid.material.transparent = true;
  scene.add(grid);

  // model
  var loader = new THREE.FBXLoader();
  loader.load('https://threejs.org/examples/models/fbx/Samba Dancing.fbx', function(object) {

    object.mixer = new THREE.AnimationMixer(object);
    mixers.push(object.mixer);


    var action = object.mixer.clipAction(object.animations[0]);
    action.play();


    object.traverse(function(child) {

      if (child.isMesh) {

        child.castShadow = true;
        child.receiveShadow = true;

      }

    });
    object.position.y = 85;

    scene.add(object);

  });


  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  container.appendChild(renderer.domElement);

  window.addEventListener('mousewheel', onMouseWheel, false);
  window.addEventListener('touchstart', onTouchStart, false);
  window.addEventListener('touchmove', onTouchMove, false);

  window.addEventListener('resize', onResize, false);

  // stats
  stats = new Stats();
  container.appendChild(stats.dom);

}


function onResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}


function onMouseWheel(event) {


  if (event.deltaY > 0) {
    for (var i = 0; i < mixers.length; i++) {
      mixers[i].update(clock.getDelta() * 5);
    }
  } else {
    for (var i = 0; i < mixers.length; i++) {
      mixers[i].update(clock.getDelta() * -5);

    }
  }
}


function onTouchStart(event) {

  startY = event.touches[0].pageY;


}

function onTouchMove(event) {

  var delta = event.deltaY;

  if (event.deltaY > 0) {
    for (var i = 0; i < mixers.length; i++) {
      mixers[i].update(clock.getDelta() * 5);
    }
  } else {
    for (var i = 0; i < mixers.length; i++) {
      mixers[i].update(clock.getDelta() * -5);

    }
  }


}


function animate() {

  delta = clock.getDelta();

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

  stats.update();

}

body {
  margin: 0px;
  overflow: hidden;
}

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/inflate.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/FBXLoader.js"></script>
<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

Answer 1

我不知道您期望代码发生什么。

您可能需要 wheel 事件，而不是 mousewheel 事件。 Firefox 上不存在 mousewheel。

触摸事件上没有 event.deltaY。触摸事件将数据放入 event.touches 数组中，每个手指对应一个

如果您尝试在页面上的某个位置打印 event.deltaY 或在调试器中单步执行代码 (run remotely)那么很明显有些地方不对劲。

可以使用函数来简化代码。无需重复循环4次。

function adjustMixers(deltaY) {
  const speed = deltaY > 0 ? 5 : -5;
  const amount = clock.getDelta() * speed;
  for (let i = 0; i < mixers.length; i++) {
    mixers[i].update(amount);
}

function onMouseWheel(event) {
  adjustMixers(event.deltaY);
}

let lastY;
function onTouchStart(event) {
  lastY = event.touches[0].pageY;
}

function onTouchMove(event) {
  const currentY = event.touches[0].pageY;
  const deltaY = currentY - lastY;
  lastY = currentY;
  adjustMixers(deltaY);
}

最后，您可以通过使事件监听器不被动并调用 event.preventDefault 来阻止浏览器执行默认操作(移动页面)

function onMouseWheel(event) {
  event.preventDefault();
  ...
}

function onTouchStart(event) {
  event.preventDefault();
  ...
}

function onTouchMove(event) {
  event.preventDefault();
  ...
}

window.addEventListener('wheel', onMouseWheel, {passive: false});
window.addEventListener('touchstart', onTouchStart, {passive: false});
window.addEventListener('touchmove', onTouchMove, {passive: false});