gmlx/project/public/three/index.js

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

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 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('./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()
}

/* 
    同一时间，视线范围不能同时出现两张卡。也就是分布要根据视角范围变化，但是如果浏览器变宽导致的出现两张卡不算。

 */

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

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 count = this.cardGroup.children.filter(card => {
    return frustum.containsPoint(card.position)
  }).length

  let density = (count / (this.renderer.domElement.width * this.renderer.domElement.height)) * 1000

  return density
}

Viewer.prototype.addCard = function (around) {
  let cardIndex = Math.floor(cardNames.length * Math.random())
  common.loadTexture('./assets/out/' + 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])
      }
    })

    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
    }
  })
  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)
    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) {
    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()
}

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 (this.hoveredObject) {
      this.dispatchEvent({
        type: 'clickObject',
        id: this.hoveredObject.material.uniforms.map.id
      })
    }
  }

  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',
        name: hoveredObject.material.uniforms.map.name
      })
      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)

//============

var startTime = new Date().getTime()
var viewer = new Viewer(0, $('#player')[0])