龙卷风 第一版本

src/plugins/digitalCity/components/weather/stylizedTornado/experience.vue

@@ -0,0 +1,18 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-11-15 08:42:00
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-11-15 10:14:11
+-->
+<template>
+    <TresGroup>
+        <highlightMiddle :scale="[1.1, 4.6, 1.1]" :position="[0, -2, 0]" />
+        <tornadoOutter :scale="[0.6, 0.4, 0.6]" :position="[0, -2.5, 0]" />
+    </TresGroup>
+</template>
+<script setup lang="ts">
+import highlightMiddle from './highlightMiddle.vue'
+import tornadoOutter from './tornadoOutter.vue'
+</script>

src/plugins/digitalCity/components/weather/stylizedTornado/highlightMiddle.vue

@@ -0,0 +1,26 @@
+<template>
+    <TresGroup>
+        <TresMesh ref="meshRef" :geometry="nodes.Cylinder.geometry">
+            <meshSpiralMaterial frontColor="#111111" backColor="#ff810c" :intensity="2.7" :powerOffset="12" colorBoth />
+        </TresMesh>
+    </TresGroup>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRenderLoop } from '@tresjs/core'
+import { Resource } from 'PLS/resourceManager'
+import meshSpiralMaterial from './materials/meshSpiralMaterial.vue'
+
+const meshRef = ref(null)
+
+const { nodes } = Resource.getItem('spiral-middle.glb')
+const { onLoop } = useRenderLoop()
+onLoop(({ delta, elapsed }) => {
+    if (meshRef.value) {
+        const time = elapsed * 3.4
+        const scale = 0.2 * Math.sin(time) + 0.8
+        meshRef.value.rotation.y += delta * 6
+        meshRef.value.scale.set(scale, scale, scale)
+    }
+})
+</script>

src/plugins/digitalCity/components/weather/stylizedTornado/materials/meshSpiralMaterial.vue

@@ -0,0 +1,52 @@
+<template>
+    <TresShaderMaterial v-bind="tsMaterialConfig" />
+</template>
+<script setup lang="ts">
+import * as THREE from 'three'
+import { useRenderLoop } from '@tresjs/core'
+import { Resource } from 'PLS/resourceManager'
+import vertexShader from './shaders/spiral/vertex.glsl'
+import fragmentShader from './shaders/spiral/fragment.glsl'
+
+const props = withDefaults(
+    defineProps<{
+        frontColor?: string
+        backColor?: string
+        intensity?: number
+        powerOffset?: number
+        noiseCutOff?: number
+        colorBoth?: boolean
+    }>(),
+    {
+        frontColor: '#320564', // front color, should be darker
+        backColor: '#ec22ff', // back color, should be lighter
+        intensity: 1.5, // intensity of back color
+        powerOffset: 4.0, // used to increase black of noise
+        noiseCutOff: 0.32, // controls the step function for the noise cut off
+        colorBoth: false, // decide if you color both sides
+    },
+)
+const pTexture = Resource.getItem('noiseVoronoi.png')
+
+const tsMaterialConfig = {
+    uniforms: {
+        uTime: { value: 0 },
+        uFrontColor: { value: new THREE.Color(props.frontColor) },
+        uBackColor: { value: new THREE.Color(props.backColor).multiplyScalar(props.intensity) },
+        uNoise: { value: pTexture },
+        uPowerOffset: { value: props.powerOffset },
+        uNoiseCutOff: { value: props.noiseCutOff },
+        uColorBoth: { value: props.colorBoth },
+    },
+    vertexShader,
+    fragmentShader,
+    transparent: true,
+    side: THREE.DoubleSide,
+}
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+    tsMaterialConfig.uniforms.uTime.value += delta
+})
+</script>

src/plugins/digitalCity/components/weather/stylizedTornado/materials/meshTornadoMaterial.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-11-15 09:23:02
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-11-15 09:36:55
+-->
+<template>
+    <TresShaderMaterial v-bind="tsMaterialConfig" />
+</template>
+<script setup lang="ts">
+import * as THREE from 'three'
+import { useRenderLoop } from '@tresjs/core'
+import vertexShader from './shaders/tornado/vertex.glsl'
+import fragmentShader from './shaders/tornado/fragment.glsl'
+
+const props = withDefaults(
+	defineProps<{
+		colorBase?: string
+		colorIntensity?: number
+		twirlAmount?: number
+		radialShearAmount?: THREE.Vector2
+		twirlOffset?: THREE.Vector2
+		radialOffset?: THREE.Vector2
+		twirlCenter?: THREE.Vector2
+		radialCenter?: THREE.Vector2
+		noisePower?: number
+		alphaThreshold?: number
+		showEdge?: boolean
+	}>(),
+	{
+    colorBase : '#ff821c', // base color
+    colorIntensity : 12, // color intensity for bloom
+    twirlAmount : 8, // amount to twirl by
+    radialShearAmount : new THREE.Vector2( 5.0, 5.0 ), // amount to radial shear by
+    twirlOffset : new THREE.Vector2( 0.0, 0.5 ), // amount to offset twirl time
+    radialOffset : new THREE.Vector2( 0.0, 0.5 ), // amount to offset radial time
+    twirlCenter : new THREE.Vector2( 0.5, -0.5 ), // cennter of swirl
+    radialCenter : new THREE.Vector2( 0.5, 0.5 ), // center of radial shear
+    noisePower : 1, // power value for noise
+    alphaThreshold : 0.17, // controls alpha clip
+    showEdge : false, // show cuttoff edge
+	},
+)
+
+const tsMaterialConfig = {
+	uniforms: {
+			uTime: { value: 0 },
+			uColor: { value: new THREE.Color(props.colorBase).multiplyScalar(props.colorIntensity) },
+			uTwirl: { value: props.twirlAmount },
+			uRadialShear: { value: props.radialShearAmount },
+			uTwirlOffset: { value: props.twirlOffset },
+			uRadialOffset: { value: props.radialOffset },
+			uTwirlCenter: { value: props.twirlCenter },
+			uRadialCenter: { value: props.radialCenter },
+			uNoisePower: { value: props.noisePower },
+			uAlphaThreshold: { value: props.alphaThreshold },
+			uEdge: { value: props.showEdge },
+	},
+	vertexShader,
+	fragmentShader,
+	transparent: true,
+	side: THREE.DoubleSide,
+	depthWrite: true,
+	depthTest: true,
+}
+
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+	tsMaterialConfig.uniforms.uTime.value += delta
+})
+</script>

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/noise/noiseFBM.glsl

@@ -0,0 +1,39 @@
+float random(vec2 uv) 
+{
+    return fract(sin(dot(uv.xy,
+        vec2(12.9898,78.233))) *
+            43758.5453123);
+}
+
+float noise(vec2 uv) 
+{
+    vec2 uv_index = floor(uv);
+    vec2 uv_fract = fract(uv);
+
+    // Four corners in 2D of a tile
+    float a = random(uv_index);
+    float b = random(uv_index + vec2(1.0, 0.0));
+    float c = random(uv_index + vec2(0.0, 1.0));
+    float d = random(uv_index + vec2(1.0, 1.0));
+
+    vec2 blur = smoothstep(0.0, 1.0, uv_fract);
+
+    return mix(a, b, blur.x) +
+            (c - a) * blur.y * (1.0 - blur.x) +
+            (d - b) * blur.x * blur.y;
+}
+
+float noiseFBM(vec2 uv) 
+{
+    int octaves = 6;
+    float amplitude = 0.5;
+    float frequency = 3.0;
+	float value = 0.0;
+	
+    for(int i = 0; i < octaves; i++) {
+        value += amplitude * noise(frequency * uv);
+        amplitude *= 0.5;
+        frequency *= 2.0;
+    }
+    return value;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/noise/noisePerlin.glsl

@@ -0,0 +1,19 @@
+vec2 random(vec2 uv)
+{
+    uv = vec2( dot(uv, vec2(127.1,311.7) ),
+               dot(uv, vec2(269.5,183.3) ) );
+    return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
+}
+
+float noisePerlin(vec2 uv) 
+{
+    vec2 uv_index = floor(uv);
+    vec2 uv_fract = fract(uv);
+
+    vec2 blur = smoothstep(0.0, 1.0, uv_fract);
+
+    return mix( mix( dot( random(uv_index + vec2(0.0,0.0) ), uv_fract - vec2(0.0,0.0) ),
+                     dot( random(uv_index + vec2(1.0,0.0) ), uv_fract - vec2(1.0,0.0) ), blur.x),
+                mix( dot( random(uv_index + vec2(0.0,1.0) ), uv_fract - vec2(0.0,1.0) ),
+                     dot( random(uv_index + vec2(1.0,1.0) ), uv_fract - vec2(1.0,1.0) ), blur.x), blur.y) + 0.5;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/noise/noiseRandom.glsl

@@ -0,0 +1,5 @@
+float noiseRandom(vec2 uv) 
+{
+    return fract(sin(dot(uv.xy,
+        vec2(12.9898,78.233))) * 43758.5453123);
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/noise/noiseSimple.glsl

@@ -0,0 +1,49 @@
+float randomSimple(vec2 n) { 
+	return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float interpolate( float a, float b, float t )
+{
+    return ( 1.0 - t ) * a + ( t * b );
+}
+
+float valueNoise( vec2 uv )
+{
+    vec2 i = floor( uv );
+    vec2 f = fract( uv );
+    f = f * f * ( 3.0 - 2.0 * f );
+
+    uv = abs( fract( uv ) - 0.5 );
+    vec2 c0 = i + vec2(0.0, 0.0);
+    vec2 c1 = i + vec2(1.0, 0.0);
+    vec2 c2 = i + vec2(0.0, 1.0);
+    vec2 c3 = i + vec2(1.0, 1.0);
+    float r0 = randomSimple(c0);
+    float r1 = randomSimple(c1);
+    float r2 = randomSimple(c2);
+    float r3 = randomSimple(c3);
+
+    float bottomOfGrid = interpolate(r0, r1, f.x);
+    float topOfGrid = interpolate(r2, r3, f.x);
+    float t = interpolate(bottomOfGrid, topOfGrid, f.y);
+    return t;
+}
+
+float noiseSimple( vec2 UV, float Scale )
+{
+    float t = 0.0;
+
+    float freq = pow(2.0, float(0));
+    float amp = pow(0.5, float(3-0));
+    t += valueNoise(vec2(UV.x*Scale/freq, UV.y*Scale/freq))*amp;
+
+    freq = pow(2.0, float(1));
+    amp = pow(0.5, float(3-1));
+    t += valueNoise(vec2(UV.x*Scale/freq, UV.y*Scale/freq))*amp;
+
+    freq = pow(2.0, float(2));
+    amp = pow(0.5, float(3-2));
+    t += valueNoise(vec2(UV.x * Scale / freq, UV.y * Scale / freq ) ) * amp;
+
+    return t;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/noise/noiseVoronoi.glsl

@@ -0,0 +1,27 @@
+vec2 randomVoronoi(vec2 uv) 
+{
+	return vec2(fract(sin(dot(uv.xy,
+		vec2(12.9898,78.233))) * 43758.5453123));
+}
+
+float noiseVoronoi(vec2 uv, float columns, float rows) 
+{
+	
+	vec2 index_uv = floor(vec2(uv.x * columns, uv.y * rows));
+	vec2 fract_uv = fract(vec2(uv.x * columns, uv.y * rows));
+	
+	float minimum_dist = 1.0;  
+	
+	for (int y= -1; y <= 1; y++) {
+		for (int x= -1; x <= 1; x++) {
+			vec2 neighbor = vec2(float(x),float(y));
+			vec2 point = randomVoronoi(index_uv + neighbor);
+			
+			vec2 diff = neighbor + point - fract_uv;
+			float dist = length(diff);
+			minimum_dist = min(minimum_dist, dist);
+		}
+	}
+	
+	return minimum_dist;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/spiral/fragment.glsl

@@ -0,0 +1,58 @@
+uniform float uTime;
+uniform vec3 uFrontColor;
+uniform vec3 uBackColor;
+uniform sampler2D uNoise;
+uniform float uPowerOffset;
+uniform float uNoiseCutOff;
+uniform bool uColorBoth;
+
+in vec2 vUv;
+
+#include ../util/clip.glsl
+#include ../uv/tileOffset.glsl
+
+void main()
+{
+    vec2 uv = vUv;
+
+    vec2 timeOffset = vec2( uTime * 0.6, 0.0 );
+
+    //vec2 uvTiled =  mod( ( uv * 1.0 ) + timeOffset, 1.0 );
+
+    // noise from texture sampled at r channel
+    vec3 noiseVoronoi = texture( uNoise, uv ).rgb;
+
+    float uvCutOff = uv.y;
+
+    uvCutOff = smoothstep( 0.02, 1.0, uvCutOff + 0.2  );
+
+    // create a cutoff threshold using pow to increase dark
+    float noiseCutOff = pow( noiseVoronoi.r, uPowerOffset );
+
+    //noiseCutOff = step( uNoiseCutOff, noiseCutOff );
+
+    // assign colors with noise
+    vec3 colorFront = uFrontColor;
+    colorFront *= noiseCutOff;
+
+    vec3 colorBack = uBackColor;
+    colorBack *= noiseCutOff;
+
+    // assign color based on if that fragment is front or back
+    vec3 colorFinal = colorFront;
+
+    if( uColorBoth )
+    {
+        colorFinal = ( ( gl_FrontFacing ) ? colorFront : colorBack );
+    }
+
+    // clip based on noise cutoff
+    clip( noiseCutOff, uNoiseCutOff, 0 );
+
+    gl_FragColor = vec4( colorFinal, noiseCutOff * uvCutOff );
+    //gl_FragColor = vec4( vec3( uvCutOff ), uvCutOff );
+
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/spiral/vertex.glsl

@@ -0,0 +1,11 @@
+out vec2 vUv;
+
+void main()
+{
+    
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+    vUv = uv;
+    
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/tornado/fragment.glsl

@@ -0,0 +1,62 @@
+uniform float uTime;
+uniform vec3 uColor;
+uniform float uTwirl;
+uniform vec2 uRadialShear;
+uniform vec2 uTwirlOffset;
+uniform vec2 uRadialOffset;
+uniform vec2 uTwirlCenter;
+uniform vec2 uRadialCenter;
+uniform float uNoisePower;
+uniform float uAlphaThreshold;
+uniform bool uEdge;
+
+in vec2 vUv;
+
+#include ../util/clip.glsl
+#include ../uv/twirl.glsl
+#include ../uv/radialShear.glsl
+#include ../noise/noiseSimple.glsl
+#include ../util/remap.glsl
+
+void main()
+{
+
+    vec2 uv = vUv;
+    float time = uTime;
+
+    vec2 twirlOffset = vec2( time * uTwirlOffset.x, time * uTwirlOffset.y );
+    vec2 radialOffset = vec2( time * uRadialOffset.x, time * uRadialOffset.y );
+
+    float uvCutOff = uv.y;
+    uvCutOff = smoothstep( 0.2, 1.0, uvCutOff + 0.2 );
+
+
+    vec2 uvRadial = radialShear( uv, uRadialCenter, uRadialShear, radialOffset );
+    vec2 uvTwirl = twirl( uv, uTwirlCenter, uTwirl, twirlOffset );
+
+    float noiseRadial = noiseSimple( uvRadial, 20.0 );
+    float noiseTwirl = noiseSimple( uvTwirl, 20.0 );
+
+    float noise = noiseRadial * noiseTwirl;
+
+    noise = pow( noise, uNoisePower );
+
+    float dissolve = remap( noise, 0.0, 1.0, 1.0, 0.0 );
+
+    vec3 colorFinal = uColor;
+    colorFinal *= noise;
+
+    clip( noise, uAlphaThreshold, 0 );
+
+    vec4 color = vec4( colorFinal, dissolve );
+
+    if( uEdge )
+    {
+        color.a *= uvCutOff;
+    }
+
+    gl_FragColor = color;
+    #include <tonemapping_fragment>
+    #include <colorspace_fragment>
+
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/tornado/vertex.glsl

@@ -0,0 +1,10 @@
+
+
+out vec2 vUv;
+
+void main()
+{
+    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+    vUv = uv;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/util/clip.glsl

@@ -0,0 +1,30 @@
+void clip( float clipValue, float alphaThreshold, int type )
+{
+    // switch operation because were only value checking type
+    switch( type )
+    {
+        case 0: // 0 means less than
+            if( clipValue < alphaThreshold ) discard;
+        break;
+
+        case 1: // 1 means greater than
+            if( clipValue > alphaThreshold ) discard;
+        break;
+
+        case 2: // less than equal to
+            if( clipValue <= alphaThreshold ) discard;
+        break;
+
+        case 3: // greater than equal 2
+            if( clipValue >= alphaThreshold ) discard;
+        break;
+
+        case 4: // equal to
+            if( clipValue == alphaThreshold ) discard;
+        break;
+
+        default: // defaults to less than
+            if( clipValue < alphaThreshold ) discard;
+        break;
+    }
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/util/remap.glsl

@@ -0,0 +1,4 @@
+float remap( float value, float min1, float max1, float min2, float max2 ) 
+{
+  return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/uv/radialShear.glsl

@@ -0,0 +1,19 @@
+vec2 radialShear( vec2 uv, vec2 center, float strength, vec2 offset )
+{
+    vec2 delta = uv - center;
+    float delta2 = dot( delta.xy, delta.xy );
+
+    float deltaOffset = delta2 * strength;
+
+    return uv + vec2( delta.y, -delta.x) * deltaOffset + offset;
+}
+
+vec2 radialShear( vec2 uv, vec2 center, vec2 strength, vec2 offset )
+{
+    vec2 delta = uv - center;
+    vec2 delta2 =  vec2( dot( delta.xy, delta.xy ) );
+
+    vec2 deltaOffset = delta2 * strength;
+
+    return uv + vec2( delta.y, -delta.x) * deltaOffset + offset;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/uv/rotate2D.glsl

@@ -0,0 +1,6 @@
+vec2 rotate2D(vec2 v, float a) {
+	float s = sin(a);
+	float c = cos(a);
+	mat2 m = mat2(c, s, -s, c);
+	return m * v;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/uv/swirl.glsl

@@ -0,0 +1,7 @@
+float swirl(vec2 uv, float size, int arms)
+{
+	float angle = atan(-uv.y + 0.5, uv.x - 0.5) ;
+	float len = length(uv - vec2(0.5, 0.5));
+	
+	return sin(len * size + angle * float(arms));
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/uv/tileOffset.glsl

@@ -0,0 +1,4 @@
+vec2 tileOffset( vec2 uv , vec2 tiling, vec2 offset )
+{
+    return  uv * tiling + offset;
+}

src/plugins/digitalCity/components/weather/stylizedTornado/materials/shaders/uv/twirl.glsl

@@ -0,0 +1,8 @@
+vec2 twirl(vec2 uv, vec2 center, float strength, vec2 offset)
+{
+    vec2 delta = uv - center;
+    float angle = strength * length(delta);
+    float x = cos(angle) * delta.x - sin(angle) * delta.y;
+    float y = sin(angle) * delta.x + cos(angle) * delta.y;
+    return vec2(x + center.x + offset.x, y + center.y + offset.y);
+}

src/plugins/digitalCity/components/weather/stylizedTornado/tornadoOutter.vue

@@ -0,0 +1,32 @@
+<!--
+ * @Description: 
+ * @Version: 1.668
+ * @Autor: 地虎降天龙
+ * @Date: 2024-11-15 09:21:41
+ * @LastEditors: 地虎降天龙
+ * @LastEditTime: 2024-11-15 10:03:30
+-->
+<template>
+    <TresGroup>
+        <TresMesh :geometry="nodes.tornado.geometry">
+            <meshTornadoMaterial
+                colorBase="#3a3a3a"
+                :colorIntensity="2"
+                :twirlAmount="6"
+                :radialShearAmount="new THREE.Vector2(0.9, 0.9)"
+                :twirlCenter="new THREE.Vector2(0.5, -0.52)"
+                :twirlOffset="new THREE.Vector2(-0.5, -0.25)"
+                :radialOffset="new THREE.Vector2(-0.5, 0.5)"
+                :alphaThreshold="0.18"
+                :showEdge="false"
+            />
+        </TresMesh>
+    </TresGroup>
+</template>
+<script setup lang="ts">
+import * as THREE from 'three'
+import { Resource } from 'PLS/resourceManager'
+import meshTornadoMaterial from './materials/meshTornadoMaterial.vue'
+
+const { nodes } = Resource.getItem('tornado.glb')
+</script>

src/plugins/digitalCity/config.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2024-08-19 20:24:59
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-10-12 08:12:15
+ * @LastEditTime: 2024-11-15 08:38:03
  */
 export default {
     name: 'digitalCity',
@@ -23,6 +23,7 @@ export default {
         { src: 'plugins/digitalCity/preview/depthBufferDiffuse.png', type: 'img', name: 'depthBufferDiffuse', title: '带深度的半球扩散' },
         { src: 'plugins/digitalCity/preview/weather.png', type: 'img', name: 'weather', title: '天气' },
         { src: 'plugins/digitalCity/preview/lightningStorm.png', type: 'img', name: 'lightningStorm', title: '闪电' },
+        { src: 'plugins/digitalCity/preview/stylizedTornado.png', type: 'img', name: 'stylizedTornado', title: '漫画龙卷风' },
         { src: 'plugins/digitalCity/preview/clouds.png', type: 'img', name: 'clouds', title: '云☁️' },
         { src: 'plugins/digitalCity/preview/clouds2.png', type: 'img', name: 'clouds2', title: '云彩2☁️' },
         { src: 'plugins/digitalCity/preview/fog.png', type: 'img', name: 'fog', title: '迷雾' },

src/plugins/digitalCity/pages/stylizedTornado.vue

@@ -0,0 +1,21 @@
+<template>
+    <loading useResourceManager />
+    <pagesShow :showAxesHelper="false">
+        <template v-slot:ability>
+            <experience v-if="Resource.hasAllFinished.value" :position="[10, 300, 0]" :scale="100" />
+        </template>
+    </pagesShow>
+</template>
+
+<script setup lang="ts">
+import { Resource } from 'PLS/resourceManager'
+import { yangyangLoading as loading } from 'PLS/UIdemo'
+import pagesShow from '../components/pagesShow.vue'
+import experience from '../components/weather/stylizedTornado/experience.vue'
+
+Resource.loadResources([
+    { functionName: 'GLTFLoader', url: './plugins/digitalCity/model/spiral-middle.glb' },
+    { functionName: 'GLTFLoader', url: './plugins/digitalCity/model/tornado.glb' },
+    { functionName: 'TextureLoader', url: './plugins/digitalCity/image/noise/noiseVoronoi.png' },
+])
+</script>