|
|
@@ -1,118 +1,99 @@
|
|
|
+let camera, scene, renderer
|
|
|
|
|
|
-
|
|
|
-let camera, scene, renderer;
|
|
|
-
|
|
|
-const shadowHasAlpha = false //阴影是否考虑光透过透明材质
|
|
|
+const shadowHasAlpha = false //阴影是否考虑光透过透明材质
|
|
|
|
|
|
const planeGeo = new THREE.PlaneBufferGeometry(1, 1)
|
|
|
-const raycaster = new THREE.Raycaster(); raycaster.linePrecision = 0;//不检测boxHelper
|
|
|
-const mouse = new THREE.Vector2();
|
|
|
+const raycaster = new THREE.Raycaster()
|
|
|
+raycaster.linePrecision = 0 //不检测boxHelper
|
|
|
+const mouse = new THREE.Vector2()
|
|
|
|
|
|
let needUpdateShadow, needsUpdateScene
|
|
|
|
|
|
var BlurShader = {
|
|
|
-
|
|
|
- uniforms: {
|
|
|
-
|
|
|
- "map": { value: null },
|
|
|
- "blurRadius": { value: new THREE.Vector2(1.0 / 512.0, 1.0 / 512.0) },
|
|
|
- 'opacity': { value: 0 }
|
|
|
- },
|
|
|
-
|
|
|
- vertexShader: [
|
|
|
-
|
|
|
- "varying vec2 vUv;",
|
|
|
-
|
|
|
- "void main() {",
|
|
|
-
|
|
|
- " vUv = uv;",
|
|
|
- " gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
|
|
|
-
|
|
|
- "}"
|
|
|
-
|
|
|
- ].join("\n"),
|
|
|
-
|
|
|
- fragmentShader: [
|
|
|
-
|
|
|
- "uniform sampler2D map;",
|
|
|
- "uniform vec2 resolution;",
|
|
|
- "uniform float blurRadius;",
|
|
|
- "uniform float opacity;",
|
|
|
- "varying vec2 vUv;",
|
|
|
-
|
|
|
- "void main() {",
|
|
|
-
|
|
|
-
|
|
|
- " vec2 offset = blurRadius / resolution; ",
|
|
|
-
|
|
|
- " vec4 sum = vec4( 0.0 );",
|
|
|
-
|
|
|
- " sum += texture2D( map, vec2( vUv.x - 4.0 * offset.x, vUv.y ) ) * 0.051;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x - 3.0 * offset.x, vUv.y ) ) * 0.0918;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x - 2.0 * offset.x, vUv.y ) ) * 0.12245;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x - 1.0 * offset.x, vUv.y ) ) * 0.1531;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x, vUv.y ) ) * 0.1633;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x + 1.0 * offset.x, vUv.y ) ) * 0.1531;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x + 2.0 * offset.x, vUv.y ) ) * 0.12245;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x + 3.0 * offset.x, vUv.y ) ) * 0.0918;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x + 4.0 * offset.x, vUv.y ) ) * 0.051;",
|
|
|
-
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y - 4.0 * offset.y ) ) * 0.051;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y - 3.0 * offset.y) ) * 0.0918;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y - 2.0 * offset.y) ) * 0.12245;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y - 1.0 * offset.y ) ) * 0.1531;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y ) ) * 0.1633;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y + 1.0 * offset.y ) ) * 0.1531;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y + 2.0 * offset.y ) ) * 0.12245;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y + 3.0 * offset.y ) ) * 0.0918;",
|
|
|
- " sum += texture2D( map, vec2( vUv.x , vUv.y + 4.0 * offset.y ) ) * 0.051;",
|
|
|
-
|
|
|
-
|
|
|
- " gl_FragColor = sum / 2.0 ;",
|
|
|
- " gl_FragColor.a *= opacity;",
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- "}"
|
|
|
-
|
|
|
- ].join("\n")
|
|
|
-
|
|
|
-};
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ uniforms: {
|
|
|
+ map: { value: null },
|
|
|
+ blurRadius: { value: new THREE.Vector2(1.0 / 512.0, 1.0 / 512.0) },
|
|
|
+ opacity: { value: 0 }
|
|
|
+ },
|
|
|
+
|
|
|
+ vertexShader: [
|
|
|
+ 'varying vec2 vUv;',
|
|
|
+
|
|
|
+ 'void main() {',
|
|
|
+
|
|
|
+ ' vUv = uv;',
|
|
|
+ ' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
|
|
|
+
|
|
|
+ '}'
|
|
|
+ ].join('\n'),
|
|
|
+
|
|
|
+ fragmentShader: [
|
|
|
+ 'uniform sampler2D map;',
|
|
|
+ 'uniform vec2 resolution;',
|
|
|
+ 'uniform float blurRadius;',
|
|
|
+ 'uniform float opacity;',
|
|
|
+ 'varying vec2 vUv;',
|
|
|
+
|
|
|
+ 'void main() {',
|
|
|
+
|
|
|
+ ' vec2 offset = blurRadius / resolution; ',
|
|
|
+
|
|
|
+ ' vec4 sum = vec4( 0.0 );',
|
|
|
+
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x - 4.0 * offset.x, vUv.y ) ) * 0.051;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x - 3.0 * offset.x, vUv.y ) ) * 0.0918;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x - 2.0 * offset.x, vUv.y ) ) * 0.12245;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x - 1.0 * offset.x, vUv.y ) ) * 0.1531;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x, vUv.y ) ) * 0.1633;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x + 1.0 * offset.x, vUv.y ) ) * 0.1531;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x + 2.0 * offset.x, vUv.y ) ) * 0.12245;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x + 3.0 * offset.x, vUv.y ) ) * 0.0918;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x + 4.0 * offset.x, vUv.y ) ) * 0.051;',
|
|
|
+
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y - 4.0 * offset.y ) ) * 0.051;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y - 3.0 * offset.y) ) * 0.0918;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y - 2.0 * offset.y) ) * 0.12245;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y - 1.0 * offset.y ) ) * 0.1531;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y ) ) * 0.1633;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y + 1.0 * offset.y ) ) * 0.1531;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y + 2.0 * offset.y ) ) * 0.12245;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y + 3.0 * offset.y ) ) * 0.0918;',
|
|
|
+ ' sum += texture2D( map, vec2( vUv.x , vUv.y + 4.0 * offset.y ) ) * 0.051;',
|
|
|
+
|
|
|
+ ' gl_FragColor = sum / 2.0 ;',
|
|
|
+ ' gl_FragColor.a *= opacity;',
|
|
|
+
|
|
|
+ '}'
|
|
|
+ ].join('\n')
|
|
|
+}
|
|
|
|
|
|
var Viewer = function (index, dom) {
|
|
|
- this.index = index;
|
|
|
- this.dom = dom
|
|
|
- this.camera = new THREE.PerspectiveCamera(setting.vfov);
|
|
|
- this.camera.position.set(0, 1, -1.5);
|
|
|
- this.control = new PanoramaControls(this.camera, this.dom)
|
|
|
- this.control.latMin = this.control.latMax = 0
|
|
|
-
|
|
|
-
|
|
|
- //this.control.target.set(0,-1,0)
|
|
|
- this.setRenderer()
|
|
|
-
|
|
|
- this.scene = new THREE.Scene();
|
|
|
- this.scene.background = common.loadTexture("./img/background.jpg")
|
|
|
- this.pointerDownPos
|
|
|
- this.active = false;
|
|
|
- this.antialias = true;
|
|
|
- this.clickTime = new Date().getTime();
|
|
|
- this.updateClock = new THREE.Clock();
|
|
|
-
|
|
|
-
|
|
|
- this.cardGroup = new THREE.Object3D();
|
|
|
- this.scene.add(this.cardGroup);
|
|
|
- this.cardGroup.name = "cardGroup";
|
|
|
- this.autoMove = true
|
|
|
-
|
|
|
-
|
|
|
- this.bindEvents()
|
|
|
- this.preLoadCards()
|
|
|
- this.animate()
|
|
|
+ this.index = index
|
|
|
+ this.dom = dom
|
|
|
+ this.camera = new THREE.PerspectiveCamera(setting.vfov)
|
|
|
+ this.camera.position.set(0, 1, -1.5)
|
|
|
+ this.control = new PanoramaControls(this.camera, this.dom)
|
|
|
+ this.control.latMin = this.control.latMax = 0
|
|
|
+
|
|
|
+ //this.control.target.set(0,-1,0)
|
|
|
+ this.setRenderer()
|
|
|
+
|
|
|
+ this.scene = new THREE.Scene()
|
|
|
+ this.scene.background = common.loadTexture('./assets/background.jpg')
|
|
|
+ this.pointerDownPos
|
|
|
+ this.active = false
|
|
|
+ this.antialias = true
|
|
|
+ this.clickTime = new Date().getTime()
|
|
|
+ this.updateClock = new THREE.Clock()
|
|
|
+
|
|
|
+ this.cardGroup = new THREE.Object3D()
|
|
|
+ this.scene.add(this.cardGroup)
|
|
|
+ this.cardGroup.name = 'cardGroup'
|
|
|
+ this.autoMove = true
|
|
|
+
|
|
|
+ this.bindEvents()
|
|
|
+ this.preLoadCards()
|
|
|
+ this.animate()
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
@@ -121,279 +102,270 @@ var Viewer = function (index, dom) {
|
|
|
*/
|
|
|
|
|
|
Viewer.prototype.preLoadCards = function () {
|
|
|
-
|
|
|
- let i = 10
|
|
|
- while (i-- > 0) {
|
|
|
- this.addCard(true)
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- let add = () => {
|
|
|
- if (document.hidden) return
|
|
|
- this.addCard()
|
|
|
- setTimeout(add, 40000 * Math.random() * this.getDensity()) //当前视野中密度越小 添加越频繁
|
|
|
- }
|
|
|
- add()
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- document.addEventListener('visibilitychange', (e) => {
|
|
|
- if (!document.hidden) add()
|
|
|
- console.log('document.hidden', document.hidden)
|
|
|
- })
|
|
|
-
|
|
|
+ let i = 10
|
|
|
+ while (i-- > 0) {
|
|
|
+ this.addCard(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ let add = () => {
|
|
|
+ if (document.hidden) return
|
|
|
+ this.addCard()
|
|
|
+ setTimeout(add, 40000 * Math.random() * this.getDensity()) //当前视野中密度越小 添加越频繁
|
|
|
+ }
|
|
|
+ add()
|
|
|
+
|
|
|
+ document.addEventListener('visibilitychange', e => {
|
|
|
+ if (!document.hidden) add()
|
|
|
+ console.log('document.hidden', document.hidden)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
Viewer.prototype.getDensity = function () {
|
|
|
+ let frustumMatrix = new THREE.Matrix4()
|
|
|
+ frustumMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse)
|
|
|
|
|
|
+ let frustum = new THREE.Frustum()
|
|
|
+ frustum.setFromProjectionMatrix(frustumMatrix)
|
|
|
|
|
|
- let frustumMatrix = new THREE.Matrix4()
|
|
|
- frustumMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse)
|
|
|
-
|
|
|
- let frustum = new THREE.Frustum();
|
|
|
- frustum.setFromProjectionMatrix(frustumMatrix)
|
|
|
-
|
|
|
-
|
|
|
- let count = this.cardGroup.children.filter(card => {
|
|
|
- return frustum.containsPoint(card.position)
|
|
|
- }).length
|
|
|
-
|
|
|
+ let count = this.cardGroup.children.filter(card => {
|
|
|
+ return frustum.containsPoint(card.position)
|
|
|
+ }).length
|
|
|
|
|
|
- let density = count / (this.renderer.domElement.width * this.renderer.domElement.height) * 1000
|
|
|
+ let density = (count / (this.renderer.domElement.width * this.renderer.domElement.height)) * 1000
|
|
|
|
|
|
- return density
|
|
|
+ return density
|
|
|
}
|
|
|
|
|
|
-
|
|
|
Viewer.prototype.addCard = function (around) {
|
|
|
-
|
|
|
- let cardIndex = Math.floor(cardNames.length * Math.random())
|
|
|
- common.loadTexture("./assets/" + cardNames[cardIndex].img, (map) => {
|
|
|
-
|
|
|
- let card = new THREE.Mesh(planeGeo, new THREE.ShaderMaterial({
|
|
|
- uniforms: {
|
|
|
- map: { value: map },
|
|
|
- resolution: { value: new THREE.Vector2(this.renderer.domElement.width, this.renderer.domElement.height) },
|
|
|
- blurRadius: { value: 0 },//像素
|
|
|
- opacity: { value: 0 }
|
|
|
- },
|
|
|
- vertexShader: BlurShader.vertexShader,
|
|
|
- fragmentShader: BlurShader.fragmentShader,
|
|
|
- transparent: true, side: 2
|
|
|
- }))
|
|
|
-
|
|
|
- Object.defineProperty(card.material, 'opacity', {
|
|
|
- get: function () {
|
|
|
- return card.material.uniforms.opacity.value
|
|
|
- },
|
|
|
- set: function (e) {
|
|
|
- card.material.uniforms.opacity.value = e
|
|
|
-
|
|
|
- card.material.uniforms.blurRadius.value = math.linearClamp(e, [0, 0.4], [40, 0])
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- let direction, far = setting.cards.far
|
|
|
- if (around) {//在四周所有方向都可生成，在一开始时需要
|
|
|
- let n = 0.6//范围0-1 越大越可能接近相机
|
|
|
- far = far * (1 - n * Math.random()) //靠近一点
|
|
|
- direction = new THREE.Vector3(0, 0, -1).applyEuler(new THREE.Euler(0, Math.PI * 2 * Math.random(), 0))
|
|
|
- } else {//仅在相机前方生成，因为相机往这个方向移动，最前方空缺
|
|
|
-
|
|
|
-
|
|
|
- direction = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion).applyEuler(new THREE.Euler(0, this.camera.hfov * (Math.random() - 0.5), 0))
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- let h = (Math.random() * 2 - 1) * setting.cards.highest * 0.8 // *0.8是因为靠近后就会飞出视线
|
|
|
- card.position.copy(this.camera.position).add(direction.add(new THREE.Vector3(0, h, 0)).multiplyScalar(far))
|
|
|
-
|
|
|
- card.scale.set(map.image.width / 500, map.image.height / 500, 1)
|
|
|
- this.cardGroup.add(card)
|
|
|
-
|
|
|
-
|
|
|
- card.transition = transitions.start(lerp.property(card.material, 'opacity', 1, (e) => {
|
|
|
- //console.log(e, card.uuid)
|
|
|
-
|
|
|
- }), setting.cards.fadeInDur);
|
|
|
-
|
|
|
-
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-Viewer.prototype.removeCards = function () {//移除超过bound的卡
|
|
|
- let needRemove = this.cardGroup.children.filter(card => {
|
|
|
- if (card.disToCam > setting.cards.far) {
|
|
|
- card.material.dispose()
|
|
|
- transitions.cancel(card.transition)
|
|
|
- //console.log('remove一张卡')
|
|
|
- return true
|
|
|
- }
|
|
|
+ let cardIndex = Math.floor(cardNames.length * Math.random())
|
|
|
+ common.loadTexture('./assets/' + cardNames[cardIndex].img, map => {
|
|
|
+ /* let card = new THREE.Mesh(planeGeo, new THREE.MeshBasicMaterial({
|
|
|
+ map,
|
|
|
+ transparent:true, opacity:0,side:2
|
|
|
+ })) */
|
|
|
+
|
|
|
+ let card = new THREE.Mesh(
|
|
|
+ planeGeo,
|
|
|
+ new THREE.ShaderMaterial({
|
|
|
+ uniforms: {
|
|
|
+ map: { value: map, id: cardNames[cardIndex].id, name: cardNames[cardIndex].name },
|
|
|
+ resolution: {
|
|
|
+ value: new THREE.Vector2(
|
|
|
+ this.renderer.domElement.width,
|
|
|
+ this.renderer.domElement.height
|
|
|
+ )
|
|
|
+ },
|
|
|
+ blurRadius: { value: 0 }, //像素
|
|
|
+ opacity: { value: 0 }
|
|
|
+ },
|
|
|
+ vertexShader: BlurShader.vertexShader,
|
|
|
+ fragmentShader: BlurShader.fragmentShader,
|
|
|
+ transparent: true,
|
|
|
+ side: 2
|
|
|
+ })
|
|
|
+ )
|
|
|
+
|
|
|
+ Object.defineProperty(card.material, 'opacity', {
|
|
|
+ get: function () {
|
|
|
+ return card.material.uniforms.opacity.value
|
|
|
+ },
|
|
|
+ set: function (e) {
|
|
|
+ card.material.uniforms.opacity.value = e
|
|
|
+
|
|
|
+ card.material.uniforms.blurRadius.value = math.linearClamp(e, [0, 0.4], [40, 0])
|
|
|
+ }
|
|
|
})
|
|
|
- needRemove.forEach(card => card.parent.remove(card))
|
|
|
- //needRemove.length>0 && console.log('当前存在卡数', this.cardGroup.children.length)
|
|
|
-}
|
|
|
-
|
|
|
|
|
|
-Viewer.prototype.update = function (deltaTime) {//绘制的时候同时更新
|
|
|
-
|
|
|
- this.setSize()
|
|
|
- this.control.update(deltaTime)
|
|
|
- transitions.update(deltaTime)
|
|
|
+ let direction,
|
|
|
+ far = setting.cards.far
|
|
|
+ if (around) {
|
|
|
+ //在四周所有方向都可生成，在一开始时需要
|
|
|
+ let n = 0.6 //范围0-1 越大越可能接近相机
|
|
|
+ far = far * (1 - n * Math.random()) //靠近一点
|
|
|
+ direction = new THREE.Vector3(0, 0, -1).applyEuler(
|
|
|
+ new THREE.Euler(0, Math.PI * 2 * Math.random(), 0)
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ //仅在相机前方生成，因为相机往这个方向移动，最前方空缺
|
|
|
|
|
|
- if (this.autoMove) {
|
|
|
- let direction = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion)
|
|
|
- let moveSpeed = 0.8
|
|
|
- this.camera.position.add(direction.multiplyScalar(deltaTime * moveSpeed))
|
|
|
+ direction = new THREE.Vector3(0, 0, -1)
|
|
|
+ .applyQuaternion(this.camera.quaternion)
|
|
|
+ .applyEuler(new THREE.Euler(0, this.camera.hfov * (Math.random() - 0.5), 0))
|
|
|
}
|
|
|
- this.cardGroup.children.forEach(card => {
|
|
|
- card.quaternion.copy(this.camera.quaternion)
|
|
|
-
|
|
|
- let dis = card.position.clone().setY(0).distanceTo(this.camera.position.clone().setY(0))
|
|
|
- if (!card.transition.running) {
|
|
|
- card.material.opacity = math.linearClamp(dis, [setting.cards.near, setting.cards.beginFadeNear], [0, 1])
|
|
|
- }
|
|
|
-
|
|
|
- card.disToCam = dis
|
|
|
- })
|
|
|
- this.removeCards()
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
|
|
|
+ let h = (Math.random() * 2 - 1) * setting.cards.highest * 0.8 // *0.8是因为靠近后就会飞出视线
|
|
|
+ card.position
|
|
|
+ .copy(this.camera.position)
|
|
|
+ .add(direction.add(new THREE.Vector3(0, h, 0)).multiplyScalar(far))
|
|
|
+
|
|
|
+ card.scale.set(map.image.width / 500, map.image.height / 500, 1)
|
|
|
+ this.cardGroup.add(card)
|
|
|
+
|
|
|
+ card.transition = transitions.start(
|
|
|
+ lerp.property(card.material, 'opacity', 1, e => {
|
|
|
+ //console.log(e, card.uuid)
|
|
|
+ }),
|
|
|
+ setting.cards.fadeInDur
|
|
|
+ )
|
|
|
+ })
|
|
|
+}
|
|
|
|
|
|
- var needsUpdate = 1;
|
|
|
- if (needsUpdate) {
|
|
|
- this.renderer.autoClear = true
|
|
|
- this.renderer.render(this.scene, this.camera)
|
|
|
+Viewer.prototype.removeCards = function () {
|
|
|
+ //移除超过bound的卡
|
|
|
+ let needRemove = this.cardGroup.children.filter(card => {
|
|
|
+ if (card.disToCam > setting.cards.far) {
|
|
|
+ card.material.dispose()
|
|
|
+ transitions.cancel(card.transition)
|
|
|
+ //console.log('remove一张卡')
|
|
|
+ return true
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+ })
|
|
|
+ needRemove.forEach(card => card.parent.remove(card))
|
|
|
+ //needRemove.length>0 && console.log('当前存在卡数', this.cardGroup.children.length)
|
|
|
}
|
|
|
|
|
|
+Viewer.prototype.update = function (deltaTime) {
|
|
|
+ //绘制的时候同时更新
|
|
|
+
|
|
|
+ this.setSize()
|
|
|
+ this.control.update(deltaTime)
|
|
|
+ transitions.update(deltaTime)
|
|
|
+
|
|
|
+ if (this.autoMove) {
|
|
|
+ let direction = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion)
|
|
|
+ let moveSpeed = 0.8
|
|
|
+ this.camera.position.add(direction.multiplyScalar(deltaTime * moveSpeed))
|
|
|
+ }
|
|
|
+ this.cardGroup.children.forEach(card => {
|
|
|
+ card.quaternion.copy(this.camera.quaternion)
|
|
|
+
|
|
|
+ let dis = card.position.clone().setY(0).distanceTo(this.camera.position.clone().setY(0))
|
|
|
+ if (!card.transition.running) {
|
|
|
+ card.material.opacity = math.linearClamp(
|
|
|
+ dis,
|
|
|
+ [setting.cards.near, setting.cards.beginFadeNear],
|
|
|
+ [0, 1]
|
|
|
+ )
|
|
|
+ }
|
|
|
|
|
|
+ card.disToCam = dis
|
|
|
+ })
|
|
|
+ this.removeCards()
|
|
|
|
|
|
+ var needsUpdate = 1
|
|
|
+ if (needsUpdate) {
|
|
|
+ this.renderer.autoClear = true
|
|
|
+ this.renderer.render(this.scene, this.camera)
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
Viewer.prototype.bindEvents = function () {
|
|
|
-
|
|
|
- this.renderer.domElement.addEventListener('pointermove', this.onPointerMove.bind(this), false);
|
|
|
- this.renderer.domElement.addEventListener('pointerdown', this.onPointerDown.bind(this), false);
|
|
|
- this.renderer.domElement.addEventListener('pointerup', this.onPointerUp.bind(this), false);
|
|
|
-
|
|
|
+ this.renderer.domElement.addEventListener('pointermove', this.onPointerMove.bind(this), false)
|
|
|
+ this.renderer.domElement.addEventListener('pointerdown', this.onPointerDown.bind(this), false)
|
|
|
+ this.renderer.domElement.addEventListener('pointerup', this.onPointerUp.bind(this), false)
|
|
|
}
|
|
|
|
|
|
Viewer.prototype.setRenderer = function () {
|
|
|
- try {
|
|
|
- this.renderer = new THREE.WebGLRenderer({ canvas: $(this.dom).find("canvas")[0], antialias: true }),
|
|
|
- this.renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1),
|
|
|
- this.renderer.autoClear = false
|
|
|
- this.renderer.setClearColor(0xffffff, 1)
|
|
|
- console.log("ContextCreated")
|
|
|
- //this.emit(Events.ContextCreated)
|
|
|
- } catch (e) {
|
|
|
- console.error("Unable to create a WebGL rendering context")
|
|
|
- }
|
|
|
+ try {
|
|
|
+ ;((this.renderer = new THREE.WebGLRenderer({
|
|
|
+ canvas: $(this.dom).find('canvas')[0],
|
|
|
+ antialias: true
|
|
|
+ })),
|
|
|
+ this.renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1),
|
|
|
+ (this.renderer.autoClear = false))
|
|
|
+ this.renderer.setClearColor(0xffffff, 1)
|
|
|
+ console.log('ContextCreated')
|
|
|
+ //this.emit(Events.ContextCreated)
|
|
|
+ } catch (e) {
|
|
|
+ console.error('Unable to create a WebGL rendering context')
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-Viewer.prototype.hasChanged = function () {//判断画面是否改变了，改变后需要更新一些东西
|
|
|
- var copy = function () {
|
|
|
- this.previousState = {
|
|
|
- projectionMatrix: this.camera.projectionMatrix.clone(),//worldMatrix在control时归零了所以不用了吧，用position和qua也一样
|
|
|
- position: this.camera.position.clone(),
|
|
|
- quaternion: this.camera.quaternion.clone(),
|
|
|
- //mouse: this.mouse.clone(),
|
|
|
- fov: this.camera.fov
|
|
|
- };
|
|
|
- }.bind(this)
|
|
|
-
|
|
|
-
|
|
|
- if (!this.previousState) {
|
|
|
- copy()
|
|
|
- return { cameraChanged: !0, changed: !0 };
|
|
|
+Viewer.prototype.hasChanged = function () {
|
|
|
+ //判断画面是否改变了，改变后需要更新一些东西
|
|
|
+ var copy = function () {
|
|
|
+ this.previousState = {
|
|
|
+ projectionMatrix: this.camera.projectionMatrix.clone(), //worldMatrix在control时归零了所以不用了吧，用position和qua也一样
|
|
|
+ position: this.camera.position.clone(),
|
|
|
+ quaternion: this.camera.quaternion.clone(),
|
|
|
+ //mouse: this.mouse.clone(),
|
|
|
+ fov: this.camera.fov
|
|
|
}
|
|
|
- var cameraChanged =
|
|
|
- !this.camera.projectionMatrix.equals(this.previousState.projectionMatrix) ||
|
|
|
- !this.camera.position.equals(this.previousState.position) ||
|
|
|
- !this.camera.quaternion.equals(this.previousState.quaternion)
|
|
|
-
|
|
|
-
|
|
|
- var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)
|
|
|
+ }.bind(this)
|
|
|
|
|
|
+ if (!this.previousState) {
|
|
|
copy()
|
|
|
+ return { cameraChanged: !0, changed: !0 }
|
|
|
+ }
|
|
|
+ var cameraChanged =
|
|
|
+ !this.camera.projectionMatrix.equals(this.previousState.projectionMatrix) ||
|
|
|
+ !this.camera.position.equals(this.previousState.position) ||
|
|
|
+ !this.camera.quaternion.equals(this.previousState.quaternion)
|
|
|
|
|
|
- return { cameraChanged, changed };
|
|
|
-}
|
|
|
-
|
|
|
-Viewer.prototype.setSize = function () {
|
|
|
- var w, h, pixelRatio;
|
|
|
- return function () {
|
|
|
- if (w != this.dom.clientWidth || h != this.dom.clientHeight || pixelRatio != window.devicePixelRatio) {
|
|
|
- w = this.dom.clientWidth;
|
|
|
- h = this.dom.clientHeight;
|
|
|
-
|
|
|
- pixelRatio = window.devicePixelRatio;
|
|
|
-
|
|
|
- this.camera.aspect = w / h;
|
|
|
- this.camera.updateProjectionMatrix();
|
|
|
-
|
|
|
-
|
|
|
- this.renderer.setSize(w, h, false, pixelRatio);
|
|
|
+ var changed = cameraChanged //|| !this.mouse.equals(this.previousState.mouse)
|
|
|
|
|
|
- this.camera.hfov = cameraLight.getHFOVForCamera(this.camera, true)
|
|
|
+ copy()
|
|
|
|
|
|
+ return { cameraChanged, changed }
|
|
|
+}
|
|
|
|
|
|
- this.cardGroup.children.forEach(card =>
|
|
|
- card.material.uniforms.resolution.value.set(w, h)
|
|
|
- )
|
|
|
- }
|
|
|
- }
|
|
|
-}()
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-Viewer.prototype.animate = function () {
|
|
|
- var deltaTime = Math.min(1, this.updateClock.getDelta());
|
|
|
- this.update(deltaTime)
|
|
|
- //bus.emit('player/position/change', {x:this.position.x, y:this.position.z, lon: this.cameraControls.controls.panorama.lon})
|
|
|
-
|
|
|
- window.requestAnimationFrame(this.animate.bind(this));
|
|
|
-},
|
|
|
-
|
|
|
+Viewer.prototype.setSize = (function () {
|
|
|
+ var w, h, pixelRatio
|
|
|
+ return function () {
|
|
|
+ if (
|
|
|
+ w != this.dom.clientWidth ||
|
|
|
+ h != this.dom.clientHeight ||
|
|
|
+ pixelRatio != window.devicePixelRatio
|
|
|
+ ) {
|
|
|
+ w = this.dom.clientWidth
|
|
|
+ h = this.dom.clientHeight
|
|
|
|
|
|
- Viewer.prototype.onPointerMove = function (event) {
|
|
|
+ pixelRatio = window.devicePixelRatio
|
|
|
|
|
|
- if (event.isPrimary === false) return;
|
|
|
+ this.camera.aspect = w / h
|
|
|
+ this.camera.updateProjectionMatrix()
|
|
|
|
|
|
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
|
- mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
|
|
+ this.renderer.setSize(w, h, false, pixelRatio)
|
|
|
|
|
|
- if (!this.pointerDownPos) this.checkIntersection();
|
|
|
+ this.camera.hfov = cameraLight.getHFOVForCamera(this.camera, true)
|
|
|
|
|
|
+ this.cardGroup.children.forEach(card => card.material.uniforms.resolution.value.set(w, h))
|
|
|
}
|
|
|
+ }
|
|
|
+})()
|
|
|
+;((Viewer.prototype.animate = function () {
|
|
|
+ var deltaTime = Math.min(1, this.updateClock.getDelta())
|
|
|
+ this.update(deltaTime)
|
|
|
+ //bus.emit('player/position/change', {x:this.position.x, y:this.position.z, lon: this.cameraControls.controls.panorama.lon})
|
|
|
+
|
|
|
+ window.requestAnimationFrame(this.animate.bind(this))
|
|
|
+}),
|
|
|
+ (Viewer.prototype.onPointerMove = function (event) {
|
|
|
+ if (event.isPrimary === false) return
|
|
|
+
|
|
|
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1
|
|
|
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
|
|
|
+
|
|
|
+ if (!this.pointerDownPos) this.checkIntersection()
|
|
|
+ }))
|
|
|
Viewer.prototype.onPointerDown = function (event) {
|
|
|
-
|
|
|
- if (event.isPrimary === false) return;
|
|
|
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
|
- mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
|
|
- this.pointerDownPos = mouse.clone()
|
|
|
- this.pointerDownTime = Date.now()
|
|
|
+ if (event.isPrimary === false) return
|
|
|
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1
|
|
|
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
|
|
|
+ this.pointerDownPos = mouse.clone()
|
|
|
+ this.pointerDownTime = Date.now()
|
|
|
}
|
|
|
|
|
|
Viewer.prototype.onPointerUp = function (event) {
|
|
|
-
|
|
|
- if (event.isPrimary === false) return;
|
|
|
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
|
|
|
- mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
|
|
|
- let now = Date.now()
|
|
|
- if (mouse.distanceTo(this.pointerDownPos) < 0.006 && now - this.pointerDownTime < 1000) {//click
|
|
|
-
|
|
|
- //doubleClick
|
|
|
- /* var time = new Date().getTime();
|
|
|
+ if (event.isPrimary === false) return
|
|
|
+ mouse.x = (event.clientX / window.innerWidth) * 2 - 1
|
|
|
+ mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
|
|
|
+ let now = Date.now()
|
|
|
+ if (mouse.distanceTo(this.pointerDownPos) < 0.006 && now - this.pointerDownTime < 1000) {
|
|
|
+ //click
|
|
|
+
|
|
|
+ //doubleClick
|
|
|
+ /* var time = new Date().getTime();
|
|
|
if(time - this.clickTime < 300){
|
|
|
if(this.intersects.length){
|
|
|
console.log('doubleClick');
|
|
|
@@ -401,67 +373,54 @@ Viewer.prototype.onPointerUp = function (event) {
|
|
|
transitions.start(lerp.vector(this.control.target, this.intersects[0].point), 600, null, 0 , easing.easeInOutQuad, null, Transitions.doubleClick);
|
|
|
}
|
|
|
} */
|
|
|
- if (this.hoveredObject) {
|
|
|
- this.dispatchEvent({ type: 'clickObject', imgName: this.hoveredObject.material.uniforms.map.value.image.src.split('/').pop() })
|
|
|
- }
|
|
|
+ if (this.hoveredObject) {
|
|
|
+ this.dispatchEvent({
|
|
|
+ type: 'clickObject',
|
|
|
+ id: this.hoveredObject.material.uniforms.map.id
|
|
|
+ })
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- this.pointerDownPos = null
|
|
|
+ this.pointerDownPos = null
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
Viewer.prototype.checkIntersection = function () {
|
|
|
-
|
|
|
- raycaster.setFromCamera(mouse, this.camera);
|
|
|
- raycaster.near = 2
|
|
|
- const intersects = raycaster.intersectObject(this.cardGroup, true);
|
|
|
- var recover = () => {
|
|
|
- if (this.hoveredObject) {
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+ raycaster.setFromCamera(mouse, this.camera)
|
|
|
+ raycaster.near = 2
|
|
|
+ const intersects = raycaster.intersectObject(this.cardGroup, true)
|
|
|
+ var recover = () => {
|
|
|
+ if (this.hoveredObject) {
|
|
|
}
|
|
|
- if (intersects.length > 0) {
|
|
|
-
|
|
|
- const hoveredObject = intersects[0].object;
|
|
|
- if (this.hoveredObject != hoveredObject) {
|
|
|
- recover()
|
|
|
- this.dispatchEvent({ type: "hoverObject", imgName: hoveredObject.material.uniforms.map.value.image.src.split('/').pop() })
|
|
|
- this.hoveredObject = hoveredObject;
|
|
|
- this.dom.style.cursor = 'pointer'
|
|
|
-
|
|
|
- }
|
|
|
- } else {
|
|
|
- recover()
|
|
|
- this.dispatchEvent({ type: "mouseoutObject" })
|
|
|
- this.dom.style.cursor = ''
|
|
|
- this.hoveredObject = null
|
|
|
+ }
|
|
|
+ if (intersects.length > 0) {
|
|
|
+ const hoveredObject = intersects[0].object
|
|
|
+ if (this.hoveredObject != hoveredObject) {
|
|
|
+ recover()
|
|
|
+
|
|
|
+ this.dispatchEvent({
|
|
|
+ type: 'hoverObject',
|
|
|
+ name: hoveredObject.material.uniforms.map.name
|
|
|
+ })
|
|
|
+ this.hoveredObject = hoveredObject
|
|
|
+ this.dom.style.cursor = 'pointer'
|
|
|
}
|
|
|
- this.intersects = intersects;
|
|
|
+ } else {
|
|
|
+ recover()
|
|
|
+ this.dispatchEvent({ type: 'mouseoutObject' })
|
|
|
+ this.dom.style.cursor = ''
|
|
|
+ this.hoveredObject = null
|
|
|
+ }
|
|
|
+ this.intersects = intersects
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-Viewer.prototype.setAutoMove = function (state) {//设置相机飞行状态
|
|
|
- this.autoMove = !!state
|
|
|
-
|
|
|
+Viewer.prototype.setAutoMove = function (state) {
|
|
|
+ //设置相机飞行状态
|
|
|
+ this.autoMove = !!state
|
|
|
}
|
|
|
|
|
|
-Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype);
|
|
|
+Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype)
|
|
|
|
|
|
//============
|
|
|
|
|
|
-var startTime = new Date().getTime();
|
|
|
-var viewer = new Viewer(0, $("#player")[0])
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+var startTime = new Date().getTime()
|
|
|
+var viewer = new Viewer(0, $('#player')[0])
|
