//参考 https://artsandculture.google.com/experiment/TAEPZtXK2s139g let camera, scene, renderer; const shadowHasAlpha = false //阴影是否考虑光透过透明材质 const planeGeo = new THREE.PlaneBufferGeometry(1, 1) const raycaster = new THREE.Raycaster(); raycaster.linePrecision = 0;//不检测boxHelper const mouse = new THREE.Vector2(); let needUpdateShadow, needsUpdateScene const Density = 2.5 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") }; var isMobile = (function() { var e = navigator.userAgent || navigator.vendor || window.opera return ( /(android|bb\d+|meego).+mobile|android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test( e ) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test( e.substr(0, 4) ) ) })() 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("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() } /* 同一时间，视线范围不能同时出现两张卡。也就是分布要根据视角范围变化，但是如果浏览器变宽导致的出现两张卡不算。 */ Viewer.prototype.preLoadCards = function () { let i = 10 while (i-- > 0) { this.addCard(true) } let add = () => { if (document.hidden) return let count = this.getCount() let hopeCount = Density * (this.renderer.domElement.clientWidth * this.renderer.domElement.clientHeight) / 100000 if(count < hopeCount){ let ratio = count / hopeCount if(Math.random() > ratio){ this.addCard() } } setTimeout(add, 100/* 40000 * Math.random() * this.getDensity() */) //当前视野中密度越小 添加越频繁 } add() document.addEventListener('visibilitychange', (e) => { if (!document.hidden) add() console.log('document.hidden', document.hidden) }) } Viewer.prototype.getCount = function () { 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 return count } Viewer.prototype.addCard = function (around) { let cardIndex = Math.floor(cardNames.length * Math.random()) common.loadTexture(cardNames[cardIndex], (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 }, 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(8)) 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 * 1.5) { 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); } 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) this.renderer.shadowMap.enabled = true this.renderer.shadowMap.type = THREE.PCFSoftShadowMap 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 }; } 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) copy() 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); 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, force) { if (event.isPrimary === false) return; mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = - (event.clientY / window.innerHeight) * 2 + 1; if (!this.pointerDownPos || force) 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() } 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(time - this.clickTime < 300){ if(this.intersects.length){ console.log('doubleClick'); transitions.cancelById(0) transitions.start(lerp.vector(this.control.target, this.intersects[0].point), 600, null, 0 , easing.easeInOutQuad, null, Transitions.doubleClick); } } */ if(isMobile){ this.onPointerMove(event,true) } if (this.hoveredObject) { this.dispatchEvent({ type: 'clickObject', imgName: this.hoveredObject.material.uniforms.map.value.image.src.split('/').pop() }) } } 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) { } } 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 } this.intersects = intersects; } Viewer.prototype.setAutoMove = function (state) {//设置相机飞行状态 this.autoMove = !!state } Object.assign(Viewer.prototype, THREE.EventDispatcher.prototype);