easy-threesdk 1.0.4 → 1.0.6

package/index.js

@@ -558,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;
@@ -607,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);
@@ -626,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";
       }
@@ -669,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(`💡 现在可以用鼠标拖拽围绕相机自身旋转查看四周，滚轮缩放`);
   }
 
@@ -753,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() {
@@ -859,7 +859,7 @@ class ThreeSdk {
       transformControls.updateMatrixWorld();
     }
 
-    console.log("✅ 信息已应用到 mesh:", mesh.userData.name || "未命名对象");
+    // console.log("✅ 信息已应用到 mesh:", mesh.userData.name || "未命名对象");
   }
 
   /**

package/package.json

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

package/plugins/ModelControl.js

@@ -3,6 +3,7 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 import {
   CSS3DRenderer,
   CSS3DObject,
@@ -39,6 +40,7 @@ export default class ModelControl {
       position = [0, 0],
       scale = 30,
       clickable = true,
+      openDraco = false,
     } = options;
     return new Promise((res, rej) => {
       if (this._ModelMap.has(ModelID)) {
@@ -46,12 +48,16 @@ export default class ModelControl {
       }
       console.log("开始加载 GLTF 建筑物模型...");
       const gltfLoader = new GLTFLoader();
-
+      if (openDraco) {
+        const dracoLoader = new DRACOLoader();
+        dracoLoader.setDecoderPath("../three/examples/jsm/libs/draco/");
+        gltfLoader.setDRACOLoader(dracoLoader);
+      }
       gltfLoader.load(
         modelPath,
         // 加载成功的回调
         (gltf) => {
-          console.log("GLTF 建筑物模型加载成功！");
+          // console.log("GLTF 建筑物模型加载成功！");
 
           const model = gltf.scene;
 
@@ -69,11 +75,11 @@ export default class ModelControl {
               }
 
               // 打印网格信息
-              console.log(`GLTF 网格: "${child.name}"`);
+              // console.log(`GLTF 网格: "${child.name}"`);
 
               if (child.material) {
-                console.log("  材质:", child.material.name || "未命名");
-                console.log("  有贴图:", child.material.map ? "是" : "否");
+                // console.log("  材质:", child.material.name || "未命名");
+                // console.log("  有贴图:", child.material.map ? "是" : "否");
                 if (!child.userData.originalMaterial) {
                   child.userData.originalMaterial = child.material.clone(); //copy方法是浅拷贝，内部的color是引用类型，所以需要单独保存
                   child.userData.originalMaterialColor =
@@ -116,20 +122,20 @@ export default class ModelControl {
           // 添加到场景
           this.ThreeSdk.scene.add(model);
 
-          console.log("GLTF 建筑物已添加到场景");
-          console.log("  缩放:", scaleFactor);
-          console.log(
-            "  位置:",
-            model.position.x,
-            model.position.y,
-            model.position.z
-          );
-          console.log("  原始大小:", size.x, "x", size.y, "x", size.z);
+          // console.log("GLTF 建筑物已添加到场景");
+          // console.log("  缩放:", scaleFactor);
+          // console.log(
+          //   "  位置:",
+          //   model.position.x,
+          //   model.position.y,
+          //   model.position.z
+          // );
+          // console.log("  原始大小:", size.x, "x", size.y, "x", size.z);
 
           // 添加边界框辅助线（可选，用于调试）
           const helper = new THREE.BoxHelper(model, 0x00ff00);
           // scene.add(helper);
-          console.log("已添加绿色边界框辅助线");
+          // console.log("已添加绿色边界框辅助线");
 
           this._ModelMap.set(ModelID, model);
           res(model);
@@ -137,12 +143,12 @@ export default class ModelControl {
         // 加载进度的回调
         (xhr) => {
           const percentComplete = (xhr.loaded / xhr.total) * 100;
-          console.log(`GLTF 建筑物加载进度: ${Math.round(percentComplete)}%`);
+          // console.log(`GLTF 建筑物加载进度: ${Math.round(percentComplete)}%`);
           onLoadProcess && onLoadProcess(percentComplete);
         },
         // 加载错误的回调
         (error) => {
-          console.error("加载 GLTF 建筑物时出错:", error);
+          // console.error("加载 GLTF 建筑物时出错:", error);
           rej(error);
         }
       );
@@ -183,10 +189,10 @@ export default class ModelControl {
               this._hoveredObject.userData.originalMaterialColor
             );
             this._hoveredObject.material.needsUpdate = true;
-            console.log(
-              "恢复之前悬停对象的材质",
-              this._hoveredObject.userData.originalMaterial
-            );
+            // console.log(
+            //   "恢复之前悬停对象的材质",
+            //   this._hoveredObject.userData.originalMaterial
+            // );
           }
           this._hoveredObject = object;
           // 保存原始材质
@@ -248,14 +254,14 @@ export default class ModelControl {
       if (intersects.length > 0) {
         const clickedObject = intersects[0].object;
         const clickedPoint = intersects[0].point;
-        console.log("=== 点击事件触发 ===");
-        console.log(`点击对象: ${clickedObject.userData.name}`);
-        console.log(
-          `点击位置: (${clickedPoint.x.toFixed(2)}, ${clickedPoint.y.toFixed(
-            2
-          )}, ${clickedPoint.z.toFixed(2)})`
-        );
-        console.log(`对象信息:`, clickedObject.userData);
+        // console.log("=== 点击事件触发 ===");
+        // console.log(`点击对象: ${clickedObject.userData.name}`);
+        // console.log(
+        //   `点击位置: (${clickedPoint.x.toFixed(2)}, ${clickedPoint.y.toFixed(
+        //     2
+        //   )}, ${clickedPoint.z.toFixed(2)})`
+        // );
+        // console.log(`对象信息:`, clickedObject.userData);
 
         // 执行点击动画
         this._animateClick(clickedObject);

package/three/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright © 2010-2023 three.js authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/three/README.md

@@ -0,0 +1,86 @@
+# three.js
+
+[![NPM Package][npm]][npm-url]
+[![Build Size][build-size]][build-size-url]
+[![NPM Downloads][npm-downloads]][npmtrends-url]
+[![DeepScan][deepscan]][deepscan-url]
+[![Discord][discord]][discord-url]
+
+#### JavaScript 3D library
+
+The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available as addons.
+
+[Examples](https://threejs.org/examples/) —
+[Docs](https://threejs.org/docs/) —
+[Manual](https://threejs.org/manual/) —
+[Wiki](https://github.com/mrdoob/three.js/wiki) —
+[Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) —
+[Questions](https://stackoverflow.com/questions/tagged/three.js) —
+[Forum](https://discourse.threejs.org/) —
+[Discord](https://discord.gg/56GBJwAnUS)
+
+### Usage
+
+This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera.
+
+```javascript
+import * as THREE from 'three';
+
+const width = window.innerWidth, height = window.innerHeight;
+
+// init
+
+const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
+camera.position.z = 1;
+
+const scene = new THREE.Scene();
+
+const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+const material = new THREE.MeshNormalMaterial();
+
+const mesh = new THREE.Mesh( geometry, material );
+scene.add( mesh );
+
+const renderer = new THREE.WebGLRenderer( { antialias: true } );
+renderer.setSize( width, height );
+renderer.setAnimationLoop( animation );
+document.body.appendChild( renderer.domElement );
+
+// animation
+
+function animation( time ) {
+
+	mesh.rotation.x = time / 2000;
+	mesh.rotation.y = time / 1000;
+
+	renderer.render( scene, camera );
+
+}
+```
+
+If everything goes well, you should see [this](https://jsfiddle.net/2nyxkmco/).
+
+### Cloning this repository
+
+Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size.
+
+```sh
+git clone --depth=1 https://github.com/mrdoob/three.js.git
+```
+
+### Change log
+
+[Releases](https://github.com/mrdoob/three.js/releases)
+
+
+[npm]: https://img.shields.io/npm/v/three
+[npm-url]: https://www.npmjs.com/package/three
+[build-size]: https://badgen.net/bundlephobia/minzip/three
+[build-size-url]: https://bundlephobia.com/result?p=three
+[npm-downloads]: https://img.shields.io/npm/dw/three
+[npmtrends-url]: https://www.npmtrends.com/three
+[deepscan]: https://deepscan.io/api/teams/16600/projects/19901/branches/525701/badge/grade.svg
+[deepscan-url]: https://deepscan.io/dashboard#view=project&tid=16600&pid=19901&bid=525701
+[discord]: https://img.shields.io/discord/685241246557667386
+[discord-url]: https://discord.gg/56GBJwAnUS
+