easy-threesdk 1.0.3 → 1.0.5

package/index.js

@@ -165,6 +165,7 @@ class ThreeSdk {
     this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
     this.renderer.setSize(width, height);
     this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
     this.container.appendChild(this.renderer.domElement);
 
     //初始化控制器
@@ -557,20 +558,20 @@ class ThreeSdk {
     textureLoader.load(
       textureImage,
       (texture) => {
-        console.log("✅ 全景图片加载成功！");
-        console.log(
-          "图片尺寸:",
-          texture.image.width,
-          "x",
-          texture.image.height
-        );
+        // console.log("✅ 全景图片加载成功！");
+        // console.log(
+        //   "图片尺寸:",
+        //   texture.image.width,
+        //   "x",
+        //   texture.image.height
+        // );
         //创建3d场景
 
         //--------------------   方法1：使用 EquirectangularReflectionMapping + 翻转X轴
 
-        console.log(
-          "🔧 使用方法1: EquirectangularReflectionMapping + scale(1,-1,-1)"
-        );
+        // console.log(
+        //   "🔧 使用方法1: EquirectangularReflectionMapping + scale(1,-1,-1)"
+        // );
 
         texture.mapping = THREE.EquirectangularReflectionMapping;
         texture.minFilter = THREE.LinearFilter;
@@ -606,17 +607,17 @@ class ThreeSdk {
 
         this.scene.add(this._PanoramaSphere);
 
-        console.log("✅ 全景球体创建成功！");
-        console.log("球体位置:", this._PanoramaSphere.position);
-        console.log("相机位置:", this.camera.position);
-        console.log("材质配置:", {
-          hasTexture: !!this._PanoramaSphere.material.map,
-          side: this._PanoramaSphere.material.side,
-          mapping: texture.mapping,
-          textureSize: texture.image
-            ? `${texture.image.width}x${texture.image.height}`
-            : "未知",
-        });
+        // console.log("✅ 全景球体创建成功！");
+        // console.log("球体位置:", this._PanoramaSphere.position);
+        // console.log("相机位置:", this.camera.position);
+        // console.log("材质配置:", {
+        //   hasTexture: !!this._PanoramaSphere.material.map,
+        //   side: this._PanoramaSphere.material.side,
+        //   mapping: texture.mapping,
+        //   textureSize: texture.image
+        //     ? `${texture.image.width}x${texture.image.height}`
+        //     : "未知",
+        // });
 
         // 确保相机朝向正确
         // this.camera.lookAt(0, 0, -1);
@@ -625,11 +626,11 @@ class ThreeSdk {
         // 加载进度
         if (progress.total > 0) {
           const percent = (progress.loaded / progress.total) * 100;
-          console.log("加载进度:", percent.toFixed(2) + "%");
+          // console.log("加载进度:", percent.toFixed(2) + "%");
         }
       },
       (error) => {
-        console.error("❌ 全景图片加载失败:", error);
+        // console.error("❌ 全景图片加载失败:", error);
         document.getElementById("loading").textContent =
           "图片加载失败，请检查路径: ../resource/sence/citrus_orchard_road_puresky.jpg";
       }
@@ -668,20 +669,20 @@ class ThreeSdk {
 
     // 允许用户从各个角度查看（移除垂直角度限制）
     this.controls.maxPolarAngle = Math.PI; // 允许从下方查看
-    console.log(
-      `   相机位置: (${this.camera.position.x.toFixed(
-        2
-      )}, ${this.camera.position.y.toFixed(
-        2
-      )}, ${this.camera.position.z.toFixed(2)})`
-    );
-    console.log(
-      `   控制器目标: (${this.controls.target.x.toFixed(
-        2
-      )}, ${this.controls.target.y.toFixed(
-        2
-      )}, ${this.controls.target.z.toFixed(2)})`
-    );
+    // console.log(
+    //   `   相机位置: (${this.camera.position.x.toFixed(
+    //     2
+    //   )}, ${this.camera.position.y.toFixed(
+    //     2
+    //   )}, ${this.camera.position.z.toFixed(2)})`
+    // );
+    // console.log(
+    //   `   控制器目标: (${this.controls.target.x.toFixed(
+    //     2
+    //   )}, ${this.controls.target.y.toFixed(
+    //     2
+    //   )}, ${this.controls.target.z.toFixed(2)})`
+    // );
     console.log(`💡 现在可以用鼠标拖拽围绕相机自身旋转查看四周，滚轮缩放`);
   }
 
@@ -752,13 +753,13 @@ class ThreeSdk {
       this.camera.position.y = this._RoamConfig.cameraHeight;
     }
 
-    console.log("✅ 进入视角漫游模式");
-    console.log("📍 当前相机位置:", this.camera.position);
-    console.log("⌨️  操作说明：");
-    console.log("   • 鼠标悬停地面显示圆圈");
-    console.log("   • 点击地面跳转视角");
-    console.log("   • WASD/方向键移动");
-    console.log("   • 鼠标拖拽改变朝向");
+    // console.log("✅ 进入视角漫游模式");
+    // console.log("📍 当前相机位置:", this.camera.position);
+    // console.log("⌨️  操作说明：");
+    // console.log("   • 鼠标悬停地面显示圆圈");
+    // console.log("   • 点击地面跳转视角");
+    // console.log("   • WASD/方向键移动");
+    // console.log("   • 鼠标拖拽改变朝向");
   }
 
   exitRoamMode() {
@@ -784,6 +785,83 @@ class ThreeSdk {
     return threeGroup;
   }
 
+  /**
+   * 获取 mesh 的信息并返回 JSON 对象
+   * @param {THREE.Mesh} mesh - 要获取信息的 mesh
+   * @returns {Object} 包含位置、旋转、缩放信息的 JSON 对象
+   */
+  getMeshInfo(mesh) {
+    if (!mesh) {
+      return null;
+    }
+
+    const info = {
+      position: {
+        x: mesh.position.x,
+        y: mesh.position.y,
+        z: mesh.position.z,
+      },
+      rotation: {
+        x: mesh.rotation.x,
+        y: mesh.rotation.y,
+        z: mesh.rotation.z,
+      },
+      scale: {
+        x: mesh.scale.x,
+        y: mesh.scale.y,
+        z: mesh.scale.z,
+      },
+    };
+
+    return info;
+  }
+
+  /**
+   * 将 JSON 信息应用到 mesh
+   * @param {THREE.Mesh} mesh - 要应用信息的 mesh
+   * @param {Object} infoJson - 包含位置、旋转、缩放信息的 JSON 对象
+   */
+  applyMeshInfo(mesh, infoJson) {
+    if (!mesh || !infoJson) {
+      console.warn("⚠️ applyMeshInfo: mesh 或 infoJson 为空");
+      return;
+    }
+
+    // 应用位置
+    if (infoJson.position) {
+      mesh.position.set(
+        infoJson.position.x || 0,
+        infoJson.position.y || 0,
+        infoJson.position.z || 0
+      );
+    }
+
+    // 应用旋转（弧度制）
+    if (infoJson.rotation) {
+      mesh.rotation.set(
+        infoJson.rotation.x || 0,
+        infoJson.rotation.y || 0,
+        infoJson.rotation.z || 0
+      );
+    }
+
+    // 应用缩放
+    if (infoJson.scale) {
+      mesh.scale.set(
+        infoJson.scale.x || 1,
+        infoJson.scale.y || 1,
+        infoJson.scale.z || 1
+      );
+    }
+
+    // 如果当前选中了该 mesh，更新 TransformControls
+    if (selectedMesh === mesh && transformControls) {
+      transformControls.updateMatrixWorld();
+    }
+
+    // console.log("✅ 信息已应用到 mesh:", mesh.userData.name || "未命名对象");
+  }
+
   /**
    * 将相机平滑移动到指定位置，并可以围绕位置旋转查看
    * @param {THREE.Vector3} position - 标签的3D位置

package/loader/WaterMaterial/index.js

@@ -1,36 +1,35 @@
-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;
-}
+import { Water } from "three/examples/jsm/objects/Water.js";
+import * as THREE from "three";
+import waterNormalMap from "./resource/textures/waternormals.jpg";
+function createWaterLoader(scene) {
+  // 创建 PlaneGeometry 网格
+  const planeGeometry = new THREE.PlaneGeometry(10, 10);
+
+  const planeMesh = new Water(planeGeometry, {
+    textureWidth: 512,
+    textureHeight: 512,
+    waterNormals: new THREE.TextureLoader().load(
+      waterNormalMap,
+      function (texture) {
+        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+      }
+    ),
+    sunDirection: new THREE.Vector3(),
+    sunColor: 0xffffff,
+    waterColor: 0x001e0f,
+    distortionScale: 3.7,
+    fog: scene.fog !== undefined,
+  });
+
+  planeMesh.rotation.x = -Math.PI / 2;
+
+  function animate() {
+    planeMesh.material.uniforms["time"].value += 1.0 / 60.0;
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+  return planeMesh;
+}
+export default createWaterLoader;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-threesdk",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "����Threejs��װ�ij��ù��ܵ�sdk",
   "main": "index.js",
   "private": false,