onMouseWheel在移动设备上的触摸行为-three.js

Posted 2021-04-07

如何在移动触摸设备上实现向前和向后滚动，或如何与桌面（onMouseWheel）上实现相同的行为？范例：

JS小提琴：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>

答案

我不知道您的代码会发生什么。

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

触摸事件中没有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 = -lastY;
  lastY = currentY;
  adjustMixers(deltaY);
}
最后，通过使事件侦听器不处于被动状态并调用event.preventDefault，可以防止浏览器执行其默认设置（移动页面）>
function onMouseWheel(event) {
  event.preventDefault();
  ...
}

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

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

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