点击建筑

package.json

@@ -34,6 +34,7 @@
     "@antv/l7-renderer": "2.15.0",
     "@antv/l7-scene": "2.15.0",
     "@antv/l7-source": "2.15.0",
+    "@antv/l7-three": "2.15.0",
     "@antv/l7-utils": "2.15.0",
     "@antv/s2": "1.35.0",
     "@antv/util": "^2.0.17",
@@ -65,14 +66,17 @@
     "lodash.isstring": "^4.0.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "popmotion": "^11.0.5",
     "screenfull": "4.2.0",
     "sockjs-client": "^1.6.0",
     "stompjs": "^2.3.3",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
+    "three": "^0.115.0",
     "tinymce": "^5.8.2",
     "umy-ui": "^1.1.6",
     "vue": "2.6.10",
+    "vue-amap": "^0.5.10",
     "vue-clipboard2": "0.3.1",
     "vue-codemirror": "^4.0.6",
     "vue-friendly-iframe": "^0.20.0",
@@ -89,8 +93,7 @@
     "vuex": "3.1.0",
     "webpack": "^4.46.0",
     "xlsx": "^0.17.0",
-    "xss": "^1.0.14",
-		"vue-amap": "^0.5.10"
+    "xss": "^1.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0-0",

src/lang/zh.js

@@ -1370,6 +1370,7 @@ export default {
     table_column_custom: '自定义',
     chart_table_pivot: '透视表',
     chart_heat_map: '热力图',
+    chart_building: '点击建筑',
     chart_3d_column_chart_map: '3D柱图',
     table_pivot_row: '数据行',
     field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',

src/views/chart/chart/building/building.js

+import { getLabel, getLegend, getPadding, getTheme, getTooltip, getXAxis } from '@/views/chart/chart/common/common_antv'
+import { antVCustomColor } from '@/views/chart/chart/util'
+import { Scene } from '@antv/l7'
+import { GaodeMap } from '@antv/l7-maps'
+import { ThreeLayer, ThreeRender } from '@antv/l7-three'
+import * as THREE from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
+import { animate, easeInOut } from 'popmotion'
+export function baseBuildingOptionAntV(scene, container, chart, action) {
+
+  function changeValue(
+    startValue,
+    endValue,
+    duration = 500,
+    callback,
+    complete
+  ) {
+    if (typeof startValue === 'number') {
+      animate({
+        from: {
+          v: startValue
+        },
+        to: {
+          v: endValue
+        },
+        ease: easeInOut,
+        duration,
+        onUpdate: o => {
+          callback(o.v)
+          return ''
+        },
+        onComplete: () => {
+          complete && complete()
+          return ''
+        }
+      })
+    } else {
+      animate({
+        from: {
+          lng: startValue.lng,
+          lat: startValue.lat,
+          pitch: startValue.pitch,
+          rotation: startValue.rotation,
+          zoom: startValue.zoom
+        },
+        to: {
+          lng: (endValue).lng,
+          lat: (endValue).lat,
+          pitch: (endValue).pitch,
+          rotation: (endValue).rotation,
+          zoom: (endValue).zoom
+        },
+        ease: easeInOut,
+        duration,
+        onUpdate: o => {
+          callback(o)
+          return ''
+        },
+        onComplete: () => {
+          complete && complete()
+          return ''
+        }
+      })
+    }
+    return ''
+  }
+
+  const raycaster = new THREE.Raycaster()
+  const lng = 120.1
+  const lat = 30.265
+  scene = new Scene({
+    id: container,
+    map: new GaodeMap({
+      center: [lng, lat],
+      pitch: 70,
+      rotation: 220,
+      zoom: 16,
+    }),
+    logoVisible: false
+  })
+
+  scene.on('loaded', () => {
+    const mouse = new THREE.Vector2()
+    let zspace,
+      aspace,
+      ASpaceTextMesh,
+      ZSpaceTextMesh
+
+    scene.registerRenderService(ThreeRender)
+
+    const center = scene.getCenter()
+
+    const threeJSLayer = new ThreeLayer({
+      enableMultiPassRenderer: false,
+      // @ts-ignore
+      onAddMeshes: (threeScene, layer) => {
+        threeScene.add(new THREE.AmbientLight(0xffffff))
+        const sunlight = new THREE.DirectionalLight(0xffffff, 0.25)
+        sunlight.position.set(0, 80000000, 100000000)
+        sunlight.matrixWorldNeedsUpdate = true
+        threeScene.add(sunlight)
+
+        // map
+        // https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ
+
+        // height
+        // https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ
+
+        const image = new Image()
+        image.crossOrigin = ''
+        image.src =
+          'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*eYFaRYlnnOUAAAAAAAAAAAAAARQnAQ'
+        image.onload = () => {
+          const canvas = document.createElement('canvas')
+          canvas.width = image.width
+          canvas.height = image.height
+          const ctx = canvas.getContext('2d')
+          ctx.drawImage(image, 0, 0, image.width, image.height)
+          const heightData = ctx.getImageData(0, 0, image.width, image.height)
+            .data
+
+          const s = 53000
+
+          const geometry = new THREE.PlaneGeometry(s, s, 255, 255)
+
+          geometry.vertices.map((v, i) => {
+            const r = heightData[i * 4]
+            const g = heightData[i * 4 + 1]
+            const b = heightData[i * 4 + 2]
+            let h =
+              -10000.0 +
+              (r * 255.0 * 256.0 * 256.0 + g * 255.0 * 256.0 + b * 255.0) *
+              0.1
+            h = h / 20 - 127600
+            h = Math.max(0, h)
+
+            v.z = h
+            return ''
+          })
+          const material = new THREE.MeshPhongMaterial({
+            transparent: true,
+            // opacity: 0.6,
+            map: new THREE.TextureLoader().load(
+              'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*gA0NRbuOF5cAAAAAAAAAAAAAARQnAQ'
+            ),
+            side: THREE.DoubleSide
+          })
+          const plane = new THREE.Mesh(geometry, material)
+          layer.setObjectLngLat(plane, [120.1008, 30.2573], 0)
+          plane.position.z = 10
+          threeScene.add(plane)
+
+          return ''
+        }
+
+        // 使用 Three.js glTFLoader 加载模型
+        const loader = new GLTFLoader()
+        loader.load(
+          'https://gw.alipayobjects.com/os/bmw-prod/3ca0a546-92d8-4ba0-a89c-017c218d5bea.gltf',
+          gltf => {
+            const antModel = gltf.scene
+            setDouble(antModel)
+            // antModel.children[0].material.side = THREE.DoubleSide
+            layer.adjustMeshToMap(antModel)
+            layer.setMeshScale(antModel, 20, 20, 20)
+            layer.setObjectLngLat(
+              antModel,
+              [center.lng - 0.002, center.lat],
+              0
+            )
+
+            const animations = gltf.animations
+            if (animations && animations.length) {
+              const mixer = new THREE.AnimationMixer(antModel)
+              const animation = animations[1]
+              const action = mixer.clipAction(animation)
+              action.play()
+              layer.addAnimateMixer(mixer)
+            }
+            antModel.rotation.y = Math.PI
+            // 向场景中添加模型
+            threeScene.add(antModel)
+            // 重绘图层
+            layer.render()
+            return ''
+          }
+        )
+
+        const v = `
+      varying vec2 vUv;
+      varying vec4 worldPosition;
+      void main() {
+          vUv = uv;
+          worldPosition = modelMatrix * vec4(position, 1.0);
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }`
+        const f = `
+      varying vec2 vUv;
+      varying vec4 worldPosition;
+      uniform vec3 color;
+      void main() {
+        gl_FragColor = vec4(color, fract(worldPosition.z / 50.0));
+      }`
+        const shadermaterial = new THREE.ShaderMaterial({
+          uniforms: {
+            color: {
+              value: new THREE.Vector3(0.21372549, 0.34705882, 0.56470588)
+            }
+          },
+          vertexShader: v,
+          fragmentShader: f,
+          side: THREE.DoubleSide
+        })
+
+        const fbxLoaded = new FBXLoader()
+        // load ZSpace
+        fbxLoaded.load(
+          'https://gw.alipayobjects.com/os/bmw-prod/af1652c9-3c4f-4e73-ac4c-1f78fefbaf6a.fbx',
+          gltf => {
+            zspace = gltf
+            layer.adjustMeshToMap(zspace)
+            // @ts-ignore
+            zspace.children[0].material = shadermaterial
+            layer.setMeshScale(zspace, 10, 10, 10)
+
+            layer.setObjectLngLat(zspace, [120.1015, 30.2661], 0)
+            zspace.rotation.x = Math.PI * 2
+            zspace.rotation.z = -Math.PI * (-2 / 15)
+            threeScene.add(zspace)
+
+            return ''
+          }
+        )
+
+        fbxLoaded.load(
+          'https://gw.alipayobjects.com/os/bmw-prod/11d6e4c1-bd5b-4dc1-bae5-ac51c14e9056.fbx',
+          model => {
+            aspace = model
+            layer.adjustMeshToMap(aspace)
+            // @ts-ignore
+            aspace.children[0].material = shadermaterial
+
+            layer.setMeshScale(aspace, 8, 8, 8)
+            layer.setObjectLngLat(aspace, [120.099, 30.261], 0)
+            aspace.rotation.x = Math.PI * 2
+            aspace.rotation.z = -Math.PI * (3 / 15)
+            threeScene.add(aspace)
+
+            return ''
+          }
+        )
+        const textLoader = new THREE.FontLoader()
+        textLoader.load(
+          'https://gw.alipayobjects.com/os/bmw-prod/0a3f46eb-294e-4d95-87f2-052c26ad4bf1.json',
+          font => {
+            const fontOptions = {
+              size: 360, // 字号大小，一般为大写字母的高度
+              height: 50, // 文字的厚度
+              font, // 字体，默认是'helvetiker'，需对应引用的字体文件
+              bevelThickness: 10, // 倒角厚度
+              bevelSize: 10, // 倒角宽度
+              curveSegments: 30, // 弧线分段数，使得文字的曲线更加光滑
+              bevelEnabled: true // 布尔值，是否使用倒角，意为在边缘处斜切
+            }
+            const aspaceGeo = new THREE.TextGeometry('ASpace', fontOptions)
+            aspaceGeo.center()
+            const zspaceGeo = new THREE.TextGeometry('ZSpace', fontOptions)
+            zspaceGeo.center()
+
+            const fontMat = new THREE.MeshPhongMaterial({
+              color: 0xcccccc,
+              shininess: 60,
+              specular: 0xcccccc,
+              side: THREE.DoubleSide
+            })
+
+            const testHeight = 900
+
+            ASpaceTextMesh = new THREE.Mesh(aspaceGeo, fontMat)
+            ASpaceTextMesh.rotation.x = Math.PI / 2
+            ASpaceTextMesh.rotation.y = (-Math.PI * 3) / 4
+            layer.setObjectLngLat(
+              ASpaceTextMesh,
+              [120.099, 30.261],
+              testHeight
+            )
+            threeScene.add(ASpaceTextMesh)
+
+            ZSpaceTextMesh = new THREE.Mesh(zspaceGeo, fontMat)
+            ZSpaceTextMesh.rotation.x = Math.PI / 2
+            ZSpaceTextMesh.rotation.y = (-Math.PI * 3) / 4
+            layer.setObjectLngLat(
+              ZSpaceTextMesh,
+              [120.103, 30.2661],
+              testHeight
+            )
+            threeScene.add(ZSpaceTextMesh)
+
+            getH(0, 200)
+            function getH(h1, h2) {
+              changeValue(
+                h1,
+                h2,
+                1000,
+                h => {
+                  ASpaceTextMesh.position.z = testHeight + h
+                  ZSpaceTextMesh.position.z = testHeight + h
+                  return ''
+                },
+                () => {
+                  setTimeout(() => getH(h2, h1), 10)
+                  return ''
+                }
+              )
+            }
+
+            return ''
+          }
+        )
+      }
+    })
+      .animate(true)
+    scene.addLayer(threeJSLayer)
+    // @ts-ignore
+    let currentCamera = threeJSLayer.threeRenderService?.getRenderCamera()
+    const currentView = {
+      lng: center.lng,
+      lat: center.lat,
+      pitch: 70,
+      rotation: 220,
+      zoom: 16
+    }
+
+    scene.on('zoom', () => {
+      const cen = scene.getCenter()
+      currentView.lng = cen.lng
+      currentView.lat = cen.lat
+      currentView.pitch = scene.getPitch()
+      currentView.zoom = scene.getZoom()
+      return ''
+    })
+
+    scene.map.on('mapchange', () => {
+      // @ts-ignore
+      currentCamera = threeJSLayer.getRenderCamera()
+      currentView.pitch = scene.getPitch()
+      return ''
+    })
+
+    const ASpaceView = {
+      lng: 120.109509,
+      lat: 30.251529,
+      pitch: 83,
+      rotation: 225,
+      zoom: 15
+    }
+    const ZSpaceView = {
+      lng: 120.112026,
+      lat: 30.256881,
+      pitch: 80,
+      rotation: 220,
+      zoom: 15
+    }
+
+    scene.on('click', ev => {
+      // @ts-ignore
+      const size = scene?.map?.getSize()
+      mouse.x = (ev.pixel.x / size.width) * 2 - 1
+      mouse.y = -(ev.pixel.y / size.height) * 2 + 1
+      raycaster.setFromCamera(mouse, currentCamera)
+      const intersects = raycaster.intersectObjects([zspace, aspace], true)
+      if (intersects.length > 0) {
+        const object = intersects[0].object
+        if (object.name === 'Z空间') {
+          selectSpace(currentView, ZSpaceView, ZSpaceTextMesh)
+        } else {
+          selectSpace(currentView, ASpaceView, ASpaceTextMesh)
+        }
+      }
+      return ''
+    })
+
+    function selectSpace(
+      currentView,
+      targetView,
+      spaceText
+    ) {
+      if (spaceText) {
+        changeValue(
+          spaceText.rotation.y,
+          spaceText.rotation.y + Math.PI * 2,
+          500,
+          r => {
+            spaceText.rotation.y = r
+            return ''
+          }
+        )
+      }
+
+      changeValue(currentView, targetView, 500, view => {
+        scene.setCenter([view.lng, view.lat])
+        scene.setPitch(view.pitch)
+        scene.setRotation(view.rotation)
+        scene.setZoom(view.zoom)
+
+        currentView.lng = view.lng
+        currentView.lat = view.lat
+        currentView.pitch = view.pitch
+        currentView.rotation = view.rotation
+        currentView.zoom = view.zoom
+
+        return ''
+      })
+    }
+    return ''
+  })
+
+  function setDouble(object) {
+    if (object.children && object.children.length && object.children.length > 0) {
+      object.children.map(child => setDouble(child))
+    } else if (object.material) {
+      object.material.side = THREE.DoubleSide
+    }
+  }
+  // 开始渲染
+  if (scene) {
+    scene.destroy()
+  }
+
+  return scene
+}
+

src/views/chart/chart/util.js

@@ -2145,6 +2145,40 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  // 点击建筑
+  {
+    render: 'antv',
+    category: 'chart.chart_type_space',
+    value: 'chart_building',
+    title: 'chart.chart_building',
+    icon: 'building',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'title-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'mapStyle'
+      ],
+      'size-selector-ant-v': [
+        'mapPitch'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ]
+    }
+  },
   /* 下面是echarts图表类型 */
   {
     render: 'echarts',

src/views/chart/components/ChartComponentG2.vue

@@ -66,7 +66,8 @@ import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
 import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
 import { baseCityBrightnessMapOptionAntV } from '@/views/chart/chart/cityBrightness/cityBrightness_antv'
 import { clear } from 'size-sensor'
-import {baseSankeyOptionAntV} from "@/views/chart/chart/sankey/sankey_antv";
+import { baseSankeyOptionAntV } from '@/views/chart/chart/sankey/sankey_antv'
+import { baseBuildingOptionAntV } from '@/views/chart/chart/building/building'
 export default {
   name: 'ChartComponentG2',
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@@ -262,6 +263,7 @@ export default {
           ]
         }
       }
+      console.log('chart.type ',chart.type )
       if (chart.type === 'bar') {
         this.myChart = baseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true, false)
       } else if (chart.type === 'bar-group') {
@@ -312,17 +314,18 @@ export default {
         this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'city-brightness') {
         this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-       }else if (chart.type === 'chart_sankey') {
+      } else if (chart.type === 'chart_sankey') {
         this.myChart = baseSankeyOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-       } else if (chart.type === 'threeDColumn') {
+      } else if (chart.type === 'threeDColumn') {
         this.myChart = base3DColumnOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-       } else {
+      } else if (chart.type === 'chart_building') {
+        this.myChart = baseBuildingOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else {
         if (this.myChart) {
           this.antVRenderStatus = false
           this.myChart.destroy()
         }
       }
-
       if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble', 'city-brightness') && this.searchCount > 0) {
         this.myChart.options.animation = false
       }

vue.config.js

@@ -42,7 +42,17 @@ module.exports = {
       filename: 'index.html'
     }
   },
+
   configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto'
+        }
+      ]
+    },
     name: name,
     devtool: 'source-map',
     resolve: {

yarn.lock

@@ -347,6 +347,17 @@
     reflect-metadata "^0.1.13"
     supercluster "^7.0.0"
 
+"@antv/l7-three@2.15.0":
+  version "2.15.0"
+  resolved "https://registry.npmmirror.com/@antv/l7-three/-/l7-three-2.15.0.tgz#ad92e3c0fba707443c54dbe1ccd241e19e09e5e1"
+  integrity sha512-FNbMiYT1k1w13JzxinZMPLWSLEhJc4b9QB7TkyAc1yUNI/az9nmC3EUGoLLl0AlOhyqtes4/R4Shiw9dgBNWrA==
+  dependencies:
+    "@antv/l7" "2.15.0"
+    "@babel/runtime" "^7.7.7"
+    inversify "^5.0.1"
+    reflect-metadata "^0.1.13"
+    three "0.115.0"
+
 "@antv/l7-utils@2.15.0":
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/@antv/l7-utils/-/l7-utils-2.15.0.tgz#ac49e04d77ecfb479923fa71caa2ba5b1c79dfe6"
@@ -5779,6 +5790,13 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framesync@6.1.2:
+  version "6.1.2"
+  resolved "https://registry.npmmirror.com/framesync/-/framesync-6.1.2.tgz#755eff2fb5b8f3b4d2b266dd18121b300aefea27"
+  integrity sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==
+  dependencies:
+    tslib "2.4.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -6280,6 +6298,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 highlight.js@^10.7.1:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -8986,6 +9009,16 @@ polyline-miter-util@^1.0.1:
   dependencies:
     gl-vec2 "^1.0.0"
 
+popmotion@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.npmmirror.com/popmotion/-/popmotion-11.0.5.tgz#8e3e014421a0ffa30ecd722564fd2558954e1f7d"
+  integrity sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==
+  dependencies:
+    framesync "6.1.2"
+    hey-listen "^1.0.8"
+    style-value-types "5.1.2"
+    tslib "2.4.0"
+
 portfinder@^1.0.20, portfinder@^1.0.26:
   version "1.0.32"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -10877,6 +10910,14 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+style-value-types@5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/style-value-types/-/style-value-types-5.1.2.tgz#6be66b237bd546048a764883528072ed95713b62"
+  integrity sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "2.4.0"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@@ -11159,6 +11200,11 @@ thread-loader@^2.1.2:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
+three@0.115.0, three@^0.115.0:
+  version "0.115.0"
+  resolved "https://registry.npmmirror.com/three/-/three-0.115.0.tgz#540d800c381b9da2334c024f0fbe4d23f84eb05e"
+  integrity sha512-mAV2Ky3RdcbdSbR9capI+tKLvRldWYxd4151PZTT/o7+U2jh9Is3a4KmnYwzyUAhB2ZA3pXSgCd2DOY4Tj5kow==
+
 throttle-debounce@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
@@ -11289,6 +11335,11 @@ tslib@2.3.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmmirror.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.10.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"