阶段性地图接口

src/components/mapJK.vue

@@ -42,6 +42,7 @@ import AddDrawEvent from "../units/map/addDrawEvent.js";
 import SymbolPathPipeEvent from "../units/map/SymbolPathPipeEvent.js";
 import SymbolPointCubeEvent from "../units/map/SymbolPointCubeEvent.js";
 import AddThreeCubeEvent from "../units/map/AddThreeCubeEvent.js";
+import AddThreeCubeDetailEvent from "../units/map/AddThreeCubeDetailEvent.js";
 import AddThreeNetEvent from "../units/map/AddThreeNetEvent.js";
 import {
   getBuildingPoint,
@@ -68,6 +69,7 @@ export default {
     let addLightBallEvent = null;
     let addThreeGridEvent = null;
     let addThreeCubeEvent = null;
+    let addThreeCubeDetailEvent = null;
     let addThreeNetEvent = null;
     let limitHeightAnalysisEvent = null;
     let reRenderingEvent = null;
@@ -169,6 +171,9 @@ export default {
           case "ShowThreeCube":
             showThreeCube(params);
             break;
+          case "ShowThreeCubeDetail":
+            showThreeCubeDetail(params);
+            break;
           case "ShowBuildingThreeCubeByInterface":
             showBuildingThreeCubeByInterface(params);
             break;
@@ -494,6 +499,39 @@ export default {
       }
 
 
+      function showThreeCubeDetail(params){
+        let status = params.status;
+        if(status == "hide"){
+          if(addThreeCubeDetailEvent){
+            addThreeCubeDetailEvent.clear();
+            addThreeCubeDetailEvent = null;
+          }
+          return
+        }
+        let size = params.size;
+        size = {
+          x:52.892217808770056,
+          y:61.6164010837756,
+          z:53.88655689904674
+        }
+        getNoFlyPointInterface({
+          x: m_view.camera.position.x,
+          y: m_view.camera.position.y,
+          level: 20,
+          scrollId: "",
+        }).then(res =>{
+          debugger
+          // 初始化 AddThreeCubeEvent，暂时不启动
+          addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
+            view: m_view,
+            points:res.data.data.list,
+            size,
+          });
+          addThreeCubeDetailEvent.start();
+        })
+      }
+
+
       function showBuildingThreeCubeByInterface(params){
         let status = params.status;
         let size = params.size;
@@ -915,6 +953,10 @@ export default {
         }
       }
 
+      function threeGridDetail(params){
+
+      }
+
       function realPositionGrid(params){
         let status = params.status;
 

src/config/basicTool.json

@@ -191,6 +191,7 @@
           }
         }
       },
+
       {
         "code": "1-29",
         "title": "三维格子",
@@ -219,6 +220,44 @@
           }
         }
       },
+
+      {
+        "code": "1-31",
+        "title": "三维格子特效版",
+        "data": {
+          "ActionName": "ShowThreeCubeDetail",
+          "Parameters": {
+            "status": "show",
+            "points": [
+              {
+                "x": 0,
+                "y": 0,
+                "z": 0,
+                "color": [1,0,0]
+              },
+              {
+                "x": 600,
+                "y": 600,
+                "z": 600,
+                "color": [0,1,0]
+              },
+              {
+                "x": 600,
+                "y": 900,
+                "z": 300,
+                "color": [0,0,1]
+              }
+            ],
+            "size": {
+              "xLength":300.3056739761723293,
+              "yLength":300.851112421389189,
+              "zLength":300.3678964689243376
+            },
+            "token": ""
+          }
+        }
+      },
+
       {
         "code": "1-25",
         "title": "三维格子_建筑接口分批加载",

src/units/map/AddThreeCubeDetailEvent.js

@@ -0,0 +1,40 @@
+import RenderNode from '@arcgis/core/views/3d/webgl/RenderNode.js';
+import * as webgl from "@arcgis/core/views/3d/webgl.js";
+import {ThreeCubeDetailClass} from "../threejs/threeCubeDetail.js";
+
+
+class AddThreeCubeDetailEvent{
+    constructor(options){
+        this.view = options.view;
+        this.points = options.points || []; // 初始点位（可为空）
+        this.size = options.size; // 初始大小（可根据需求调整）
+        this.addThreeCubeEvent = null;
+    }
+
+
+    start() {
+        let that = this;
+        if (this.addThreeCubeEvent) {
+            this.clear();
+        }
+        let subRenderClass = RenderNode.createSubclass(ThreeCubeDetailClass);
+        this.view.when(()=>{
+            this.addThreeCubeEvent = new subRenderClass({
+                view:that.view,
+                size:that.size,
+                points:this.points, // 初始为空，等待后续增量加载
+                webgl,
+            })
+        })
+    }
+
+
+    clear(){
+        if(this.addThreeCubeEvent){
+            this.addThreeCubeEvent.destroy();
+            this.addThreeCubeEvent = null;
+        }
+    }
+}
+
+export default AddThreeCubeDetailEvent;

src/units/threejs/lightBall.js

@@ -1,10 +1,14 @@
-import * as THREE from 'three'
+import * as THREE from 'three';
+import texture from '../../assets/tex_2.png';
 export const LightBallClass = {
     constructor(options) {
         this.webgl = options.webgl;
         this.view = options.view;
         this.cube = null;
         this.mesh = null;
+        this.color = '#00FF7F';
+        this.radius = 500;
+        this.uniforms = null;
         this._camera = null;
     },
 
@@ -49,45 +53,116 @@ export const LightBallClass = {
         this.ambient = new THREE.AmbientLight(0xffffff, 0.5);
         this.scene.add(this.ambient);
 
-        let geometry = new THREE.BoxGeometry(1500, 1500, 2000, 4);
-        geometry.rotateX(Math.PI / 2);
-        geometry.computeBoundingSphere();
-
-        const material = new THREE.MeshBasicMaterial({
-            color: 0x00ff00,
-            transparent: true,
-            opacity: 0.5,
-        });//material定义了物体的材质，简单说就是外观
+        this.sun = new THREE.DirectionalLight(0xffffff, 0.5);
+        this.sun.position.set(-600, 300, 60000);
+        this.scene.add(this.sun);
+        debugger
+        this.getGeometry();
 
-        // 长方体作为EdgesGeometry参数创建一个新的几何体
-        const edges = new THREE.EdgesGeometry(geometry);
-        const edgesMaterial = new THREE.LineBasicMaterial({
-            color: 0x00ffff,
 
-        })
+        this.resetWebGLState();
+    },
 
-        const line = new THREE.LineSegments(edges, edgesMaterial);
 
+    /**
+     * 创建几何
+     * @memberof SpereLayer
+     * @method getGeometry
+     */
+    getGeometry() {
+        let cenP = [];
+        let position = [0, 0, 1000];
+        this.webgl.toRenderCoordinates(this.view,  [position[0], position[1], position[2]], 0, this.view.spatialReference, cenP, 0, 1);
+        let sphereGeom = new THREE.SphereGeometry(this.radius, 200, 200, 0, Math.PI * 2, 0, Math.PI / 2);//半球几何
+        this.material = this.getMaterial();
         let object3D = new THREE.Object3D();
-
-        let mesh = new THREE.Mesh(geometry, material);
-        mesh.add(line);
+        let mesh = new THREE.Mesh(sphereGeom.clone(), this.material);
+        mesh.rotateZ(-Math.PI /2 );//绕x轴旋转
         object3D.add(mesh);
-        // object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);
-
-        let position = [0, 0, 1000];
-        let cenP = [];
-        debugger
-        this.webgl.toRenderCoordinates(this.view, [position[0], position[1], position[2]], 0, this.view.spatialReference, cenP, 0, 1);
+        object3D.position.set(cenP[0], cenP[1], cenP[2]);
+        this.scene.add(object3D);
+    },
+    /**
+     * 创建材质
+     * @memberof SpereLayer
+     * @method getMaterial
+     */
+    getMaterial() {
+        this.uniforms = {
+            scale: { type: "f", value: -1.0 },
+            bias: { type: "f", value: 1.2 },
+            power: { type: "f", value: 2.3 },
+            glowColor: { type: "c", value: new THREE.Color(this.color) },
+            textureMap: {
+                value: undefined
+            },
+            repeat: {
+                type: "v2",
+                value: new THREE.Vector2(3, 2)
+            },
+            time: {
+                value: 0.0
+            }
+        };
+        let tx = new THREE.TextureLoader().load(texture);
+        tx.wrapS = THREE.RepeatWrapping;
+        tx.wrapT = THREE.RepeatWrapping;
+        this.uniforms.textureMap.value = tx;
+        let shader = this.getShaderStr();
+        let material = new THREE.ShaderMaterial({
+            uniforms: this.uniforms,
+            vertexShader: shader.vs,
+            fragmentShader: shader.fs,
+            side: THREE.DoubleSide,
+            blending: THREE.AdditiveBlending,
+            transparent: true,
+            depthWrite: false
+        });
+        return material;
+    },
+    /**
+     * 创建Shader
+     * @memberof SpereLayer
+     * @method getShaderStr
+     */
+    getShaderStr() {
+        let shader = { vs: '', fs: '' };
+        shader.vs = `
+        varying vec3 vNormal;
+        varying vec3 vPositionNormal;
+        varying vec2 vUv;
+        void main() 
+        {
+            vUv = uv;
+            vNormal = normalize( normalMatrix * normal ); // 转换到视图空间
+            vPositionNormal = normalize(( modelViewMatrix * vec4(position, 1.0) ).xyz);
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        }
+        `;
+        shader.fs = `
+        uniform vec3 glowColor;
+        uniform float bias;
+        uniform float power;
+        uniform float scale;
+        varying vec3 vNormal;
+        varying vec3 vPositionNormal;
+        uniform sampler2D textureMap;
+        uniform vec2 repeat;
+        varying vec2 vUv;
+        uniform float time;
+        void main() 
+        {
+           float a = pow( bias + scale * abs(dot(vNormal, vPositionNormal)), power );
+           vec2 b=vUv*repeat;
+           vec4 mapColor=texture2D( textureMap, vec2(b.x-time*0.2,b.y-time*0.4));
+           gl_FragColor = vec4( glowColor*mapColor.rgb, a );
+        }
+        `;
+        return shader;
+    },
 
-        object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);
-        this.scene.add(object3D);//然后将物体添加到场景中去
 
-        this.mesh = object3D;
 
-        // this.getCoords(context);
-        this.resetWebGLState();
-    },
     /**
      * 渲染器更新渲染
      * @memberof BuildingEffect
@@ -102,10 +177,13 @@ export const LightBallClass = {
         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);
-        if (this.mesh) {
-            let vec = new THREE.Vector3(0, 0, 1);
-            this.mesh.rotateOnAxis(vec, Math.PI / 300);
+        //动画效果
+        debugger
+        if (this.uniforms) {
+            this.uniforms.time.value =  (this.uniforms.time.value + 0.01) % 1;
         }
+
+
         this.renderer.state.reset();
 
         this.bindRenderTarget();

src/units/threejs/threeCubeDetail.js

@@ -0,0 +1,179 @@
+import * as THREE from 'three';
+export const ThreeCubeDetailClass = {
+    constructor(options) {
+        this.webgl = options.webgl;
+        this.view = options.view;
+        this.points = options.points;
+        this.mesh = null;
+        this.edges = null;
+        this._camera = null;
+    },
+    initialize(){
+        this.renderer = new THREE.WebGLRenderer({
+            context:this.gl,
+            premultipliedAlpha:false
+        })
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        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();
+        let cam = this.camera;
+        this._camera = new THREE.PerspectiveCamera(cam.fovY, cam.aspect, 0.1, 1000000000);
+        // 添加坐标轴辅助工具
+        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();
+        // 添加灯光（确保物体在场景中可以被看见）
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(10, 10, 10);
+        this.scene.add(directionalLight);
+
+
+    },
+    createInstancedMesh() {
+        // 创建主网格几何体
+        const boxGeometry = new THREE.BoxGeometry(this.size.z, this.size.x, this.size.y);
+        boxGeometry.computeVertexNormals(); // 计算并更新顶点法线
+
+        // 主体材质
+        const material = new THREE.MeshPhongMaterial({
+            transparent: true,
+            opacity: 0.1,
+            depthTest: true,
+            side: THREE.DoubleSide,
+            depthWrite: false, // 关闭深度写入
+        });
+
+        // 修改材质支持 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;
+            `
+            );
+        };
+
+        // 创建主体 InstancedMesh
+        this.mesh = new THREE.InstancedMesh(boxGeometry, material, this.points.length);
+
+        // 创建边框的几何体
+        const edgesGeometry = new THREE.EdgesGeometry(boxGeometry); // 提取边框几何
+        const edgesGroup = new THREE.Group(); // 用于存放所有边框
+
+        const dummy = new THREE.Object3D(); // 用于设置实例位置、旋转和缩放
+        const instanceColors = new Float32Array(this.points.length * 3); // 用于存储每个实例的颜色
+
+        // 遍历点信息，生成网格和边框
+        for (let i = 0; i < this.points.length; i++) {
+            const worldX = this.points[i].x;
+            const worldY = this.points[i].y;
+            const worldZ = this.points[i].z;
+            const 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(i, dummy.matrix);
+
+            // 设置每个实例的颜色
+            const color = this.points[i].color; // 假设 color 是 [r, g, b]
+            instanceColors[i * 3] = 1;
+            instanceColors[i * 3 + 1] = 0;
+            instanceColors[i * 3 + 2] = 0;
+
+            // 创建边框材质，颜色与网格一致
+            const glowMaterial = new THREE.LineBasicMaterial({
+                color: new THREE.Color(1, 0, 0),
+                linewidth: 2,      // 线条宽度
+                transparent: true, // 支持透明度
+            });
+
+            // 创建并添加边框实例
+            const edgeLine = new THREE.LineSegments(edgesGeometry, glowMaterial);
+            edgeLine.position.copy(dummy.position);
+            edgeLine.rotation.copy(dummy.rotation);
+            edgeLine.scale.copy(dummy.scale);
+            edgesGroup.add(edgeLine); // 将边框添加到组
+        }
+
+        // 为实例化的网格设置颜色
+        boxGeometry.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(instanceColors, 3));
+        boxGeometry.attributes.instanceColor.needsUpdate = true;
+        this.mesh.instanceMatrix.needsUpdate = true;
+
+        // 添加到场景
+        this.scene.add(this.mesh);      // 添加主体
+        this.scene.add(edgesGroup);    // 添加发光边框
+    },
+
+
+    render(){
+        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.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();
+    }
+}
+

src/units/threejs/threeCubeDetail_first.js

@@ -0,0 +1,174 @@
+import * as THREE from 'three';
+export const ThreeCubeDetailClass = {
+    constructor(options) {
+        this.webgl = options.webgl;
+        this.view = options.view;
+        this.points = options.points;
+        this.mesh = null;
+        this.edges = null;
+        this._camera = null;
+    },
+    initialize(){
+        this.renderer = new THREE.WebGLRenderer({
+            context:this.gl,
+            premultipliedAlpha:false
+        })
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        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();
+        let cam = this.camera;
+        this._camera = new THREE.PerspectiveCamera(cam.fovY, cam.aspect, 0.1, 1000000000);
+        // 添加坐标轴辅助工具
+        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();
+        // 添加灯光（确保物体在场景中可以被看见）
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(10, 10, 10);
+        this.scene.add(directionalLight);
+
+
+    },
+    createInstancedMesh() {
+        const boxGeometry = new THREE.BoxGeometry(
+            this.size.z,
+            this.size.x, this.size.y);
+        boxGeometry.computeVertexNormals(); // 计算并更新顶点法线
+
+        // 主体材质
+        const material = new THREE.MeshPhongMaterial({
+            transparent: true,
+            opacity: 0.1,
+            depthTest: true,
+            side: THREE.DoubleSide,
+            depthWrite: false, // 关闭深度写入
+        });
+
+        // 修改材质支持 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;
+        `
+            );
+        };
+
+        // 创建主体 InstancedMesh
+        this.mesh = new THREE.InstancedMesh(boxGeometry, material, this.points.length);
+
+        // 添加发光边框
+        const edgesGeometry = new THREE.EdgesGeometry(boxGeometry); // 提取边框几何
+        const glowMaterial = new THREE.LineBasicMaterial({
+            color: 0xffffff,   // 边框颜色
+            emissive: 0xff0000, // 发光颜色
+            linewidth: 2,      // 线条宽度
+            transparent: true, // 透明度
+        });
+        const edgesGroup = new THREE.Group();
+
+        const dummy = new THREE.Object3D();
+        const instanceColors = new Float32Array(this.points.length * 3);
+        let index = 0;
+
+        for (let i = 0; i < this.points.length; i++) {
+            let worldX = this.points[i].x;
+            let worldY = this.points[i].y;
+            let worldZ = this.points[i].z;
+            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);
+
+            // 创建并添加发光边框实例
+            const edgeLine = new THREE.LineSegments(edgesGeometry, glowMaterial);
+            edgeLine.position.copy(dummy.position);
+            edgeLine.rotation.copy(dummy.rotation);
+            edgeLine.scale.copy(dummy.scale);
+            edgesGroup.add(edgeLine);
+
+            // 设置颜色
+            // instanceColors[index * 3] = this.points[i].color[0]; // 红色
+            // instanceColors[index * 3 + 1] = this.points[i].color[1];
+            // instanceColors[index * 3 + 2] = this.points[i].color[2];
+
+            instanceColors[index * 3] = 1; // 红色
+            instanceColors[index * 3 + 1] = 0;
+            instanceColors[index * 3 + 2] = 0;
+
+
+            index++;
+        }
+
+        // 为实例化的网格设置颜色
+        boxGeometry.setAttribute('instanceColor', new THREE.InstancedBufferAttribute(instanceColors, 3));
+        boxGeometry.attributes.instanceColor.needsUpdate = true;
+        this.mesh.instanceMatrix.needsUpdate = true;
+
+        // 添加到场景
+        this.scene.add(this.mesh);      // 添加主体
+        this.scene.add(edgesGroup);    // 添加发光边框
+    },
+
+    render(){
+        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.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();
+    }
+}
+