three.js 怎样绑定陀螺仪

JavaScript014

three.js 怎样绑定陀螺仪,第1张

three.js 绑定陀螺仪实现例子如下：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="renderer" content="webkit"><script><div id="CanvasBody"> <input id="onDevice" type="button" value="开启陀螺仪"></div><!-- 鼠标控制 （OrbitControls.js） --><script>THREE.OrbitControls=function(object,domElement){return}event.preventDefault()event.stopPropagation()handleMouseWheel(event)scope.dispatchEvent(startEvent)scope.dispatchEvent(endEvent)}function onKeyDown(event){if(scope.enabled===false||scope.enableKeys===false||scope.enablePan===false){return}handleKeyDown(event)}function onTouchStart(event){if(scope.enabled===false){return}switch(event.touches.length){case 1:if(scope.enableRotate===false){return}handleTouchStartRotate(event)state=STATE.TOUCH_ROTATEbreakcase 2:if(scope.enableZoom===false){return}handleTouchStartDolly(event)state=STATE.TOUCH_DOLLYbreakcase 3:if(scope.enablePan===false)</script><!-- 控制陀螺仪 （DeviceOrientationControls.js） --><!-- 代码 --><script>"use strict"(function (CanvasBody, _window) {var Scene = void 0,Camera = void 0,Renderer = void 0,FpsStats = void 0,AnimateFrame = void 0,Controls = void 0,Devices = void 0var onDevice = document.getElementById("onDevice") var isDeviceing = 0/* 初始化函数 */function initScene() {Scene = new THREE.Scene() }// 初始化照相机function initCamera() {Camera = new THREE.PerspectiveCamera(60, CanvasBody.clientWidth / CanvasBody.clientHeight, 1, 3000) Camera.position.set(1, 0, 0) Camera.lookAt({ x: 200, y: 0, z: 0 }) }// 初始化渲染器function initRenderer() {Renderer = new THREE.WebGLRenderer() Renderer.setSize(CanvasBody.clientWidth, CanvasBody.clientHeight) Renderer.setClearColor(0x000000, 1) CanvasBody.appendChild(Renderer.domElement) }// 初始化监视器function initFpsStats() {FpsStats = new Stats() CanvasBody.appendChild(FpsStats.domElement) FpsStats.domElement.style.cssText = "position: absolutetop: 0left: 0" }// 初始化控制器function initControls() {Controls = new THREE.OrbitControls(Camera) }// 初始化陀螺仪function initDevices() {Devices = new THREE.DeviceOrientationControls(Camera) }/* 窗口改变事件 */function windowChange() {initCamera() Renderer.setSize(CanvasBody.clientWidth, CanvasBody.clientHeight) initDevices() initControls() }/* 控制陀螺仪 */function controlDevice(event) {if (isDeviceing === 0) {isDeviceing = 1 onDevice.value = "关闭陀螺仪" } else {isDeviceing = 0 onDevice.value = "开启陀螺仪" }}/* 动画 */function animate(time) {FpsStats.begin() Renderer.clear() isDeviceing === 0 ? Controls.update() : Devices.update() Renderer.render(Scene, Camera) FpsStats.end() AnimateFrame = requestAnimationFrame(animate) }/* 初始化 */function init() {// 初始化initScene() initCamera() initRenderer() initFpsStats() initControls() initDevices() // 初始化绑定陀螺仪Devices.connect() _window.addEventListener("resize", windowChange, false) onDevice.addEventListener("click", controlDevice, false) AnimateFrame = requestAnimationFrame(animate) }init() /* 场景内物体 */(function () {var r = Math.sqrt(5000 * 1827 / 4 / Math.PI) var texture = THREE.ImageUtils.loadTexture("http://cdn.attach.w3cfuns.com/notes/pics/201606/14/141100b7m85b4k8kb3337z.jpg", {}, function () {var geometry = new THREE.SphereGeometry(r, 100, 100) var material = new THREE.MeshLambertMaterial({map: texture,side: THREE.DoubleSide}) var mesh = new THREE.Mesh(geometry, material) Scene.add(mesh) mesh.position.set(0, 0, 0) var al = new THREE.AmbientLight(0xffffff) Scene.add(al) }) })()})(document.getElementById("CanvasBody"), window)</script></body></html>

ios系统需要 https:// 协议才能获取

目前ios最新版本 13以上需要申请用户权限：window.DeviceOrientationEvent.requestPermission()

目前发现需要使用 click / touched 等点击事件才能去触发使用，需要注意，一旦点击了确定或者拒绝，系统就会保留授权权限，不会再弹出提示框，需要重新授权就要完全退出app等程序再次进入。

在手机端上才能测试使用，在PC端浏览器中会报错！

在PC 端中使用浏览器调试