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

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

 */

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/" + 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
        }
    })
    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', 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);

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

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