potree-sdk/src/custom/materials/DepthBasicMaterial.js

import * as THREE from "../../../libs/three.js/build/three.module.js";
import {Shaders} from "../../../build/shaders/shaders.js";
import {Features} from "../../Features.js";

 
export default class DepthBasicMaterial extends THREE.ShaderMaterial{ 
    constructor(o={}){
        let {width, height} = viewer.renderer.getSize(new THREE.Vector2());
        
        let uniforms = {
			resolution:    { type: 'v2',  value: new THREE.Vector2(width, height ) },
            viewportOffset: { type: 'v2',  value: new THREE.Vector2(0, 0 ) }, //left, top    
			nearPlane:     { type: 'f', 	value: 0.1 },
			farPlane:      { type: 'f', 	value: 10000 }, 
			depthTexture:   { type: 't', 	value: null }, 
			opacity:        { type: 'f',	value: 1  },
			map:             { type: 't', 	value: o.map }, 
            baseColor:     {type:'v3',      value: o.color ?  new THREE.Color(o.color) :  new THREE.Color("#ffffff")},
            backColor:     {type:'v3',      value: o.backColor ?  new THREE.Color(o.backColor) :  new THREE.Color("#ddd")},
            clipDistance :     { type: 'f', 	value:o.clipDistance || 4}, //消失距离
            occlusionDistance :     { type: 'f', 	value: o.occlusionDistance || 1 }, //变为backColor距离
            maxClipFactor :  { type: 'f', 	value: o.maxClipFactor || 1 },  //0-1
      

		}  
     
        super({ 
            uniforms,
            vertexShader: Shaders['depthBasic.vs'],   
            fragmentShader: Shaders['depthBasic.fs'],
            depthWrite: !1,
            depthTest: !1,
            transparent: o.transparent == void 0 ?  true : o.transparent,
            side: o.side || 0 /* THREE.DoubleSide */, 
        })
        
        
        
        this.events = {
            setSize:(e)=>{//如果出现横条状的异常，往往是viewportOffset出错  //地图不需要
                if(!this.useDepth || !e.viewport.camera.isPerspectiveCamera || !e.viewport)return
                let viewport = e.viewport
                let viewportOffset = viewport.offset || new THREE.Vector2() 
                this.uniforms.resolution.value.copy(viewport.resolution) 
                this.uniforms.viewportOffset.value.copy(viewportOffset)
            },
            render:(e)=>{//before render  如果有大于两个viewport的话，不同viewport用不同的depthTex
                this.updateDepthParams(e)
            },
            cameraChange:(e)=>{
                if(e.changeInfo.projectionChanged){//resize时也会触发。虽然保守起见的话加上resize比较好
                    //console.log('projectionChanged')
                    this.events.setSize(e)
                }
            }
            
        }
        
     
        
        
        //-----其他----
         
        
        if(o.opacity != void 0){
            this.opacity = o.opacity
        }
        this.useDepth = o.useDepth
        this.map = o.map
       
   
    }
    
    
    get useDepth(){
        return this.useDepth_
    } 
    
      
    
    set useDepth(value){//如果不支持 EXT_DEPTH 的话会失效
        if(this.useDepth_ != value){
            if(value && Features.EXT_DEPTH.isSupported()){
                this.defines.useDepth = '' 
                //viewer.addEventListener('resize', this.events.setSize)
                viewer.addEventListener("render.begin",  this.events.render) 
                viewer.addEventListener('camera_changed', this.events.cameraChange)      
                this.events.setSize( {viewport:viewer.mainViewport} )
                this.updateDepthParams() 
                
            }else{
                delete this.defines.useDepth
                //viewer.removeEventListener('resize', this.events.setSize)
                viewer.removeEventListener("render.begin",  this.events.render)  
                viewer.removeEventListener('camera_changed', this.events.cameraChange) 
            }
            this.useDepth_ = value
            this.needsUpdate = true
        }
    } 
    
     
    get map(){
        return this.uniforms.map.value
    }
    set map(map){
        this.uniforms.map.value = map; 
        if(map){
            this.defines.use_map = '' 
        }else{
            delete this.defines.use_map 
        }
    }
     
    get opacity(){
        return this.uniforms.opacity.value
    }
    set opacity(o){
        this.uniforms && (this.uniforms.opacity.value = o)
    }
    
    get color(){
        return this.uniforms.baseColor.value
    }
    set color(c){
        this.uniforms && (this.uniforms.baseColor.value.set(c))
    }
    
    
    /* dispose(){ 
        super.dispose()
        viewer.depthBasic
    } */
    
    copy(source){
        super.copy(source)
        
        this.useDepth = source.useDepth
        this.map = source.map  
        return this
    }
    
    updateDepthParams(e={}){//主要用于点云遮住mesh
        var viewport = e.viewport || viewer.mainViewport;
        var camera = viewport.camera;
        if(this.useDepth && camera.isPerspectiveCamera ){   
            /* if(Potree.settings.displayMode == 'showPanos' && viewer.images360.currentPano.depthTex){
                this.uniforms.depthTexture.value = viewer.images360.currentPano.depthTex
            }else{ */
                this.uniforms.depthTexture.value = viewer.getPRenderer().getRtEDL(viewport).depthTexture   //其实只赋值一次就行
            //}
            this.uniforms.nearPlane.value = camera.near;
            this.uniforms.farPlane.value = camera.far;
            
        }            
    }

    
}