onMouseWheel 在移動設備上的觸摸行為 - Three.js

Question

如何在移動觸摸設備上實現向前和向后滾動或與桌面（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>

Answer 1

我不知道你希望你的代碼會發生什么。

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

觸摸事件沒有event.deltaY 。 觸摸事件將數據放在event.touches數組上，每個手指一個

如果您曾嘗試在頁面上的某處打印event.deltaY或在調試器中單步執行代碼（遠程運行），那么很明顯有些地方event.deltaY 。

可以通過使用函數來簡化代碼。 無需重復循環 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});