easy-three-utils 0.0.2 → 0.0.31

package/index.ts

@@ -3,9 +3,9 @@ import { useMark, EMarkDefaultStyle } from './src/common/useMark'
 import { useLine2 } from './src/common/useLine2'
 import { useLocationCalculator } from './src/common/useLocationCalculator'
 import { Animation } from './src/common/useTween'
+import { useWeather, EWeatherType } from './src/common/useWeather'
 import { useThree } from './src/core/main'
 
-
 import type { IPathItem } from './src/common/useTween'
 
 export {
@@ -18,7 +18,10 @@ export {
 
     useLocationCalculator,
 
-    Animation
+    Animation,
+
+    useWeather,
+    EWeatherType
 }
 
 export type {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-three-utils",
-  "version": "0.0.2",
+  "version": "0.0.31",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -9,4 +9,4 @@
   "license": "ISC",
   "types": "./index.d.ts",
   "description": ""
-}
+}

package/src/common/useLoader.ts

@@ -7,9 +7,8 @@ import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
 import { TGALoader } from 'three/examples/jsm/loaders/TGALoader.js'
 import { TilesRenderer } from '../tileRenderer'
 import { GoogleCloudAuthPlugin } from '../tileRenderer/plugins';
-import { enableDefaultEvent, EDefaultEvent } from '../core'
+import { enableDefaultEvent, EDefaultEvent } from '../../index'
 
-//todo 1.曝光
 interface IThreeLoaders {
     GLTFLoader: GLTFLoader | null,
     DRACOLoader: DRACOLoader | null,
@@ -159,7 +158,6 @@ const useLoader = () => {
         callback && callback(tilesRenderer, clear)
     }
 
-    //todo 1.多动画封装 2.动画库封装 3.多动画加载时间差 4.同模型克隆
     const useMixer: (object: THREE.Object3D, animate: THREE.AnimationClip) => { mixer: THREE.AnimationMixer, action: THREE.AnimationAction } = (object: THREE.Object3D, animate: THREE.AnimationClip) => {
         const mixer = new THREE.AnimationMixer(object)
         const action = mixer.clipAction(animate);

package/src/common/useWeather.ts

@@ -0,0 +1,71 @@
+import * as  THREE from 'three'
+import { snowVertexShader, snowFragmentShader } from '../shader/snow'
+
+enum EWeatherType {
+    NORMAL = 'normal',
+    SNOW = 'snow'
+}
+
+const useWeather = () => {
+    const snowGroup = new THREE.Group()
+    snowGroup.name = 'weather_' + 'snow_' + new Date().getTime()
+    let globalConfig: ITHREEConfiguration | null = null
+
+    const initSnow = (config: ITHREEConfiguration) => {
+        const { width, height } = config.renderer!.getDrawingBufferSize(
+            new THREE.Vector2()
+        );
+
+        const shader = new THREE.ShaderMaterial({
+            vertexShader: snowVertexShader,
+            fragmentShader: snowFragmentShader,
+            uniforms: {
+                iResolution: { value: new THREE.Vector2(width, height) },
+                iTime: { value: 0 }
+            },
+        });
+
+        const plane = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), shader);
+        plane.name = 'snowPlane'
+        plane.material.transparent = true
+        plane.onBeforeRender = () => {
+            shader.uniforms.iTime.value += 0.01;
+        };
+
+        config.control?.addEventListener('change', () => {
+            const plane = config.scene?.getObjectByName('snowPlane')
+            if (plane) {
+                plane.position.copy(config.camera!.position);
+                plane.rotation.copy(config.camera!.rotation);
+                plane.translateZ(-10);
+            }
+        })
+
+        snowGroup.add(plane)
+    }
+
+    const updateWeatherEffect = (type: EWeatherType, config: ITHREEConfiguration) => {
+        if (!globalConfig) {
+            globalConfig = config
+            initSnow(config)
+        }
+
+        switch (type) {
+            case EWeatherType.NORMAL:
+                config.scene.remove(snowGroup)
+                break;
+            case EWeatherType.SNOW:
+                config.scene.add(snowGroup)
+                break;
+        }
+    }
+
+    return {
+        updateWeatherEffect
+    }
+}
+
+export {
+    useWeather,
+    EWeatherType
+}

package/src/core/main.ts

@@ -122,7 +122,6 @@ const useThree = () => {
         succeededCallback && succeededCallback(threeConfiguration)
     }
 
-    //todo 设置参数 光源辅助线
     const setScene = (options: ITHREEOptions) => {
         threeConfiguration.scene?.add(threeConfiguration.light.ambient!)
         threeConfiguration.scene?.add(threeConfiguration.light.directional.light!)

package/src/shader/snow.ts

@@ -0,0 +1,48 @@
+const snowVertexShader = `
+        varying vec2 vUv;
+        void main() {
+        vUv = uv;
+        vec4 viewPosition = modelViewMatrix * vec4(position, 1.0);
+        gl_Position = projectionMatrix * viewPosition;
+      }`
+
+const snowFragmentShader = `
+        varying vec2 vUv;
+        uniform vec3 iResolution;     
+        uniform float iTime;             
+        void main()
+        {
+            float snow = 0.0;
+            float gradient = (1.0-float(gl_FragCoord.y / iResolution.x))*0.4;
+            float random = fract(sin(dot(gl_FragCoord.xy,vec2(12.9898,78.233)))* 43758.5453);
+            for(int k=0;k<6;k++){
+            for(int i=0;i<12;i++){
+                float cellSize = 2.0 + (float(i)*3.0);
+                float downSpeed = 0.3+(sin(iTime*0.4+float(k+i*20))+1.0)*0.00008;
+                vec2 uv = (gl_FragCoord.xy / iResolution.x)+vec2(0.01*sin((iTime+float(k*6185))*0.6+float(i))*(5.0/float(i)),downSpeed*(iTime+float(k*1352))*(1.0/float(i)));
+                vec2 uvStep = (ceil((uv)*cellSize-vec2(0.5,0.5))/cellSize);
+                float x = fract(sin(dot(uvStep.xy,vec2(12.9898+float(k)*12.0,78.233+float(k)*315.156)))* 43758.5453+float(k)*12.0)-0.5;
+                float y = fract(sin(dot(uvStep.xy,vec2(62.2364+float(k)*23.0,94.674+float(k)*95.0)))* 62159.8432+float(k)*12.0)-0.5;
+
+                float randomMagnitude1 = sin(iTime*2.5)*0.7/cellSize;
+                float randomMagnitude2 = cos(iTime*2.5)*0.7/cellSize;
+
+                float d = 5.0*distance((uvStep.xy + vec2(x*sin(y),y)*randomMagnitude1 + vec2(y,x)*randomMagnitude2),uv.xy);
+
+                float omiVal = fract(sin(dot(uvStep.xy,vec2(32.4691,94.615)))* 31572.1684);
+                if(omiVal<0.08?true:false){
+                    float newd = (x+1.0)*0.4*clamp(1.9-d*(15.0+(x*6.3))*(cellSize/1.4),0.0,1.0);
+                    /*snow += d<(0.08+(x*0.3))/(cellSize/1.4)?
+                        newd
+                        :newd;*/
+                    snow += newd;
+                }
+            }
+        }
+        gl_FragColor = vec4(snow)+gradient*vec4(0.4,0.8,1.0,0.0) + random*0.01;
+      }`
+
+export {
+    snowVertexShader,
+    snowFragmentShader
+}