easy-threesdk 1.0.5 → 1.0.7

package/README.md

@@ -4,7 +4,7 @@
 
 ThreeSDK 是一个基于 Three.js 的封装库，旨在简化 3D 场景的搭建、模型加载、交互控制以及标签系统的开发。通过封装常用的 Three.js 功能，开发者可以更快速地构建具有漫游、交互和标注功能的 3D 应用。
 
-**当前版本：** 1.0.3
+**当前版本：** 1.0.7
 
 ## 2. 安装
 

package/index.js

@@ -170,20 +170,20 @@ class ThreeSdk {
 
     //初始化控制器
     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-    this.controls.target.set(target.x, target.y, target.z);
-    this.controls.enableDamping = enableDamping;
-    this.controls.dampingFactor = dampingFactor;
-    this.controls.minDistance = minDistance;
-    this.controls.maxDistance = maxDistance;
-    this.controls.maxPolarAngle = maxPolarAngle;
+    this.controls.target.set(target.x, target.y, target.z); //设置控制器的目标位置
+    this.controls.enableDamping = enableDamping; //设置控制器是否启用阻尼
+    this.controls.dampingFactor = dampingFactor; //设置控制器阻尼因子
+    this.controls.minDistance = minDistance; //设置控制器最小距离
+    this.controls.maxDistance = maxDistance; //设置控制器最大距离
+    this.controls.maxPolarAngle = maxPolarAngle; //设置控制器最大极角
 
     // 保存 OrbitControls 的原始配置（用于退出第一人称模式时恢复）
-    this._OrbitControlsConfig.enablePan = this.controls.enablePan;
-    this._OrbitControlsConfig.enableZoom = this.controls.enableZoom;
-    this._OrbitControlsConfig.minDistance = this.controls.minDistance;
-    this._OrbitControlsConfig.maxDistance = this.controls.maxDistance;
-    this._OrbitControlsConfig.maxPolarAngle = this.controls.maxPolarAngle;
-    this._OrbitControlsConfig.target = this.controls.target.clone();
+    this._OrbitControlsConfig.enablePan = this.controls.enablePan; //保存控制器是否启用平移
+    this._OrbitControlsConfig.enableZoom = this.controls.enableZoom; //保存控制器是否启用缩放
+    this._OrbitControlsConfig.minDistance = this.controls.minDistance; //保存控制器最小距离
+    this._OrbitControlsConfig.maxDistance = this.controls.maxDistance; //保存控制器最大距离
+    this._OrbitControlsConfig.maxPolarAngle = this.controls.maxPolarAngle; //保存控制器最大极角
+    this._OrbitControlsConfig.target = this.controls.target.clone(); //保存控制器目标位置
 
     // 初始化场景灯光
     this.scene.add(new THREE.AmbientLight(ambientLight, ambientLightIntensity)); // 调亮环境光
@@ -212,8 +212,8 @@ class ThreeSdk {
       const w = this.container.clientWidth;
       const h = this.container.clientHeight;
       this.camera.aspect = w / h;
-      this.camera.updateProjectionMatrix();
-      this.renderer.setSize(w, h);
+      this.camera.updateProjectionMatrix(); //更新相机投影矩阵
+      this.renderer.setSize(w, h); //设置渲染器大小
     });
 
     this._handleWindowEvent();
@@ -855,9 +855,9 @@ class ThreeSdk {
     }
 
     // 如果当前选中了该 mesh，更新 TransformControls
-    if (selectedMesh === mesh && transformControls) {
-      transformControls.updateMatrixWorld();
-    }
+    // if (selectedMesh === mesh && transformControls) {
+    //   transformControls.updateMatrixWorld();
+    // }
 
     // console.log("✅ 信息已应用到 mesh:", mesh.userData.name || "未命名对象");
   }

package/loader/WaterMaterial/index.js

@@ -1,7 +1,8 @@
 import { Water } from "three/examples/jsm/objects/Water.js";
 import * as THREE from "three";
 import waterNormalMap from "./resource/textures/waternormals.jpg";
-function createWaterLoader(scene) {
+import waterTestMap from "./resource/textures/test.png";
+export function createWater1Loader(scene) {
   // 创建 PlaneGeometry 网格
   const planeGeometry = new THREE.PlaneGeometry(10, 10);
 
@@ -9,14 +10,15 @@ function createWaterLoader(scene) {
     textureWidth: 512,
     textureHeight: 512,
     waterNormals: new THREE.TextureLoader().load(
-      waterNormalMap,
+      waterTestMap,
       function (texture) {
         texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
       }
     ),
     sunDirection: new THREE.Vector3(),
     sunColor: 0xffffff,
-    waterColor: 0x001e0f,
+    // waterColor: 0x001e0f,
+    waterColor: "#187da0",
     distortionScale: 3.7,
     fog: scene.fog !== undefined,
   });
@@ -32,4 +34,44 @@ function createWaterLoader(scene) {
   animate();
   return planeMesh;
 }
-export default createWaterLoader;
+
+export function createWater2Loader(scene) {
+  // 添加基础光照
+  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+  scene.add(ambientLight);
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  directionalLight.position.set(5, 10, 5);
+  scene.add(directionalLight);
+
+  // 创建水面
+  const waterGeometry = new THREE.PlaneGeometry(10, 10);
+
+  const water = new Water(waterGeometry, {
+    textureWidth: 512,
+    textureHeight: 512,
+    waterNormals: new THREE.TextureLoader().load(
+      waterNormalMap,
+      function (texture) {
+        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+      }
+    ),
+    sunDirection: new THREE.Vector3(0, 1, 0),
+    sunColor: 0xffffff,
+    waterColor: 0x001e0f,
+    distortionScale: 3.7,
+    fog: scene.fog !== undefined,
+  });
+
+  water.rotation.x = -Math.PI / 2;
+  scene.add(water);
+
+  function animate() {
+    water.material.uniforms["time"].value += 1.0 / 60.0;
+
+    requestAnimationFrame(animate);
+  }
+
+  animate();
+  return water;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy-threesdk",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "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,7 +48,11 @@ 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,
         // 加载成功的回调
@@ -257,8 +263,8 @@ export default class ModelControl {
         // );
         // console.log(`对象信息:`, clickedObject.userData);
 
-        // 执行点击动画
-        this._animateClick(clickedObject);
+        // 执行点击触发后的动画
+        // this._animateClick(clickedObject);
 
         callback(clickedObject);
       } else {
@@ -322,5 +328,6 @@ export default class ModelControl {
           break;
       }
     });
+    return controls;
   }
 }

package/three/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright © 2010-2025 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,85 @@
+# three.js
+
+[![NPM Package][npm]][npm-url]
+[![Build Size][build-size]][build-size-url]
+[![NPM Downloads][npm-downloads]][npmtrends-url]
+[![jsDelivr Downloads][jsdelivr-downloads]][jsdelivr-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 WebGL and WebGPU renderers but 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( animate );
+document.body.appendChild( renderer.domElement );
+
+// animation
+
+function animate( 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/w43x5Lgh/).
+
+### 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
+[jsdelivr-downloads]: https://data.jsdelivr.com/v1/package/npm/three/badge?style=rounded
+[jsdelivr-url]: https://www.jsdelivr.com/package/npm/three
+[discord]: https://img.shields.io/discord/685241246557667386
+[discord-url]: https://discord.gg/56GBJwAnUS