移动设备上鼠标滚轮的触摸行为 - 三.js

Question

如何在移动触摸设备上实现向前和向后滚动或具有与桌面(鼠标滚轮(相同的行为？例子：

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事件。mousewheel在 Firefox 上不存在。

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

如果您尝试在页面上的某处打印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});