html调用手机陀螺仪,前端基于THREE.js的3D全景，支持鼠标控制和手机陀螺仪的切换...-CSDN博客

/p>

‘use strict’

;(function(_window) {

var navigatorUserAgent = navigator.userAgent

var iPhone = navigatorUserAgent.indexOf(‘iPhone’)

if (iPhone > -1) {

var dpr = Number(window.devicePixelRatio),

one_dpr = 1 / dpr

} else {

var dpr = 1,

one_dpr = 1

}

var writeText =

‘

one_dpr +

‘,maximum-scale=’ +

one_dpr +

‘,minimum-scale=’ +

one_dpr +

‘,user-scalable=no”>\n

dpr +

‘”>’

document.write(writeText)

var

var F0 = 75

var getFontSize = function getFontSize() {

var windowWidth = window.innerWidth

}

getFontSize()

_window.addEventListener(‘resize’, getFontSize, false)

})(window)

body {

margin: 0;

}

html,

body,

#CanvasBody {

width: 100%;

height: 100%;

overflow: hidden;

}

#CanvasBody {

position: relative;

}

#onDevice {

position: absolute;

bottom: 0;

right: 0;

z-index: 2;

padding: 12px 18px;

font-size: 20px;

border: 1px solid #ddd;

background-color: #fff;

cursor: pointer;

-webkit-appearance: none;

}

THREE.OrbitControls = function(object, domElement) {

this.object = object

this.domElement =

domElement !== undefined ? domElement : document

this.enabled = true

this.target = new THREE.Vector3()

this.minDistance = 0

this.maxDistance = Infinity

this.minZoom = 0

this.maxZoom = Infinity

this.minPolarAngle = 0

this.maxPolarAngle = Math.PI

this.minAzimuthAngle = -Infinity

this.maxAzimuthAngle = Infinity

this.enableDamping = false

this.dampingFactor = 0.25

this.enableZoom = true

this.zoomSpeed = 1.0

this.enableRotate = true

this.rotateSpeed = 1.0

this.enablePan = true

this.keyPanSpeed = 7.0

this.autoRotate = false

this.autoRotateSpeed = 2.0

this.enableKeys = true

this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 }

this.mouseButtons = {

ORBIT: THREE.MOUSE.LEFT,

ZOOM: THREE.MOUSE.MIDDLE,

PAN: THREE.MOUSE.RIGHT,

}

this.target0 = this.target.clone()

this.position0 = this.object.position.clone()

this.zoom0 = this.object.zoom

this.getPolarAngle = function() {

return phi

}

this.getAzimuthalAngle = function() {

return theta

}

this.reset = function() {

scope.target.copy(scope.target0)

scope.object.position.copy(scope.position0)

scope.object.zoom = scope.zoom0

scope.object.updateProjectionMatrix()

scope.dispatchEvent(changeEvent)

scope.update()

state = STATE.NONE

}

this.update = (function() {

var offset = new THREE.Vector3()

var quat = new THREE.Quaternion().setFromUnitVectors(

object.up,

new THREE.Vector3(0, 1, 0),

)

var quatInverse = quat.clone().inverse()

var lastPosition = new THREE.Vector3()

var lastQuaternion = new THREE.Quaternion()

return function() {

var position = scope.object.position

offset.copy(position).sub(scope.target)

offset.applyQuaternion(quat)

spherical.setFromVector3(offset)

if (scope.autoRotate && state === STATE.NONE) {

rotateLeft(getAutoRotationAngle())

}

spherical.theta += sphericalDelta.theta

spherical.phi += sphericalDelta.phi

spherical.theta = Math.max(

scope.minAzimuthAngle,

Math.min(scope.maxAzimuthAngle, spherical.theta),

)

spherical.phi = Math.max(

scope.minPolarAngle,

Math.min(scope.maxPolarAngle, spherical.phi),

)

spherical.makeSafe()

spherical.radius *= scale

spherical.radius = Math.max(

scope.minDistance,

Math.min(scope.maxDistance, spherical.radius),

)

scope.target.add(panOffset)

offset.setFromSpherical(spherical)

offset.applyQuaternion(quatInverse)

position.copy(scope.target).add(offset)

scope.object.lookAt(scope.target)

if (scope.enableDamping === true) {

sphericalDelta.theta *= 1 – scope.dampingFactor

sphericalDelta.phi *= 1 – scope.dampingFactor

} else {

sphericalDelta.set(0, 0, 0)

}

scale = 1

panOffset.set(0, 0, 0)

if (

zoomChanged ||

lastPosition.distanceToSquared(

scope.object.position,

) > EPS ||

8 *

(1 –

lastQuaternion.dot(

scope.object.quaternion,

)) >

EPS

) {

scope.dispatchEvent(changeEvent)

lastPosition.copy(scope.object.position)

lastQuaternion.copy(scope.object.quaternion)

zoomChanged = false

return true

}

return false

}

})()

this.dispose = function() {