easy-three-utils 0.0.33 → 0.0.332

package/cesium/utils/useCustomCollection.ts

@@ -0,0 +1,50 @@
+import * as Cesium from 'cesium'
+
+enum ECollectionWhiteListNames {
+  POLYGON = 'polygon',
+  POLYGON_NODE = 'polygon_node'
+}
+
+const useCustomCollection = (viewer: Cesium.Viewer) => {
+
+  let collectionNames: string[] = ([])
+  let whiteList: string[] = ['polygon', 'polygon_node']
+
+  const addCollection = (name: string) => {
+    const index = collectionNames.findIndex(item => item === name)
+    if (index !== -1) return
+    collectionNames.push(name)
+    const dataSource = new Cesium.CustomDataSource(name);
+    viewer.dataSources.add(dataSource);
+    return dataSource
+  }
+
+  const getCollection = (name: ECollectionWhiteListNames | string) => {
+    const collection = viewer.dataSources.getByName(name)
+    if (collection.length) {
+      return collection[0]
+    }
+  }
+
+  const removeCollection = (name: string) => {
+    const collection = viewer.dataSources.getByName(name)
+    viewer.dataSources.remove(collection[0], false)
+    collectionNames = collectionNames.filter(item => item !== name && !whiteList.includes(item))
+  }
+
+  const getCollectionNames = () => {
+    return collectionNames.filter(item => !whiteList.includes(item))
+  }
+
+  return {
+    addCollection,
+    getCollection,
+    removeCollection,
+    getCollectionNames
+  }
+}
+
+export {
+  ECollectionWhiteListNames,
+  useCustomCollection
+}

package/cesium/utils/useDrawPolygon.ts

@@ -0,0 +1,118 @@
+import * as Cesium from 'cesium'
+
+const useDrawPolygon = (viewer: Cesium.Viewer, options: {
+  nodeCollection: Cesium.CustomDataSource
+  polygonCollection: Cesium.CustomDataSource
+}) => {
+
+  const addHandler: Cesium.ScreenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+  const finHandler: Cesium.ScreenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+  const moveHandler: Cesium.ScreenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+  let pointPosData: Cesium.Cartesian3[][] = []
+
+  const start = () => {
+
+    const points: Cesium.Cartesian3[] = []
+
+    addHandler.setInputAction((event => {
+      const ray = viewer.camera.getPickRay(event.position)
+      const cartesian = viewer.scene.globe.pick(ray!, viewer.scene)
+
+      if (Cesium.defined(cartesian)) {
+        options.nodeCollection.entities.add(createNodePoint(cartesian))
+        if (points.length === 0) {
+          points.push(cartesian)
+        }
+        if (points.length === 2) {
+          const dynamicPositions = new Cesium.CallbackProperty(() => new Cesium.PolygonHierarchy(points), false)
+          options.polygonCollection.entities.add(createNormalPolygon(dynamicPositions))
+        }
+        points.push(cartesian)
+      }
+    }) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    moveHandler.setInputAction((event => {
+      const ray = viewer.camera.getPickRay(event.endPosition)
+      const cartesian = viewer.scene.globe.pick(ray!, viewer.scene)
+      if (Cesium.defined(cartesian) && points.length > 0) {
+        points.pop()
+        points.push(cartesian)
+      }
+    }) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+
+    finHandler.setInputAction(() => {
+      if (points.length < 2) {
+        alert('请至少选3个点')
+      } else if (points.length < 3) {
+        alert('请至少选3个点')
+        options.nodeCollection.entities.remove(options.nodeCollection.entities.values[options.nodeCollection.entities.values.length - 1])
+        options.polygonCollection.entities.remove(options.polygonCollection.entities.values[options.polygonCollection.entities.values.length - 1])
+      } else if (points.length < 4) {
+        alert('请至少选3个点')
+        options.nodeCollection.entities.remove(options.nodeCollection.entities.values[options.nodeCollection.entities.values.length - 1])
+        options.nodeCollection.entities.remove(options.nodeCollection.entities.values[options.nodeCollection.entities.values.length - 1])
+        options.polygonCollection.entities.remove(options.polygonCollection.entities.values[options.polygonCollection.entities.values.length - 1])
+        options.polygonCollection.entities.remove(options.polygonCollection.entities.values[options.polygonCollection.entities.values.length - 1])
+      }
+      points.pop()
+
+      stop()
+      start()
+
+      pointPosData.push(points)
+
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+  }
+
+  const stop = () => {
+    addHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
+    moveHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE)
+    finHandler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+  }
+
+  const createNodePoint = (cartesian: Cesium.Cartesian3) => {
+    return new Cesium.Entity({
+      position: cartesian,
+      point: {
+        pixelSize: 8,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        color: Cesium.Color.fromCssColorString("rgb(51, 153, 255)"),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY
+      }
+    })
+  }
+
+  const createNormalPolygon = (hierarchy: Cesium.CallbackProperty) => {
+    return new Cesium.Entity({
+      polygon: {
+        hierarchy,
+        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        material: new Cesium.ColorMaterialProperty(
+          Cesium.Color.fromCssColorString("rgba(51, 153, 255,.4)")
+        )
+      }
+    })
+  }
+
+  const destroy = () => {
+    pointPosData = []
+    stop()
+    options.nodeCollection.entities.removeAll()
+    options.polygonCollection.entities.removeAll()
+  }
+
+  const getPointPositionData = () => {
+    return pointPosData
+  }
+
+  return {
+    start,
+    stop,
+    destroy,
+    getPointPositionData
+  }
+}
+
+export {
+  useDrawPolygon
+}

package/cesium/utils/useMeasure.ts

@@ -0,0 +1,152 @@
+import * as Cesium from 'cesium'
+
+const useMeasure = (viewer: Cesium.Viewer) => {
+
+    const angleMeasurement = () => {
+        let anglePoints = []
+        let angleEntities = []
+        let angleLines = []
+        let angleLabels = []
+        let angleMeasurementHandler = null
+
+        const draw = () => {
+            if (angleMeasurementHandler) {
+                angleMeasurementHandler.destroy()
+                angleMeasurementHandler = null
+            }
+
+            angleMeasurementHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+
+            angleMeasurementHandler.setInputAction((movement) => {
+                const ray = viewer.camera.getPickRay(movement.position);
+                const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
+
+                if (cartesian) {
+                    anglePoints.push(cartesian);
+
+                    const pointEntity = viewer.entities.add({
+                        position: cartesian,
+                        point: {
+                            color: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                            outlineColor: Cesium.Color.WHITE,
+                            outlineWidth: 2,
+                            pixelSize: 10,
+                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                        }
+                    });
+                    angleEntities.push(pointEntity)
+
+                    if (anglePoints.length >= 2) {
+                        const lineEntity = viewer.entities.add({
+                            polyline: {
+                                positions: [anglePoints[anglePoints.length - 2], anglePoints[anglePoints.length - 1]],
+                                width: 2,
+                                material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                                clampToGround: true
+                            }
+                        });
+                        angleLines.push(lineEntity)
+                    }
+
+                    if (anglePoints.length === 3) {
+                        calculateAndDisplayAngle()
+                        anglePoints = []
+                        draw()
+                    }
+                }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+            angleMeasurementHandler.setInputAction(function (movement) {
+                if (anglePoints.length > 0 && anglePoints.length < 3) {
+                    const ray = viewer.camera.getPickRay(movement.endPosition)
+                    const cartesian = viewer.scene.globe.pick(ray, viewer.scene)
+
+                    if (cartesian) {
+                        if (angleLines.length < anglePoints.length) {
+                            const lineEntity = viewer.entities.add({
+                                polyline: {
+                                    positions: [anglePoints[anglePoints.length - 1], cartesian],
+                                    width: 2,
+                                    material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
+                                    clampToGround: true
+                                }
+                            });
+                            angleLines.push(lineEntity)
+                        } else {
+                            const line = angleLines[angleLines.length - 1]
+                            line.polyline.positions = [anglePoints[anglePoints.length - 1], cartesian]
+                        }
+                    }
+                }
+            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+        }
+
+        const calculateAndDisplayAngle = () => {
+            const p1 = anglePoints[0]
+            const p2 = anglePoints[1]
+            const p3 = anglePoints[2]
+
+            const v1 = Cesium.Cartesian3.subtract(p1, p2, new Cesium.Cartesian3())
+            const v2 = Cesium.Cartesian3.subtract(p3, p2, new Cesium.Cartesian3())
+
+            Cesium.Cartesian3.normalize(v1, v1)
+            Cesium.Cartesian3.normalize(v2, v2)
+
+            const dot = Cesium.Cartesian3.dot(v1, v2)
+
+            let angleRad = Math.acos(dot)
+
+            let angleDeg = Cesium.Math.toDegrees(angleRad)
+
+            const angleLabel = viewer.entities.add({
+                position: p2,
+                label: {
+                    text: angleDeg.toFixed(2) + '°',
+                    font: 'normal 22px MicroSoft YaHei',
+                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                    fillColor: Cesium.Color.WHITE,
+                    verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                    pixelOffset: new Cesium.Cartesian2(20, 0),
+                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+                }
+            });
+            angleLabels.push(angleLabel)
+        }
+
+        const resetAngleMeasurement = () => {
+            if (angleMeasurementHandler) {
+                angleMeasurementHandler.destroy()
+                angleMeasurementHandler = null
+            }
+
+            anglePoints = []
+        }
+
+        const clear = () => {
+            resetAngleMeasurement()
+
+            angleEntities.forEach(entity => viewer.entities.remove(entity))
+            angleLines.forEach(entity => viewer.entities.remove(entity))
+            angleLabels.forEach(entity => viewer.entities.remove(entity))
+
+            angleEntities = []
+            angleLines = []
+            angleLabels = []
+        }
+
+        return {
+            draw,
+            clear
+        }
+    }
+
+    const angle = angleMeasurement()
+
+    return {
+        angle
+    }
+}
+
+export {
+    useMeasure
+}

package/cesium/utils/useViewShed.ts

@@ -0,0 +1,199 @@
+import glsl from "../glsl/viewable";
+import * as Cesium from 'cesium'
+
+export default class viewShader {
+  constructor(viewer, options) {
+    this.viewer = viewer;
+    this.viewPosition = options.viewPosition;
+    this.viewPositionEnd = options.viewPositionEnd;
+    this.viewDistance = this.viewPositionEnd ? Cesium.Cartesian3.distance(this.viewPosition, this.viewPositionEnd) : (options.viewDistance || 100.0);
+    this.viewHeading = this.viewPositionEnd ? this.getHeading(this.viewPosition, this.viewPositionEnd) : (options.viewHeading || 0.0);
+    this.viewPitch = this.viewPositionEnd ? this.getPitch(this.viewPosition, this.viewPositionEnd) : (options.viewPitch || 0.0);
+    this.horizontalViewAngle = options.horizontalViewAngle || 90.0;
+    this.verticalViewAngle = options.verticalViewAngle || 60.0;
+    this.visibleAreaColor = options.visibleAreaColor || Cesium.Color.GREEN;
+    this.invisibleAreaColor = options.invisibleAreaColor || Cesium.Color.RED;
+    this.enabled = (typeof options.enabled === "boolean") ? options.enabled : true;
+    this.softShadows = (typeof options.softShadows === "boolean") ? options.softShadows : true;
+    this.size = options.size || 2048;
+
+    this.update();
+  }
+
+  add() {
+    this.createLightCamera();
+    this.createShadowMap();
+    this.createPostStage();
+    this.drawSketch();
+  }
+
+  update() {
+    this.clear();
+    this.add();
+  }
+
+  updatePosition(viewPositionEnd) {
+    this.viewPositionEnd = viewPositionEnd
+    this.viewDistance = Cesium.Cartesian3.distance(this.viewPosition, this.viewPositionEnd)
+    this.viewHeading = this.getHeading(this.viewPosition, this.viewPositionEnd)
+    this.viewPitch = this.getPitch(this.viewPosition, this.viewPositionEnd)
+  }
+
+  clear() {
+    if (this.sketch) {
+      this.viewer.entities.removeById(this.sketch.id);
+      this.sketch = null;
+    }
+    if (this.postStage) {
+      this.viewer.scene.postProcessStages.remove(this.postStage);
+      this.postStage = null;
+    }
+  }
+
+  createLightCamera() {
+    this.lightCamera = new Cesium.Camera(this.viewer.scene);
+    this.lightCamera.position = this.viewPosition;
+    if (this.viewDistance == 0) {
+      this.viewDistance = 1
+    }
+    this.lightCamera.frustum.near = this.viewDistance * 0.001;
+    this.lightCamera.frustum.far = this.viewDistance;
+    const hr = Cesium.Math.toRadians(this.horizontalViewAngle);
+    const vr = Cesium.Math.toRadians(this.verticalViewAngle);
+    const aspectRatio =
+      (this.viewDistance * Math.tan(hr / 2) * 2) /
+      (this.viewDistance * Math.tan(vr / 2) * 2);
+    this.lightCamera.frustum.aspectRatio = aspectRatio;
+    if (hr > vr) {
+      this.lightCamera.frustum.fov = hr;
+    } else {
+      this.lightCamera.frustum.fov = vr;
+    }
+    this.lightCamera.setView({
+      destination: this.viewPosition,
+      orientation: {
+        heading: Cesium.Math.toRadians(this.viewHeading || 0),
+        pitch: Cesium.Math.toRadians(this.viewPitch || 0),
+        roll: 0
+      }
+    });
+  }
+
+  createShadowMap() {
+    this.shadowMap = new Cesium.ShadowMap({
+      context: (this.viewer.scene).context,
+      lightCamera: this.lightCamera,
+      enabled: this.enabled,
+      isPointLight: true,
+      pointLightRadius: this.viewDistance,
+      cascadesEnabled: false,
+      size: this.size,
+      softShadows: this.softShadows,
+      normalOffset: false,
+      fromLightSource: false
+    });
+    this.viewer.scene.shadowMap = this.shadowMap;
+  }
+
+  createPostStage() {
+    const postStage = new Cesium.PostProcessStage({
+      fragmentShader: glsl,
+      uniforms: {
+        shadowMap_textureCube: () => {
+          this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
+          return Reflect.get(this.shadowMap, "_shadowMapTexture");
+        },
+        shadowMap_matrix: () => {
+          this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
+          return Reflect.get(this.shadowMap, "_shadowMapMatrix");
+        },
+        shadowMap_lightPositionEC: () => {
+          this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
+          return Reflect.get(this.shadowMap, "_lightPositionEC");
+        },
+        shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness: () => {
+          this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
+          const bias = this.shadowMap._pointBias;
+          return Cesium.Cartesian4.fromElements(
+            bias.normalOffsetScale,
+            this.shadowMap._distance,
+            this.shadowMap.maximumDistance,
+            0.0,
+            new Cesium.Cartesian4()
+          );
+        },
+        shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: () => {
+          this.shadowMap.update(Reflect.get(this.viewer.scene, "_frameState"));
+          const bias = this.shadowMap._pointBias;
+          const scratchTexelStepSize = new Cesium.Cartesian2();
+          const texelStepSize = scratchTexelStepSize;
+          texelStepSize.x = 1.0 / this.shadowMap._textureSize.x;
+          texelStepSize.y = 1.0 / this.shadowMap._textureSize.y;
+
+          return Cesium.Cartesian4.fromElements(
+            texelStepSize.x,
+            texelStepSize.y,
+            bias.depthBias,
+            bias.normalShadingSmooth,
+            new Cesium.Cartesian4()
+          );
+        },
+        camera_projection_matrix: this.lightCamera.frustum.projectionMatrix,
+        camera_view_matrix: this.lightCamera.viewMatrix,
+        helsing_viewDistance: () => {
+          return this.viewDistance;
+        },
+        helsing_visibleAreaColor: this.visibleAreaColor,
+        helsing_invisibleAreaColor: this.invisibleAreaColor,
+      }
+    });
+
+    this.postStage = this.viewer.scene.postProcessStages.add(postStage);
+  }
+
+  drawSketch() {
+    this.sketch = this.viewer.entities.add({
+      name: 'sketch',
+      position: this.viewPosition,
+      orientation: Cesium.Transforms.headingPitchRollQuaternion(
+        this.viewPosition,
+        Cesium.HeadingPitchRoll.fromDegrees(this.viewHeading - this.horizontalViewAngle, this.viewPitch, 0.0)
+      ),
+      ellipsoid: {
+        radii: new Cesium.Cartesian3(
+          this.viewDistance,
+          this.viewDistance,
+          this.viewDistance
+        ),
+        minimumClock: Cesium.Math.toRadians(-this.horizontalViewAngle / 2),
+        maximumClock: Cesium.Math.toRadians(this.horizontalViewAngle / 2),
+        minimumCone: Cesium.Math.toRadians(this.verticalViewAngle + 7.75),
+        maximumCone: Cesium.Math.toRadians(180 - this.verticalViewAngle - 7.75),
+        fill: false,
+        outline: true,
+        subdivisions: 256,
+        stackPartitions: 64,
+        slicePartitions: 64,
+        outlineColor: Cesium.Color.YELLOWGREEN
+      }
+    });
+  }
+
+  getHeading(fromPosition, toPosition) {
+    let finalPosition = new Cesium.Cartesian3();
+    let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
+    Cesium.Matrix4.inverse(matrix4, matrix4);
+    Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
+    Cesium.Cartesian3.normalize(finalPosition, finalPosition);
+    return Cesium.Math.toDegrees(Math.atan2(finalPosition.x, finalPosition.y));
+  }
+
+  getPitch(fromPosition, toPosition) {
+    let finalPosition = new Cesium.Cartesian3();
+    let matrix4 = Cesium.Transforms.eastNorthUpToFixedFrame(fromPosition);
+    Cesium.Matrix4.inverse(matrix4, matrix4);
+    Cesium.Matrix4.multiplyByPoint(matrix4, toPosition, finalPosition);
+    Cesium.Cartesian3.normalize(finalPosition, finalPosition);
+    return Cesium.Math.toDegrees(Math.asin(finalPosition.z));
+  }
+}

package/cesium/utils/useWeather.ts

@@ -0,0 +1,127 @@
+import * as Cesium from 'cesium'
+import { rainShader, snowShader, fogShader } from '../glsl/weather'
+
+enum EWeatherType {
+    RAIN = 'rain',
+    SNOW = 'snow',
+    FOG = 'fog',
+    CLEAR = 'clear'
+}
+
+const useWeather = (viewer: Cesium.Viewer) => {
+
+    let stage: Cesium.PostProcessStage;
+
+    const rain = (options: {
+        tiltAngle: number;
+        rainSize: number;
+        rainSpeed: number;
+    } = {
+            tiltAngle: -.6,
+            rainSize: 0.6,
+            rainSpeed: 120.0
+        }) => {
+
+        if (stage) {
+            viewer.scene.postProcessStages.remove(stage);
+        }
+
+        const tiltAngle = Cesium.defaultValue(options.tiltAngle, -.6);
+        const rainSize = Cesium.defaultValue(options.rainSize, 0.3);
+        const rainSpeed = Cesium.defaultValue(options.rainSpeed, 60.0);
+
+        stage = new Cesium.PostProcessStage({
+            name: 'rain',
+            fragmentShader: rainShader,
+            uniforms: {
+                tiltAngle: () => {
+                    return tiltAngle;
+                },
+                rainSize: () => {
+                    return rainSize;
+                },
+                rainSpeed: () => {
+                    return rainSpeed;
+                }
+            }
+        });
+        viewer.scene.postProcessStages.add(stage);
+    }
+
+    const snow = (options: {
+        snowSize: number;
+        snowSpeed: number;
+    } = {
+            snowSize: 0.02,
+            snowSpeed: 60.0
+        }) => {
+
+        if (stage) {
+            viewer.scene.postProcessStages.remove(stage);
+        }
+
+        const snowSize = Cesium.defaultValue(options.snowSize, 0.02)
+        const snowSpeed = Cesium.defaultValue(options.snowSpeed, 60.0)
+
+        stage = new Cesium.PostProcessStage({
+            name: 'snow',
+            fragmentShader: snowShader,
+            uniforms: {
+                snowSize: () => {
+                    return snowSize;
+                },
+                snowSpeed: () => {
+                    return snowSpeed;
+                }
+            }
+        });
+        viewer.scene.postProcessStages.add(stage);
+    }
+
+    const fog = (options: {
+        visibility: number;
+        color: Cesium.Color;
+    } = {
+            visibility: 0.2,
+            color: new Cesium.Color(0.8, 0.8, 0.8, 0.3)
+        }) => {
+
+        if (stage) {
+            viewer.scene.postProcessStages.remove(stage);
+        }
+
+        const visibility = Cesium.defaultValue(options.visibility, 0.1);
+        const color = Cesium.defaultValue(options.color, new Cesium.Color(0.8, 0.8, 0.8, 0.5));
+
+        stage = new Cesium.PostProcessStage({
+            name: 'fog',
+            fragmentShader: fogShader,
+            uniforms: {
+                visibility: () => {
+                    return visibility;
+                },
+                fogColor: () => {
+                    return color;
+                }
+            }
+        });
+        viewer.scene.postProcessStages.add(stage);
+    }
+
+    const clear = () => {
+        viewer.scene.postProcessStages.remove(stage);
+    }
+
+    return {
+        rain,
+        snow,
+        fog,
+        clear
+    }
+}
+
+export {
+    useWeather,
+
+    EWeatherType
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.33",
+  "version": "0.0.332",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/common/useLoader.ts

@@ -29,7 +29,9 @@ const threeLoaders: IThreeLoaders = {
     TextureLoader: null
 }
 
-const useLoader = (decoderPath: string) => {
+const useLoader = (config: {
+    decoderPath: string
+}) => {
     const useTextureLoader = (url: string, callback?: (texture: THREE.Texture) => void) => {
         threeLoaders.TextureLoader = new THREE.TextureLoader()
         const texture = threeLoaders.TextureLoader.load(url, (texture) => {
@@ -68,7 +70,7 @@ const useLoader = (decoderPath: string) => {
 
     const setGLTFLoader = () => {
         threeLoaders.DRACOLoader = new DRACOLoader()
-        threeLoaders.DRACOLoader.setDecoderPath(decoderPath)
+        threeLoaders.DRACOLoader.setDecoderPath(config.decoderPath)
         threeLoaders.DRACOLoader.preload()
 
         threeLoaders.GLTFLoader = new GLTFLoader()