javascript - three.js - 将相机旋转链接到 div 内的移动设备移动

Question

有没有办法在 this demo 中进行相机旋转？像现在一样由移动设备移动和鼠标移动控制？这已针对移动设备实现here但不与鼠标一起。这是当前控制鼠标相机旋转的内容:

    function render() {
        var timer = -0.0002 * Date.now();
        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;
        camera.lookAt( scene.position );
        pointLight.position.x = 1500 * Math.cos( timer );
        pointLight.position.z = 1500 * Math.sin( timer );
        renderer.render( scene, camera );
    }

目标是将它放在可以滚动的页面上的 div 中 - 我已经看到它在单个全视口(viewport)页面中实现，但不是作为较长页面中的元素

Answer 1

您可以先确认是不是移动设备。 如果是:使用 DeviceOrientation ... else: 使用为鼠标编写的代码。

检查它是否是移动的:

functionisMobile() {

    if (navigator.userAgent.match(/Android/i)
        || navigator.userAgent.match(/webOS/i)
        || navigator.userAgent.match(/iPhone/i)
        || navigator.userAgent.match(/iPad/i)
        || navigator.userAgent.match(/iPod/i)
        || navigator.userAgent.match(/BlackBerry/i)
        || navigator.userAgent.match(/Windows Phone/i)
    ) {
        return true;
    }
    else {
        return false;
    }
}