easy-threesdk 1.0.0 → 1.0.1

package/index.js

@@ -156,7 +156,8 @@ class ThreeSdk {
     const height = this.container.clientHeight;
 
     //初始化摄像机
-    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+    //注意在创建球体场景中我们设置球体场景的半径为1000，如果创建了球体场景那么我们相机的远裁剪面要远大于这个球体的半径不然屏幕中间会出现“黑洞”。所以保险起见我们对于相机的远裁剪面设置为比较大的10000。
+    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000);
     this.camera.position.set(position.x, position.y, position.z);
     this.camera.lookAt(lookAt.x, lookAt.y, lookAt.z);
 
@@ -262,7 +263,7 @@ class ThreeSdk {
           const point = groundIntersects[0].point;
           this._RoamConfig.groundCircle.position.set(
             point.x,
-            point.y + 0.01,
+            point.y + 0.01, //这个圆圈显示的高度位置具体需要根据你创建的模型的地形高度来设置，根据你加载的模型多测几次微调几遍就行了
             point.z
           ); // 稍微抬高避免z-fighting
           this._RoamConfig.groundCircle.visible = true;
@@ -502,6 +503,7 @@ class ThreeSdk {
         const target = this.camera.position
           .clone()
           .add(direction.multiplyScalar(10));
+
         this.camera.lookAt(target);
       }
     } else {

package/loader/WaterMaterial/WaterEffect.js

@@ -0,0 +1,255 @@
+import * as THREE from 'three';
+
+// Helper to load shader files
+function loadFile(filename) {
+    return new Promise((resolve, reject) => {
+        const loader = new THREE.FileLoader();
+        loader.load(filename, (data) => {
+            resolve(data);
+        }, undefined, reject);
+    });
+}
+
+const defaultLight = [0.7559289460184544, 0.7559289460184544, -0.3779644730092272];
+
+class WaterSimulation {
+    constructor() {
+        this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
+        this._geometry = new THREE.PlaneGeometry(2, 2);
+
+        this._textureA = new THREE.WebGLRenderTarget(256, 256, { type: THREE.FloatType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter });
+        this._textureB = new THREE.WebGLRenderTarget(256, 256, { type: THREE.FloatType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter });
+        this.texture = this._textureA;
+
+        const shadersPromises = [
+            loadFile('./resource/shaders/simulation/vertex.glsl'),
+            loadFile('./resource/shaders/simulation/drop_fragment.glsl'),
+            loadFile('./resource/shaders/simulation/normal_fragment.glsl'),
+            loadFile('./resource/shaders/simulation/update_fragment.glsl'),
+        ];
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, dropFragmentShader, normalFragmentShader, updateFragmentShader]) => {
+                const dropMaterial = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        center: { value: [0, 0] },
+                        radius: { value: 0 },
+                        strength: { value: 0 },
+                        texture: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: dropFragmentShader,
+                });
+
+                const normalMaterial = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        delta: { value: [1 / 256, 1 / 256] },
+                        texture: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: normalFragmentShader,
+                });
+
+                const updateMaterial = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        delta: { value: [1 / 256, 1 / 256] },
+                        texture: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: updateFragmentShader,
+                });
+
+                this._dropMesh = new THREE.Mesh(this._geometry, dropMaterial);
+                this._normalMesh = new THREE.Mesh(this._geometry, normalMaterial);
+                this._updateMesh = new THREE.Mesh(this._geometry, updateMaterial);
+            });
+    }
+
+    addDrop(renderer, x, y, radius, strength) {
+        if (!this._dropMesh) return;
+        this._dropMesh.material.uniforms['center'].value = [x, y];
+        this._dropMesh.material.uniforms['radius'].value = radius;
+        this._dropMesh.material.uniforms['strength'].value = strength;
+
+        this._render(renderer, this._dropMesh);
+    }
+
+    stepSimulation(renderer) {
+        if (!this._updateMesh) return;
+        this._render(renderer, this._updateMesh);
+    }
+
+    updateNormals(renderer) {
+        if (!this._normalMesh) return;
+        this._render(renderer, this._normalMesh);
+    }
+
+    _render(renderer, mesh) {
+        const oldTexture = this.texture;
+        const newTexture = this.texture === this._textureA ? this._textureB : this._textureA;
+
+        mesh.material.uniforms['texture'].value = oldTexture.texture;
+
+        renderer.setRenderTarget(newTexture);
+        renderer.render(mesh, this._camera);
+
+        this.texture = newTexture;
+    }
+}
+
+class Caustics {
+    constructor(lightFrontGeometry, light) {
+        this._camera = new THREE.OrthographicCamera(0, 1, 1, 0, 0, 2000);
+        this._geometry = lightFrontGeometry;
+        this.light = light;
+
+        this.texture = new THREE.WebGLRenderTarget(1024, 1024, { type: THREE.UnsignedByteType });
+
+        const shadersPromises = [
+            loadFile('./resource/shaders/caustics/vertex.glsl'),
+            loadFile('./resource/shaders/caustics/fragment.glsl')
+        ];
+
+        this.loaded = Promise.all(shadersPromises)
+            .then(([vertexShader, fragmentShader]) => {
+                const material = new THREE.RawShaderMaterial({
+                    uniforms: {
+                        light: { value: this.light },
+                        water: { value: null },
+                    },
+                    vertexShader: vertexShader,
+                    fragmentShader: fragmentShader,
+                });
+
+                this._causticMesh = new THREE.Mesh(this._geometry, material);
+            });
+    }
+
+    update(renderer, waterTexture) {
+        if (!this._causticMesh) return;
+        this._causticMesh.material.uniforms['water'].value = waterTexture;
+
+        renderer.setRenderTarget(this.texture);
+        renderer.setClearColor(new THREE.Color('black'), 0);
+        renderer.clear();
+
+        renderer.render(this._causticMesh, this._camera);
+    }
+}
+
+export class WaterEffect {
+    constructor(renderer, camera, scene, options = {}) {
+        this.renderer = renderer;
+        this.camera = camera;
+        this.scene = scene;
+        this.light = options.light || defaultLight;
+        this.tiles = options.tiles;
+        this.skybox = options.skybox;
+
+        this.waterSimulation = new WaterSimulation();
+
+        // Interaction
+        this.raycaster = new THREE.Raycaster();
+        this.mouse = new THREE.Vector2();
+        this.targetGeometry = new THREE.PlaneGeometry(2, 2);
+        this.targetGeometry.rotateX(-Math.PI / 2); // Match the water plane orientation
+        this.targetMesh = new THREE.Mesh(this.targetGeometry);
+
+        // Load utils shader globally
+        loadFile('./resource/shaders/utils.glsl').then((utils) => {
+            THREE.ShaderChunk['utils'] = utils;
+        });
+
+        // Bind mouse event
+        window.addEventListener('mousemove', this.onMouseMove.bind(this));
+    }
+
+    async applyTo(mesh) {
+        this.mesh = mesh;
+
+        // Initialize Caustics with the mesh geometry
+        this.caustics = new Caustics(mesh.geometry, this.light);
+
+        const shadersPromises = [
+            loadFile('./resource/shaders/water/vertex.glsl'),
+            loadFile('./resource/shaders/water/fragment.glsl'),
+            this.waterSimulation.loaded,
+            this.caustics.loaded
+        ];
+
+        const [vertexShader, fragmentShader] = await Promise.all(shadersPromises);
+
+        if (!vertexShader || !fragmentShader) {
+            console.error("Failed to load shaders");
+            return;
+        }
+
+        const material = new THREE.RawShaderMaterial({
+            uniforms: {
+                light: { value: this.light },
+                tiles: { value: this.tiles || null },
+                sky: { value: this.skybox || null },
+                water: { value: null },
+                causticTex: { value: null },
+                underwater: { value: false },
+            },
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+            side: THREE.FrontSide
+        });
+
+        this.mesh.material = material;
+
+        // Initial drops
+        for (let i = 0; i < 20; i++) {
+            this.waterSimulation.addDrop(
+                this.renderer,
+                Math.random() * 2 - 1, Math.random() * 2 - 1,
+                0.03, (i & 1) ? 0.02 : -0.02
+            );
+        }
+    }
+
+    update() {
+        if (!this.mesh || !this.caustics) return;
+
+        // 1. Physics simulation
+        this.waterSimulation.stepSimulation(this.renderer);
+        this.waterSimulation.updateNormals(this.renderer);
+        const waterTexture = this.waterSimulation.texture.texture;
+
+        // 2. Caustics calculation
+        this.caustics.update(this.renderer, waterTexture);
+        const causticsTexture = this.caustics.texture.texture;
+
+        // 3. Update main mesh uniforms
+        const material = this.mesh.material;
+        material.uniforms['water'].value = waterTexture;
+        material.uniforms['causticTex'].value = causticsTexture;
+
+        // Reset render target to screen
+        this.renderer.setRenderTarget(null);
+    }
+
+    onMouseMove(event) {
+        const rect = this.renderer.domElement.getBoundingClientRect();
+
+        this.mouse.x = (event.clientX - rect.left) * 2 / rect.width - 1;
+        this.mouse.y = - (event.clientY - rect.top) * 2 / rect.height + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+
+        if (this.mesh) {
+            this.targetMesh.position.copy(this.mesh.position);
+            this.targetMesh.rotation.copy(this.mesh.rotation);
+            this.targetMesh.scale.copy(this.mesh.scale);
+            this.targetMesh.updateMatrixWorld();
+        }
+
+        const intersects = this.raycaster.intersectObject(this.targetMesh);
+
+        for (let intersect of intersects) {
+            this.waterSimulation.addDrop(this.renderer, intersect.point.x, intersect.point.z, 0.03, 0.04);
+        }
+    }
+}

package/loader/WaterMaterial/index.js

@@ -0,0 +1,36 @@
+function createWaterLoader(renderer, camera, scene) {
+    // Load Textures
+    const cubetextureloader = new THREE.CubeTextureLoader();
+    const textureCube = cubetextureloader.load([
+        '/resource/xpos.jpg', '/resource/xneg.jpg',
+        '/resource/ypos.jpg', '/resource/ypos.jpg',
+        '/resource/zpos.jpg', '/resource/zneg.jpg',
+    ]);
+
+    const textureloader = new THREE.TextureLoader();
+    const tiles = textureloader.load('/resource/tiles.jpg');
+
+    // Initialize Water Effect
+    const waterEffect = new WaterEffect(renderer, camera, scene, {
+        tiles: tiles,
+        skybox: textureCube
+    });
+
+    function animate() {
+        // Update water effect
+        waterEffect.update();
+
+        // Clear and Render Scene
+        renderer.setClearColor(new THREE.Color('white'), 1);
+        renderer.clear();
+
+        renderer.render(scene, camera);
+
+        controls.update();
+
+        requestAnimationFrame(animate);
+    }
+
+    animate();
+    return waterEffect;
+}

package/loader/WaterMaterial/resource/shaders/caustics/fragment.glsl

@@ -0,0 +1,24 @@
+precision highp float;
+precision highp int;
+
+#extension GL_OES_standard_derivatives : enable
+
+#include <utils>
+
+varying vec3 oldPos;
+varying vec3 newPos;
+varying vec3 ray;
+
+
+void main() {
+  /* if the triangle gets smaller, it gets brighter, and vice versa */
+  float oldArea = length(dFdx(oldPos)) * length(dFdy(oldPos));
+  float newArea = length(dFdx(newPos)) * length(dFdy(newPos));
+  gl_FragColor = vec4(oldArea / newArea * 0.2, 1.0, 0.0, 0.0);
+
+  vec3 refractedLight = refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+
+  /* shadow for the rim of the pool */
+  vec2 t = intersectCube(newPos, -refractedLight, vec3(-1.0, -poolHeight, -1.0), vec3(1.0, 2.0, 1.0));
+  gl_FragColor.r *= 1.0 / (1.0 + exp(-200.0 / (1.0 + 10.0 * (t.y - t.x)) * (newPos.y - refractedLight.y * t.y - 2.0 / 12.0)));
+}

package/loader/WaterMaterial/resource/shaders/caustics/vertex.glsl

@@ -0,0 +1,34 @@
+precision highp float;
+precision highp int;
+
+varying vec3 oldPos;
+varying vec3 newPos;
+varying vec3 ray;
+attribute vec3 position;
+
+#include <utils>
+
+
+/* project the ray onto the plane */
+vec3 project(vec3 origin, vec3 ray, vec3 refractedLight) {
+  vec2 tcube = intersectCube(origin, ray, vec3(-1.0, -poolHeight, -1.0), vec3(1.0, 2.0, 1.0));
+  origin += ray * tcube.y;
+  float tplane = (-origin.y - 1.0) / refractedLight.y;
+
+  return origin + refractedLight * tplane;
+}
+
+
+void main() {
+  vec4 info = texture2D(water, position.xy * 0.5 + 0.5);
+  info.ba *= 0.5;
+  vec3 normal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a);
+
+  /* project the vertices along the refracted vertex ray */
+  vec3 refractedLight = refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+  ray = refract(-light, normal, IOR_AIR / IOR_WATER);
+  oldPos = project(position.xzy, refractedLight, refractedLight);
+  newPos = project(position.xzy + vec3(0.0, info.r, 0.0), ray, refractedLight);
+
+  gl_Position = vec4(0.75 * (newPos.xz + refractedLight.xz / refractedLight.y), 0.0, 1.0);
+}

package/loader/WaterMaterial/resource/shaders/debug/fragment.glsl

@@ -0,0 +1,12 @@
+precision highp float;
+precision highp int;
+
+uniform sampler2D texture;
+varying vec2 coord;
+
+
+void main() {
+  vec4 color = texture2D(texture, coord);
+
+  gl_FragColor = vec4(color.x, color.y, color.z, 1.);
+}

package/loader/WaterMaterial/resource/shaders/debug/vertex.glsl

@@ -0,0 +1,10 @@
+uniform sampler2D texture;
+attribute vec3 position;
+varying vec2 coord;
+
+
+void main() {
+  coord = position.xy + 0.5;
+
+  gl_Position = vec4(position.xy * 2., 0., 1.);
+}

package/loader/WaterMaterial/resource/shaders/pool/fragment.glsl

@@ -0,0 +1,17 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+
+varying vec3 pos;
+
+
+void main() {
+  gl_FragColor = vec4(getWallColor(pos), 1.0);
+
+  vec4 info = texture2D(water, pos.xz * 0.5 + 0.5);
+
+  if (pos.y < info.r) {
+    gl_FragColor.rgb *= underwaterColor * 1.2;
+  }
+}

package/loader/WaterMaterial/resource/shaders/pool/vertex.glsl

@@ -0,0 +1,16 @@
+#include <utils>
+
+uniform mat4 projectionMatrix;
+uniform mat4 modelViewMatrix;
+
+attribute vec3 position;
+
+varying vec3 pos;
+
+
+void main() {
+  pos = position.xyz;
+  pos.y = ((1.0 - pos.y) * (7.0 / 12.0) - 1.0) * poolHeight;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}

package/loader/WaterMaterial/resource/shaders/simulation/drop_fragment.glsl

@@ -0,0 +1,22 @@
+precision highp float;
+precision highp int;
+
+const float PI = 3.141592653589793;
+uniform sampler2D texture;
+uniform vec2 center;
+uniform float radius;
+uniform float strength;
+varying vec2 coord;
+
+
+void main() {
+  /* Get vertex info */
+  vec4 info = texture2D(texture, coord);
+
+  /* Add the drop to the height */
+  float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);
+  drop = 0.5 - cos(drop * PI) * 0.5;
+  info.r += drop * strength;
+
+  gl_FragColor = info;
+}

package/loader/WaterMaterial/resource/shaders/simulation/normal_fragment.glsl

@@ -0,0 +1,19 @@
+precision highp float;
+precision highp int;
+
+uniform sampler2D texture;
+uniform vec2 delta;
+varying vec2 coord;
+
+
+void main() {
+  /* get vertex info */
+  vec4 info = texture2D(texture, coord);
+
+  /* update the normal */
+  vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);
+  vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);
+  info.ba = normalize(cross(dy, dx)).xz;
+
+  gl_FragColor = info;
+}

package/loader/WaterMaterial/resource/shaders/simulation/update_fragment.glsl

@@ -0,0 +1,33 @@
+precision highp float;
+precision highp int;
+
+uniform sampler2D texture;
+uniform vec2 delta;
+varying vec2 coord;
+
+
+void main() {
+  /* get vertex info */
+  vec4 info = texture2D(texture, coord);
+
+  /* calculate average neighbor height */
+  vec2 dx = vec2(delta.x, 0.0);
+  vec2 dy = vec2(0.0, delta.y);
+  float average = (
+    texture2D(texture, coord - dx).r +
+    texture2D(texture, coord - dy).r +
+    texture2D(texture, coord + dx).r +
+    texture2D(texture, coord + dy).r
+  ) * 0.25;
+
+  /* change the velocity to move toward the average */
+  info.g += (average - info.r) * 2.0;
+
+  /* attenuate the velocity a little so waves do not last forever */
+  info.g *= 0.995;
+
+  /* move the vertex along the velocity */
+  info.r += info.g;
+
+  gl_FragColor = info;
+}

package/loader/WaterMaterial/resource/shaders/simulation/vertex.glsl

@@ -0,0 +1,9 @@
+attribute vec3 position;
+varying vec2 coord;
+
+
+void main() {
+  coord = position.xy * 0.5 + 0.5;
+
+  gl_Position = vec4(position.xyz, 1.0);
+}

package/loader/WaterMaterial/resource/shaders/utils.glsl

@@ -0,0 +1,60 @@
+const float IOR_AIR = 1.0;
+const float IOR_WATER = 1.333;
+
+const vec3 abovewaterColor = vec3(0.25, 1.0, 1.25);
+const vec3 underwaterColor = vec3(0.4, 0.9, 1.0);
+
+const float poolHeight = 1.0;
+
+uniform vec3 light;
+uniform sampler2D tiles;
+uniform sampler2D causticTex;
+uniform sampler2D water;
+
+
+vec2 intersectCube(vec3 origin, vec3 ray, vec3 cubeMin, vec3 cubeMax) {
+  vec3 tMin = (cubeMin - origin) / ray;
+  vec3 tMax = (cubeMax - origin) / ray;
+  vec3 t1 = min(tMin, tMax);
+  vec3 t2 = max(tMin, tMax);
+  float tNear = max(max(t1.x, t1.y), t1.z);
+  float tFar = min(min(t2.x, t2.y), t2.z);
+  return vec2(tNear, tFar);
+}
+
+
+vec3 getWallColor(vec3 point) {
+  float scale = 0.5;
+
+  vec3 wallColor;
+  vec3 normal;
+  if (abs(point.x) > 0.999) {
+    wallColor = texture2D(tiles, point.yz * 0.5 + vec2(1.0, 0.5)).rgb;
+    normal = vec3(-point.x, 0.0, 0.0);
+  } else if (abs(point.z) > 0.999) {
+    wallColor = texture2D(tiles, point.yx * 0.5 + vec2(1.0, 0.5)).rgb;
+    normal = vec3(0.0, 0.0, -point.z);
+  } else {
+    wallColor = texture2D(tiles, point.xz * 0.5 + 0.5).rgb;
+    normal = vec3(0.0, 1.0, 0.0);
+  }
+
+  scale /= length(point); /* pool ambient occlusion */
+
+  /* caustics */
+  vec3 refractedLight = -refract(-light, vec3(0.0, 1.0, 0.0), IOR_AIR / IOR_WATER);
+  float diffuse = max(0.0, dot(refractedLight, normal));
+  vec4 info = texture2D(water, point.xz * 0.5 + 0.5);
+  if (point.y < info.r) {
+    vec4 caustic = texture2D(causticTex, 0.75 * (point.xz - point.y * refractedLight.xz / refractedLight.y) * 0.5 + 0.5);
+    scale += diffuse * caustic.r * 2.0 * caustic.g;
+  } else {
+    /* shadow for the rim of the pool */
+    vec2 t = intersectCube(point, refractedLight, vec3(-1.0, -poolHeight, -1.0), vec3(1.0, 2.0, 1.0));
+    diffuse *= 1.0 / (1.0 + exp(-200.0 / (1.0 + 10.0 * (t.y - t.x)) * (point.y + refractedLight.y * t.y - 2.0 / 12.0)));
+
+    scale += diffuse * 0.5;
+  }
+
+  return wallColor * scale;
+}

package/loader/WaterMaterial/resource/shaders/water/fragment.glsl

@@ -0,0 +1,69 @@
+precision highp float;
+precision highp int;
+
+#include <utils>
+
+uniform float underwater;
+uniform samplerCube sky;
+
+varying vec3 eye;
+varying vec3 pos;
+
+
+vec3 getSurfaceRayColor(vec3 origin, vec3 ray, vec3 waterColor) {
+  vec3 color;
+
+  if (ray.y < 0.0) {
+    vec2 t = intersectCube(origin, ray, vec3(-1.0, -poolHeight, -1.0), vec3(1.0, 2.0, 1.0));
+    color = getWallColor(origin + ray * t.y);
+  } else {
+    vec2 t = intersectCube(origin, ray, vec3(-1.0, -poolHeight, -1.0), vec3(1.0, 2.0, 1.0));
+    vec3 hit = origin + ray * t.y;
+    if (hit.y < 7.0 / 12.0) {
+      color = getWallColor(hit);
+    } else {
+      color = textureCube(sky, ray).rgb;
+      color += 0.01 * vec3(pow(max(0.0, dot(light, ray)), 20.0)) * vec3(10.0, 8.0, 6.0);
+    }
+  }
+
+  if (ray.y < 0.0) color *= waterColor;
+
+  return color;
+}
+
+
+void main() {
+  vec2 coord = pos.xz * 0.5 + 0.5;
+  vec4 info = texture2D(water, coord);
+
+  /* make water look more "peaked" */
+  for (int i = 0; i < 5; i++) {
+    coord += info.ba * 0.005;
+    info = texture2D(water, coord);
+  }
+
+  vec3 normal = vec3(info.b, sqrt(1.0 - dot(info.ba, info.ba)), info.a);
+  vec3 incomingRay = normalize(pos - eye);
+
+  if (underwater == 1.) {
+    normal = -normal;
+    vec3 reflectedRay = reflect(incomingRay, normal);
+    vec3 refractedRay = refract(incomingRay, normal, IOR_WATER / IOR_AIR);
+    float fresnel = mix(0.5, 1.0, pow(1.0 - dot(normal, -incomingRay), 3.0));
+
+    vec3 reflectedColor = getSurfaceRayColor(pos, reflectedRay, underwaterColor);
+    vec3 refractedColor = getSurfaceRayColor(pos, refractedRay, vec3(1.0)) * vec3(0.8, 1.0, 1.1);
+
+    gl_FragColor = vec4(mix(reflectedColor, refractedColor, (1.0 - fresnel) * length(refractedRay)), 1.0);
+  } else {
+    vec3 reflectedRay = reflect(incomingRay, normal);
+    vec3 refractedRay = refract(incomingRay, normal, IOR_AIR / IOR_WATER);
+    float fresnel = mix(0.25, 1.0, pow(1.0 - dot(normal, -incomingRay), 3.0));
+
+    vec3 reflectedColor = getSurfaceRayColor(pos, reflectedRay, abovewaterColor);
+    vec3 refractedColor = getSurfaceRayColor(pos, refractedRay, abovewaterColor);
+
+    gl_FragColor = vec4(mix(refractedColor, reflectedColor, fresnel), 1.0);
+  }
+}

package/loader/WaterMaterial/resource/shaders/water/vertex.glsl

@@ -0,0 +1,24 @@
+uniform mat4 projectionMatrix;
+uniform mat4 modelViewMatrix;
+uniform sampler2D water;
+
+attribute vec3 position;
+
+varying vec3 eye;
+varying vec3 pos;
+
+
+void main() {
+  vec4 info = texture2D(water, position.xy * 0.5 + 0.5);
+  pos = position.xzy;
+  pos.y += info.r;
+
+  vec3 axis_x = vec3(modelViewMatrix[0].x, modelViewMatrix[0].y, modelViewMatrix[0].z);
+  vec3 axis_y = vec3(modelViewMatrix[1].x, modelViewMatrix[1].y, modelViewMatrix[1].z);
+  vec3 axis_z = vec3(modelViewMatrix[2].x, modelViewMatrix[2].y, modelViewMatrix[2].z);
+  vec3 offset = vec3(modelViewMatrix[3].x, modelViewMatrix[3].y, modelViewMatrix[3].z);
+
+  eye = vec3(dot(-offset, axis_x), dot(-offset, axis_y), dot(-offset, axis_z));
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+}

package/loader/WaterMaterial/resource/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "easy-threesdk",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "����Threejs��װ�ij��ù��ܵ�sdk",
   "main": "index.js",
   "private": false,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/xieqianstudent/visual-learning.git"
+  },
   "keywords": [
     "Threejs"
   ],

package/plugins/LabelControl.js

@@ -44,7 +44,128 @@ export default class LabelControl {
   }
 
   /**
-   * 创建3D标签并放在指定的模型上面进行标注
+ * 创建3D 指示器背景标签并放在指定的模型上面进行标注
+ * @param {string} LabelID - 标签ID
+ * @param {string} contentHtml - 标签显示的HTML内容
+ * @param {THREE.Vector3|Array} position - 标签的3D位置，可以是Vector3对象或[x, y, z]数组
+ * @param {Object} options - 可选配置项
+ * @param {number} options.size - 标签的缩放大小，默认0.02
+ * @param {string} options.backgroundColor - 背景颜色，默认rgba(20, 30, 50, 0.9)
+ * @param {string} options.textColor - 文字颜色，默认#ffffff
+ * @param {string} options.borderColor - 边框颜色，默认#22d3ee
+ * @param {number} options.fontSize - 字体大小，默认16px
+ * @param {number} options.width - 标签宽度，默认auto
+ * @param {string} options.className - 自定义CSS类名
+ * @returns {CSS3DObject} 返回创建的3D标签对象，可以用于后续操作（如隐藏、删除等）
+ */
+  createIndicator3DLabel(LabelID, contentHtml, position, options = {}, Events = {}) {
+    // 如果没有场景或标签渲染器，提示错误
+    if (!this.ThreeSdk.scene || !this.labelRenderer) {
+      console.error("❌ 场景未初始化，请确保 initMap() 已执行");
+      return null;
+    }
+
+    // 设置默认选项
+    const {
+      size = 0.02,
+      backgroundColor = "rgba(20, 30, 50, 0.9)",
+      textColor = "#ffffff",
+      borderColor = "#22d3ee",
+      fontSize = 16,
+      width = "auto",
+      className = "label-3d-Indicator",
+    } = options;
+
+    // 创建HTML元素
+    const labelDiv = document.createElement("div");
+    labelDiv.className = className;
+
+    // 设置样式（添加鼠标悬停效果和点击样式）
+    labelDiv.style.cssText = `
+        position:relative;
+        z-index:99;
+        pointer-events:none;
+        
+    `;
+    const labelIndicatorDiv = document.createElement("div")
+    labelDiv.appendChild(labelIndicatorDiv);
+    labelIndicatorDiv.style.cssText = `
+    display: block;
+    background-image: url("/ponit-ui-item.png");
+    background-size: 100% 100%;
+    width: 313px;
+    height: 188px;
+    left: -313px;
+    position: relative;
+`
+
+    const labelContentDiv = document.createElement("div")
+    labelDiv.appendChild(labelContentDiv);
+    labelContentDiv.style.cssText = `
+    position: absolute;
+    left: -285px;
+    top: 55px;
+    background: #000515;
+    border-radius: 9px;
+    padding: 4px;
+    /* box-shadow: 0px 0px 10px #03f4fe; */
+    border: 2px solid #02d9e6;
+`
+    labelContentDiv.innerHTML = contentHtml;
+
+    // 添加鼠标悬停效果
+    labelContentDiv.addEventListener("mouseenter", () => {
+      labelContentDiv.style.boxShadow = `0 6px 16px rgba(34, 211, 238, 0.5)`;
+      labelContentDiv.style.borderColor = "#60e5ff";
+    });
+
+    labelContentDiv.addEventListener("mouseleave", () => {
+      labelContentDiv.style.boxShadow = `0 4px 12px rgba(34, 211, 238, 0.3)`;
+      labelContentDiv.style.borderColor = borderColor;
+    });
+
+
+
+
+    // 创建 CSS3DObject
+    const label = new CSS3DObject(labelDiv);
+
+    // 设置位置
+    if (position instanceof THREE.Vector3) {
+      label.position.copy(position);
+    } else if (Array.isArray(position) && position.length >= 3) {
+      label.position.set(position[0], position[1], position[2]);
+    } else {
+      console.error("❌ 位置参数无效，请使用 THREE.Vector3 或 [x, y, z] 数组");
+      return null;
+    }
+
+    // 设置缩放（CSS3D默认很小，需要放大）
+    label.scale.set(size, size, size);
+    this.bindEvents(labelDiv, label, Events);
+
+    // 添加点击事件：点击标签后，相机移动到标签下方
+    // labelDiv.addEventListener("click", (e) => {
+    //   e.stopPropagation(); // 阻止事件冒泡
+    //   click(e);
+    //   // this.moveCameraToLabel(label.position, {
+    //   //   distance: 0,
+    //   //   heightOffset: 20,
+    //   // });
+    // });
+
+    console.log(
+      `✅ 3D标签已创建: "${contentHtml}" 位置: (${label.position.x}, ${label.position.y}, ${label.position.z})`
+    );
+
+    this._LabelMap.set(LabelID, label);
+    this.ThreeSdk.scene.add(label);
+    // 返回标签对象，方便后续操作
+    return label;
+  }
+
+  /**
+   * 创建3D 箭头标签并放在指定的模型上面进行标注
    * @param {string} LabelID - 标签ID
    * @param {string} contentHtml - 标签显示的HTML内容
    * @param {THREE.Vector3|Array} position - 标签的3D位置，可以是Vector3对象或[x, y, z]数组
@@ -58,7 +179,7 @@ export default class LabelControl {
    * @param {string} options.className - 自定义CSS类名
    * @returns {CSS3DObject} 返回创建的3D标签对象，可以用于后续操作（如隐藏、删除等）
    */
-  create3DLabel(LabelID, contentHtml, position, options = {}, Events = {}) {
+  createArrow3DLabel(LabelID, contentHtml, position, options = {}, Events = {}) {
     // 如果没有场景或标签渲染器，提示错误
     if (!this.ThreeSdk.scene || !this.labelRenderer) {
       console.error("❌ 场景未初始化，请确保 initMap() 已执行");
@@ -73,7 +194,7 @@ export default class LabelControl {
       borderColor = "#22d3ee",
       fontSize = 16,
       width = "auto",
-      className = "label-3d-custom",
+      className = "label-3d-arrow",
     } = options;
 
     // 创建HTML元素
@@ -168,11 +289,167 @@ export default class LabelControl {
     return label;
   }
 
+
+  /**
+ * 创建3D 可展开标签并放在指定的模型上面进行标注
+ * @param {string} LabelID - 标签ID
+ * @param {string} contentHtml - 标签显示的HTML内容
+ * @param {THREE.Vector3|Array} position - 标签的3D位置，可以是Vector3对象或[x, y, z]数组
+ * @param {Object} options - 可选配置项
+ * @param {number} options.size - 标签的缩放大小，默认0.02
+ * @param {string} options.backgroundColor - 背景颜色，默认rgba(20, 30, 50, 0.9)
+ * @param {string} options.textColor - 文字颜色，默认#ffffff
+ * @param {string} options.borderColor - 边框颜色，默认#22d3ee
+ * @param {number} options.fontSize - 字体大小，默认16px
+ * @param {number} options.width - 标签宽度，默认auto
+ * @param {string} options.className - 自定义CSS类名
+ * @returns {CSS3DObject} 返回创建的3D标签对象，可以用于后续操作（如隐藏、删除等）
+ */
+  createExpand3DLabel(LabelID, contentHtml, expandContentHtml, position, options = {}, Events = {}) {
+    // 如果没有场景或标签渲染器，提示错误
+    if (!this.ThreeSdk.scene || !this.labelRenderer) {
+      console.error("❌ 场景未初始化，请确保 initMap() 已执行");
+      return null;
+    }
+
+    // 设置默认选项
+    const {
+      size = 0.02,
+      backgroundColor = "rgba(20, 30, 50, 0.9)",
+      textColor = "#ffffff",
+      borderColor = "#22d3ee",
+      fontSize = 16,
+      width = "auto",
+      className = "label-3d-Expand",
+    } = options;
+
+    // 创建HTML元素
+    const labelDiv = document.createElement("div");
+    labelDiv.className = className;
+
+    // 设置样式（添加鼠标悬停效果和点击样式）
+    labelDiv.style.cssText = `
+      position: relative;
+    height: 50px;
+    color: #fff;
+    border-radius: 50px;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: table-cell;
+    line-height: 50px;
+    /* vertical-align: unset; */
+    vertical-align: middle;
+      pointer-events: auto; /* 允许标签接收鼠标事件 */
+      user-select: none;
+       background: rgba(255, 255, 255, .4);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  border:1px solid white;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
+      cursor: pointer; /* 鼠标悬停时显示手型光标 */
+      transition: all 0.3s ease; /* 添加过渡动画 */
+    `;
+
+    // 添加鼠标悬停效果
+    labelDiv.addEventListener("mouseenter", () => {
+      labelDiv.style.boxShadow = `0 6px 16px rgba(34, 211, 238, 0.5)`;
+      labelDiv.style.borderColor = "#60e5ff";
+    });
+
+    labelDiv.addEventListener("mouseleave", () => {
+      labelDiv.style.boxShadow = `0 4px 12px rgba(34, 211, 238, 0.3)`;
+      labelDiv.style.borderColor = borderColor;
+    });
+
+    // 设置标签文本内容
+    labelDiv.innerHTML = contentHtml;
+
+    //展开内容
+    const expandDiv = document.createElement("div")
+    labelDiv.appendChild(expandDiv)
+    expandDiv.style.cssText = `
+      position:absolute;
+       background: rgba(255, 255, 255, .4);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  border:1px solid white;
+  border-radius: 10px;
+  display: none;
+  top:0px;
+      `
+    const expandCloseBtn = document.createElement("div")
+    expandCloseBtn.innerHTML = "关闭"
+    expandDiv.appendChild(expandCloseBtn)
+    expandCloseBtn.style.cssText = `
+      display:flex;
+      align-items: center;
+    justify-content: flex-end;
+      cursor:pointer;
+      height:30px;
+      padding:0px 10px;
+      `
+    expandCloseBtn.addEventListener("click", (e) => {
+      e.stopPropagation()
+      expandDiv.style.display = "none"
+    })
+
+    const expandContentDiv = document.createElement("div")
+    expandDiv.appendChild(expandContentDiv)
+
+
+    expandContentDiv.innerHTML = expandContentHtml
+
+
+
+    labelDiv.addEventListener("click", () => {
+
+      expandDiv.style.display = "block"
+      expandDiv.style.right = (-expandDiv.clientWidth - 20) + "px" //将展开内容定位到标签右边
+      expandDiv.style.top = (-expandDiv.clientHeight / 2) + "px"
+    })
+
+
+    // 创建 CSS3DObject
+    const label = new CSS3DObject(labelDiv);
+
+    // 设置位置
+    if (position instanceof THREE.Vector3) {
+      label.position.copy(position);
+    } else if (Array.isArray(position) && position.length >= 3) {
+      label.position.set(position[0], position[1], position[2]);
+    } else {
+      console.error("❌ 位置参数无效，请使用 THREE.Vector3 或 [x, y, z] 数组");
+      return null;
+    }
+
+    // 设置缩放（CSS3D默认很小，需要放大）
+    label.scale.set(size, size, size);
+    this.bindEvents(labelDiv, label, Events);
+
+    // 添加点击事件：点击标签后，相机移动到标签下方
+    // labelDiv.addEventListener("click", (e) => {
+    //   e.stopPropagation(); // 阻止事件冒泡
+    //   click(e);
+    //   // this.moveCameraToLabel(label.position, {
+    //   //   distance: 0,
+    //   //   heightOffset: 20,
+    //   // });
+    // });
+
+    console.log(
+      `✅ 3D标签已创建: "${contentHtml}" 位置: (${label.position.x}, ${label.position.y}, ${label.position.z})`
+    );
+
+    this._LabelMap.set(LabelID, label);
+    this.ThreeSdk.scene.add(label);
+    // 返回标签对象，方便后续操作
+    return label;
+  }
+
   bindEvents(labelDiv, label, Events = {}) {
     const {
-      click = () => {},
-      mouseenter = () => {},
-      mouseleave = () => {},
+      click = () => { },
+      mouseenter = () => { },
+      mouseleave = () => { },
     } = Events;
     labelDiv.addEventListener("click", (e) => {
       e.stopPropagation(); // 阻止事件冒泡

package/plugins/ModelControl.js

@@ -18,7 +18,7 @@ export default class ModelControl {
     this.ThreeSdk = ThreeSdk;
     this._init();
   }
-  _init() {}
+  _init() { }
 
   /**
    * 加载 GLTF 格式的建筑物模型
@@ -66,12 +66,7 @@ export default class ModelControl {
               if (clickable) {
                 this._clickableObjects.push(child);
               }
-              // 查找并保存水阀开关的引用
-              if (child.name === "Geom3D_4330") {
-                console.log("✅ 找到水阀开关: Geom3D_4330");
-                // 保存初始旋转状态
-                child.userData.initialRotation = child.rotation.clone();
-              }
+
 
               // 打印网格信息
               console.log(`GLTF 网格: "${child.name}"`);
@@ -102,9 +97,11 @@ export default class ModelControl {
           // 将模型居中：使模型的中心位于场景中心 (0, 0, 0)
           // position[0] 和 position[1] 是用户想要模型中心的位置
           // 但由于模型本身有中心偏移，需要减去 centerScaled 来补偿
-          model.position.x = position[0] - centerScaled.x; // 使模型中心在 position[0]
+          // model.position.x = position[0]- centerScaled.x; // 使模型中心在 position[0]
+          model.position.x = position[0]
           model.position.y = -minY * scaleFactor; // 放置在地面上
-          model.position.z = position[1] - centerScaled.z; // 使模型中心在 position[1]
+          model.position.z = position[1]
+          // model.position.z = position[1]- centerScaled.z; // 使模型中心在 position[1]
 
           // 相机始终看向场景中心 (0, 0, 0)，而不是模型位置
           // 这样地形（点阵底座）和模型都会在视野中，地形不会偏移
@@ -147,7 +144,7 @@ export default class ModelControl {
   }
 
   //开启模型鼠标移动事件监听 - 用于悬停效果
-  onModelMouseMoveListener(callback = () => {}) {
+  onModelMouseMoveListener(callback = () => { }) {
     window.addEventListener("mousemove", (event) => {
       let mouse = new THREE.Vector2();
       // 计算鼠标在标准化设备坐标中的位置 (-1 到 +1)
@@ -220,7 +217,7 @@ export default class ModelControl {
   }
 
   //开启模型鼠标点击事件监听
-  onModelClickListener(callback = () => {}) {
+  onModelClickListener(callback = () => { }) {
     window.addEventListener("click", (event) => {
       let mouse = new THREE.Vector2();
       // 计算鼠标位置