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にそれを置くことです - 私は、これは単一のフルビューポートのページに実装ではなく見てきました長いページの要素として

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; 
    } 
}