lsq-book/packages/pc/public/three/index.js

//参考 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,  1000/* 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(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 * 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)
        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);