网格渲染修改

src/units/threejs/threeGrid.js

@@ -4,25 +4,45 @@ export const ThreeGridClass = {
     constructor(options) {
         this.webgl = options.webgl;
         this.view = options.view;
-        this.extent = options.extent||{minX:-50000,maxX:50000,minY:-50000,maxY:50000}; // {minX, maxX, minY, maxY}
-        this.height = options.height ||10000; // 网格总高度
-        this.size = options.size ||2000; // 单个立方体的尺寸
+        this.extent = options.extent||{minX:-5000,maxX:5000,minY:-5000,maxY:5000}; // {minX, maxX, minY, maxY}
+        this.height = options.height ||1000; // 网格总高度
+        this.size = options.size ||50; // 单个立方体的尺寸
         this.mesh = null;
         this._camera = null;
     },
 
     initialize() {
         this.renderer = new THREE.WebGLRenderer({
-            context: this.webgl.context,
+            context: this.gl,
             premultipliedAlpha: false,
         });
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.renderer.setSize(this.view.width, this.view.height);
+        this.renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比。通常用于避免HiDPI设备上绘图模糊
+        this.renderer.setViewport(0, 0, this.view.width, this.view.height); // 视口大小设置
+
         this.renderer.autoClear = false;
+        this.renderer.autoClearDepth = false;
+        this.renderer.autoClearColor = false;
 
+        let originalSetRenderTarget = this.renderer.setRenderTarget.bind(this.renderer);
+        this.renderer.setRenderTarget = function (target) {
+            originalSetRenderTarget(target);
+            if (target == null) {
+                context.bindRenderTarget();
+            }
+        };
         // 场景和相机
         this.scene = new THREE.Scene();
-        this._camera = new THREE.PerspectiveCamera(75, this.view.width / this.view.height, 0.1, 10000);
+        let cam = this.camera;
+        this._camera = new THREE.PerspectiveCamera(cam.fovY, cam.aspect, cam.near, cam.far);
+        // 添加坐标轴辅助工具
+        const axesHelper = new THREE.AxesHelper(1);
+        axesHelper.position.copy(1000000, 100000, 100000);
+        this.scene.add(axesHelper);
+
+        let grid = new THREE.GridHelper(30, 10, 0xf0f0f0, 0xffffff);
+        this.scene.add(grid);
+
+
 
         // 创建实例化立方体网格
         this.createInstancedMesh();
@@ -35,50 +55,127 @@ export const ThreeGridClass = {
         const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
         directionalLight.position.set(10, 10, 10);
         this.scene.add(directionalLight);
+
+        // 每秒更新一次网格颜色
+        setInterval(() => {
+            this.updateColors();
+        }, 1000);
     },
 
     createInstancedMesh() {
         const geometry = new THREE.BoxGeometry(this.size, this.size, this.size);
-        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.8 });
-
+    
+        const material = new THREE.MeshPhongMaterial({
+            transparent: true,
+            opacity: 0.8,
+        });
+    
+        // 修改材质支持 instanceColor
+        material.onBeforeCompile = (shader) => {
+            shader.vertexShader = `
+                attribute vec3 instanceColor;
+                varying vec3 vColor;
+            ` + shader.vertexShader;
+    
+            shader.vertexShader = shader.vertexShader.replace(
+                `#include <begin_vertex>`,
+                `
+                #include <begin_vertex>
+                vColor = instanceColor;
+                `
+            );
+    
+            shader.fragmentShader = `
+                varying vec3 vColor;
+            ` + shader.fragmentShader;
+    
+            shader.fragmentShader = shader.fragmentShader.replace(
+                `#include <dithering_fragment>`,
+                `
+                #include <dithering_fragment>
+                gl_FragColor.rgb = vColor;
+                `
+            );
+        };
+    
         const xCount = Math.floor((this.extent.maxX - this.extent.minX) / this.size);
         const yCount = Math.floor((this.extent.maxY - this.extent.minY) / this.size);
         const zCount = Math.floor(this.height / this.size);
         const count = xCount * yCount * zCount;
-
+    
         this.mesh = new THREE.InstancedMesh(geometry, material, count);
+    
+        // 为实例添加颜色属性
+        const instanceColors = new Float32Array(count * 3);
         const dummy = new THREE.Object3D();
+        const color = new THREE.Color();
         let index = 0;
-
+    
         for (let i = 0; i < xCount; i++) {
             for (let j = 0; j < yCount; j++) {
                 for (let k = 0; k < zCount; k++) {
                     const worldX = this.extent.minX + i * this.size + this.size / 2;
                     const worldY = this.extent.minY + j * this.size + this.size / 2;
                     const worldZ = k * this.size + this.size / 2;
-
+    
                     let renderPos = [];
                     this.webgl.toRenderCoordinates(this.view, [worldX, worldY, worldZ], 0, this.view.spatialReference, renderPos, 0, 1);
-
+    
                     dummy.position.set(renderPos[0], renderPos[1], renderPos[2]);
                     dummy.updateMatrix();
                     this.mesh.setMatrixAt(index, dummy.matrix);
-
+    
+                    // 设置随机颜色
+                    color.setHSL(Math.random(), 0.8, 0.5);
+                    instanceColors[index * 3] = color.r;
+                    instanceColors[index * 3 + 1] = color.g;
+                    instanceColors[index * 3 + 2] = color.b;
+    
                     index++;
                 }
             }
         }
+    
+        geometry.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(instanceColors, 3));
+        geometry.attributes.instanceColor.needsUpdate = true;
         this.mesh.instanceMatrix.needsUpdate = true;
     },
 
+    updateColors() {
+        const instanceColors = this.mesh.geometry.attributes.instanceColor.array;
+        const color = new THREE.Color();
+    
+        for (let i = 0; i < this.mesh.count; i++) {
+            color.setHSL(Math.random(), 0.8, 0.5);
+            instanceColors[i * 3] = color.r;
+            instanceColors[i * 3 + 1] = color.g;
+            instanceColors[i * 3 + 2] = color.b;
+        }
+    
+        // 标记颜色属性需要更新
+        this.mesh.geometry.attributes.instanceColor.needsUpdate = true;
+    
+        // 触发重新渲染
+        this.requestRender();
+    },
     render(context) {
-        this._camera.position.set(0, 0, 5000); // 确保相机距离场景足够远以看到整个场景
-        this._camera.lookAt(0, 0, 0);
+        let cam = this.camera;
+        //需要调整相机的视角
+        this._camera.position.set(cam.eye[0], cam.eye[1], cam.eye[2]);
+        this._camera.up.set(cam.up[0], cam.up[1], cam.up[2]);
+        this._camera.lookAt(new THREE.Vector3(cam.center[0], cam.center[1], cam.center[2]));
+        // Projection matrix can be copied directly
+        this._camera.projectionMatrix.fromArray(cam.projectionMatrix);
 
         this.renderer.state.reset();
-        this.renderer.setRenderTarget(null);
+
+        this.bindRenderTarget();
+
         this.renderer.render(this.scene, this._camera);
+        // as we want to smoothly animate the ISS movement, immediately request a re-render
         this.requestRender();
+
+        // cleanup
         this.resetWebGLState();
     }
 }