cesium-threejs-experiment

cesium-threejs-experiment copied to clipboard

This sample code refers to cesium-threejs-experiment,but the geometry disappeared when the camera changed.

class ThreeJSPrimitive { constructor(options) { this.geometry = null; this.combineGeometry([options.geometryInstance]); var geometry = new THREE.BufferGeometry(); geometry.addAttribute('position2DHigh', new THREE.BufferAttribute(this.geometry.attributes.position2DHigh.values, 3)); geometry.addAttribute('position2DLow', new THREE.BufferAttribute(this.geometry.attributes.position2DLow.values, 3)); geometry.setIndex(new THREE.BufferAttribute(this.geometry.indices, 1));

     var vertexShader = `attribute vec3 position2DHigh;
        attribute vec3 position2DLow;
        varying vec3 v_pos;
        void main(){
            v_pos=position2DHigh.zxy+position2DLow.zxy;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(v_pos,1.0);
        }`;
     var fragmentShader = `varying vec3 v_pos;
        void main(){      
            vec4 color;
            if(v_pos.x>2000000.0){
                color=vec4(1.0,1.0,1.0,1.0);
            }else{
                 color=vec4(1.0,0.0,0.0,1.0);
            }       
            gl_FragColor = color*color.a;
        }`;
     this.scene = new THREE.Scene();
     this.material = new THREE.ShaderMaterial({
         vertexShader: vertexShader,
         fragmentShader: fragmentShader,
         //side: THREE.DoubleSide,
         //depthTest: false,
         //blending: THREE.NoBlending,
         depthWrite: false,
         //transparent: true,
         uniforms: {}
     });

     var cubeMesh = new THREE.Mesh(geometry, this.material);
     this.scene.add(cubeMesh);
 }
 combineGeometry(geometris) {
     var projection = new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84);
     var result = Cesium.PrimitivePipeline.combineGeometry({
         instances: geometris,
         ellipsoid: projection.ellipsoid,
         projection: projection,
         elementIndexUintSupported: true,
         scene3DOnly: false,
         vertexCacheOptimize: false,
         compressVertices: true,
         modelMatrix: this.modelMatrix
     });
     this.geometry = result.geometries[0];
     this.attributeLocations = result.attributeLocations;
     this.modelMatrix = Cesium.Matrix4.clone(result.modelMatrix, this.modelMatrix);
 }

 update(frameState) {
     if (!this.renderer) {
         this.renderer = new THREE.WebGLRenderer({
             canvas: document.getElementById('cube'),
             alpha: true
         });
         this.renderer.autoClear = true;
     }

     var camera = frameState.camera;
     if (!this.camera) {
         this.camera = new THREE.PerspectiveCamera(camera.frustum.fov, camera.frustum.aspectRatio, camera.frustum.near, camera.frustum.far);
         //this.camera = new THREE.Camera();
     }

     this.camera.projectionMatrix = new THREE.Matrix4().fromArray(camera.frustum.projectionMatrix);
     this.camera.matrix = new THREE.Matrix4().getInverse(new THREE.Matrix4().fromArray(camera.viewMatrix));
     this.camera.matrix.decompose(this.camera.position, this.camera.quaternion, this.camera.scale);
     this.renderer.state.reset();
     this.renderer.render(this.scene, this.camera);
 }

}

var polygon = new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy( Cesium.Cartesian3.fromDegreesArray(degreesArray) ), height: maxHeight, extrudedHeight: 0 }); var geometry = Cesium.PolygonGeometry.createGeometry(polygon); var geoInstance = new Cesium.GeometryInstance({ geometry: geometry }); var primitive3 = new ThreeJSPrimitive({ geometryInstance: geoInstance }); viewer.scene.primitives.add(primitive3);