新渲染方式加载

package.json

@@ -18,7 +18,6 @@
     "jquery": "^3.7.0",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "node-sass": "^8.0.0",
     "sass": "^1.58.0",
     "sass-loader": "^13.2.0",
     "three": "^0.169.0",

src/components/mapJK.vue

@@ -26,11 +26,12 @@ import AddSingleLayer from "../units/map/AddSingleLayer.js";
 import WaterEffect from "../units/map/WaterEffect.js";
 import Measurement from "../units/map/Measurement.js";
 import SunshineAnalysis from "../units/map/SunshineAnalysis.js";
-import ViewShedAnalysis from "../units/map/ViewShedAnalysis.js";
 import AddPointEvent from "../units/map/AddPointEvent.js";
 import SetPopupOptions from "../units/map/SetPopuopOptions";
 import AddScaleEvent from "../units/map/AddScaleEvent";
 import ViewShedAnalysisWidget from "../units/map/ViewShedAnalysis.js";
+import AddLightBallEvent from "../units/map/AddLightBallEvent.js";
+
 export default {
   name: "mapJK",
   setup(){
@@ -46,6 +47,7 @@ export default {
     let sunshineWidget = null;
     let m_handles = [];
     let viewShedAnalysisWidget = null;
+    let addLightBallEvent = null;
     onMounted(() =>{
       bus.on('CreateMap',() =>{
         MapReady = $.Deferred();
@@ -123,6 +125,12 @@ export default {
           case "FeatureLayerThreeDimension":
             featureLayerThreeDimension(params);
             break;
+          case "AddLightBall":
+            addLightBall(params);
+            break;
+          case "ThreeGrid":
+            threeGrid(params);
+            break;
         }
       }
       function setBackground(params){
@@ -332,8 +340,20 @@ export default {
         let status = params.status;
 
       }
+      function addLightBall(params){
+        let status = params.status;
+        if(status === "hide"){
+          return
+        }
+        addLightBallEvent = new AddLightBallEvent({
+          view:m_view
+        })
+        addLightBallEvent.start()
+      }
+      function threeGrid(params){
+        let status = params.status;
 
-
+      }
     })
   }
 }

src/config/basicTool.json

@@ -135,6 +135,28 @@
             "token": ""
           }
         }
+      },
+      {
+        "code": "1-11",
+        "title": "发光球",
+        "data": {
+          "ActionName": "AddLightBall",
+          "Parameters": {
+            "status": "show",
+            "token": ""
+          }
+        }
+      },
+      {
+        "code": "1-12",
+        "title": "三维格网",
+        "data": {
+          "ActionName": "ThreeGrid",
+          "Parameters": {
+            "status": "show",
+            "token": ""
+          }
+        }
       }
     ]
   }

src/units/map/AddLightBallEvent.js

@@ -0,0 +1,34 @@
+
+import RenderNode from '@arcgis/core/views/3d/webgl/RenderNode.js'
+import * as webgl from "@arcgis/core/views/3d/webgl.js";
+import {LightBallClass} from "../threejs/lightBall.js";
+
+class AddLightBallEvent{
+    constructor(options) {
+        this.view = options.view;
+        this.addLightBallEvent = null;
+    }
+    start() {
+        let that = this;
+        if(this.addLightBallEvent){
+            this.clear();
+        }
+        let subRenderClass = RenderNode.createSubclass(LightBallClass);
+        this.view.when(function (){
+            debugger
+            that.addLightBallEvent =  new subRenderClass({
+                view: that.view,
+                webgl
+            })
+        })
+    }
+    clear(){
+        if(this.addLightBallEvent){
+            this.addLightBallEvent.destroy();
+            this.addLightBallEvent = null;
+        }
+    }
+
+}
+
+export default AddLightBallEvent;

src/units/threejs/lightBall.js

@@ -1,87 +1,124 @@
 import * as THREE from 'three'
 export const LightBallClass = {
-    constructor(options){
-        this.webgl = options.webgl
-        this.view = options.view
-        this._camera = null
-        this.renderer = null
-        this.ambient = null
-        this.group = null
-        this.if_rotate = null
-        this.position = null
-        this.offset_z = null
+    constructor(options) {
+        debugger
+        this.webgl = options.webgl;
+        this.view = options.view;
+        this.cube = null;
+        this.mesh = null;
+        this._camera = null;
     },
-    initialize(){
-        this.horseMixer = THREE.AnimationMixer;
+
+
+    initialize() {
+        debugger
         this.clock = new THREE.Clock();
-        this.houseClock = new THREE.Clock();
-        this.mixer =- THREE.AnimationMixer;
+
         this.renderer = new THREE.WebGLRenderer({
-            context:this.gl,
-            antialias:true,
-            premultipliedAlpha:false,
-        })
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.renderer.setViewport(0,0,this.view.width,this.view.height);
+            context: this.gl, // 可用于将渲染器附加到已有的渲染环境(RenderingContext)中
+            premultipliedAlpha: false, // renderer是否假设颜色有 premultiplied alpha. 默认为true
+        });
+        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;
-        this.renderer.shadowMap.enabled = true;
-        this.renderer.shadowMap.type = THREE.PCFShadowMap;
+        // this.renderer.autoClearStencil = false;
 
         let originalSetRenderTarget = this.renderer.setRenderTarget.bind(this.renderer);
-        this.renderer.setRenderTarget = function (target){
+        this.renderer.setRenderTarget = function (target) {
             originalSetRenderTarget(target);
-            if(target == null){
-                context.bindRenderTarget()
+            if (target == null) {
+                context.bindRenderTarget();
             }
-        }
-        this.group = new THREE.Group();
+        };
+
         this.scene = new THREE.Scene();
-        this.scene.add(this.group);
+        // setup the camera
         let cam = this.camera;
-        this._camera = new THREE.PerspectiveCamera(cam.fovY,cam.aspect,cam.near,cam.far);
-        this.ambient = new THREE.AmbientLight(0xffffff,3);
+        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);
+
+        // setup scene lighting
+        this.ambient = new THREE.AmbientLight(0xffffff, 0.5);
         this.scene.add(this.ambient);
 
-        //创建一个函数,让group固定间隔自动沿着z轴旋转图形，但需要if_rotate为true
-        setInterval(()=>{
-            if(this.if_rotate){
-                if(this.group){
-                    this.group.rotation.z +=0.02
-                }
-            }
-            this.requestRender()
-        },10)
-    },
+        let geometry = new THREE.BoxGeometry(1500, 1500, 2000, 4);
+        geometry.rotateX(Math.PI / 2);
+        geometry.computeBoundingSphere();
 
-    render(context){
-        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]));
-        this._camera.projectionMatrix.fromArray(cam.projectionMatrix);
-        this.renderer.state.reset();
-        this.bindRenderTarget(context);
-        this.renderer.render(this.scene,this._camera);
-        this.resetWebGLState()
-    },
+        const material = new THREE.MeshBasicMaterial({
+            color: 0x00ff00,
+            transparent: true,
+            opacity: 0.5,
+        });//material定义了物体的材质，简单说就是外观
+
+        // 长方体作为EdgesGeometry参数创建一个新的几何体
+        const edges = new THREE.EdgesGeometry(geometry);
+        const edgesMaterial = new THREE.LineBasicMaterial({
+            color: 0x00ffff,
 
-    //添加一个物体，第一个参数是物体,第二个参数是物体的位置数组，第三个参数是物体的Z轴偏移
-    add(object,position,offset_z){
-        object.rotation.x = (Math.PI/2); //物体X轴旋转90度
-        this.group.add(object)
+        })
+
+        const line = new THREE.LineSegments(edges, edgesMaterial);
+
+        let object3D = new THREE.Object3D();
+
+        let mesh = new THREE.Mesh(geometry, material);
+        mesh.add(line);
+        object3D.add(mesh);
+        // object3D.position.set(cenP[0], cenP[1], cenP[2] + 2000 / 2);
+
+        let position = [0, 0, 1000];
         let cenP = [];
-        this.offset_z = offset_z;
-        this.webgl.toRenderCoordinates(this.view,[position[0],position[1],position[2]],0,this.view.spatialReference,cenP,0,1);
-        this.group.position.set(cenP[0],cenP[1],offset_z);
-        this.resetWebGLState()
+        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] + 2000 / 2);
+        this.scene.add(object3D);//然后将物体添加到场景中去
+
+        this.mesh = object3D;
+
+        // this.getCoords(context);
+        this.resetWebGLState();
     },
-    transform(x,y,z){
-      let cenP = [];
-      this.webgl.toRenderCoordinates(this.view,[this.position[0],this.position[1],this.position[2]],0,this.view.spatialReference,cenP,0,1);
-      this.group.position.set(cenP[0] + x,cenP[1] + y,this.offset_z + z);
+    /**
+     * 渲染器更新渲染
+     * @memberof BuildingEffect
+     * @method render
+     * @param {Object} context 已有渲染器信息，无需传值
+     */
+    render(context) {
+        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);
+        if (this.mesh) {
+            let vec = new THREE.Vector3(0, 0, 1);
+            this.mesh.rotateOnAxis(vec, Math.PI / 300);
+        }
+        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();
     }
 
+}
 
-}