easy-threesdk 1.0.0

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "easy-threesdk",
+  "version": "1.0.0",
+  "description": "����Threejs��װ�ij��ù��ܵ�sdk",
+  "main": "index.js",
+  "private": false,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "Threejs"
+  ],
+  "author": "coderxq",
+  "license": "ISC"
+}

package/plugins/LabelControl.js

@@ -0,0 +1,202 @@
+import * as THREE from "three";
+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 {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import { ThreeMFLoader } from "three/examples/jsm/Addons.js";
+
+export default class LabelControl {
+  _LabelMap = new Map();
+  constructor(container, ThreeSdk) {
+    this.container = container;
+    this.ThreeSdk = ThreeSdk;
+    this._init();
+  }
+  _init() {
+    // 创建 CSS3D 渲染器用于渲染 HTML 标签
+    this.labelRenderer = new CSS3DRenderer();
+    this.labelRenderer.setSize(
+      this.container.clientWidth,
+      this.container.clientHeight
+    );
+    this.labelRenderer.domElement.style.position = "absolute";
+    this.labelRenderer.domElement.style.top = "0";
+    this.labelRenderer.domElement.style.left = "0";
+    this.labelRenderer.domElement.style.pointerEvents = "none"; // 容器默认不拦截鼠标事件，但标签本身会处理
+    this.container.appendChild(this.labelRenderer.domElement);
+
+    window.addEventListener("resize", () => {
+      this.labelRenderer.setSize(
+        this.container.clientWidth,
+        this.container.clientHeight
+      );
+    });
+    this._animate();
+  }
+
+  _animate() {
+    this.labelRenderer.render(this.ThreeSdk.scene, this.ThreeSdk.camera);
+    requestAnimationFrame(this._animate.bind(this));
+  }
+
+  /**
+   * 创建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标签对象，可以用于后续操作（如隐藏、删除等）
+   */
+  create3DLabel(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-custom",
+    } = options;
+
+    // 创建HTML元素
+    const labelDiv = document.createElement("div");
+    labelDiv.className = className;
+
+    // 设置样式（添加鼠标悬停效果和点击样式）
+    labelDiv.style.cssText = `
+      position: relative;
+      background: ${backgroundColor};
+      color: ${textColor};
+      padding: 12px 20px;
+      border-radius: 8px;
+      border: 2px solid ${borderColor};
+      box-shadow: 0 4px 12px rgba(34, 211, 238, 0.3);
+      font-size: ${fontSize}px;
+      font-weight: 500;
+      white-space: nowrap;
+      min-width: ${width};
+      text-align: center;
+      backdrop-filter: blur(10px);
+      pointer-events: auto; /* 允许标签接收鼠标事件 */
+      user-select: none;
+      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 arrow = document.createElement("div");
+    arrow.style.cssText = `
+      position: absolute;
+      bottom: -8px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid ${borderColor};
+    `;
+    labelDiv.appendChild(arrow);
+
+    // 创建 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 = () => {},
+    } = Events;
+    labelDiv.addEventListener("click", (e) => {
+      e.stopPropagation(); // 阻止事件冒泡
+      click({
+        $event: e,
+        label: label,
+        labelDiv: labelDiv,
+      });
+    });
+    labelDiv.addEventListener("mouseenter", (e) => {
+      e.stopPropagation(); // 阻止事件冒泡
+      mouseenter({
+        $event: e,
+        label: label,
+        labelDiv: labelDiv,
+      });
+    });
+    labelDiv.addEventListener("mouseleave", (e) => {
+      e.stopPropagation(); // 阻止事件冒泡
+      mouseleave({
+        $event: e,
+        label: label,
+        labelDiv: labelDiv,
+      });
+    });
+  }
+}

package/plugins/ModelControl.js

@@ -0,0 +1,281 @@
+import * as THREE from "three";
+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 {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import { ThreeMFLoader } from "three/examples/jsm/Addons.js";
+
+export default class ModelControl {
+  _hoveredObject = null;
+  _clickableObjects = [];
+  _ModelMap = new Map();
+  constructor(container, ThreeSdk) {
+    this.container = container;
+    this.ThreeSdk = ThreeSdk;
+    this._init();
+  }
+  _init() {}
+
+  /**
+   * 加载 GLTF 格式的建筑物模型
+   * @param {Object} options {ModelID, modelPath, position, scale, clickable}
+   * @param {string} options.ModelID 模型ID
+   * @param {string} options.modelPath 模型路径
+   * @param {Array} options.position 模型位置 [x, z]
+   * @param {number} options.scale 模型缩放
+   * @param {boolean} options.clickable 模型是否可点击
+   * @param {*} onLoadProcess  加载进度回调函数
+   * @returns
+   */
+  loadGLTFBuilding(options, onLoadProcess) {
+    let {
+      ModelID,
+      modelPath,
+      position = [0, 0],
+      scale = 30,
+      clickable = true,
+    } = options;
+    return new Promise((res, rej) => {
+      if (this._ModelMap.has(ModelID)) {
+        res(this._ModelMap.get(ModelID));
+      }
+      console.log("开始加载 GLTF 建筑物模型...");
+      const gltfLoader = new GLTFLoader();
+
+      gltfLoader.load(
+        modelPath,
+        // 加载成功的回调
+        (gltf) => {
+          console.log("GLTF 建筑物模型加载成功！");
+
+          const model = gltf.scene;
+
+          // 设置阴影
+          model.traverse((child) => {
+            if (child.isMesh) {
+              // 🔑 关键修复：克隆材质，避免材质共享问题
+              // 如果不克隆，多个网格可能共享同一个材质引用，修改一个会影响所有
+              child.material = child.material.clone();
+              child.castShadow = true;
+              child.receiveShadow = true;
+              child.userData.clickable = clickable;
+              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}"`);
+              if (child.material) {
+                console.log("  材质:", child.material.name || "未命名");
+                console.log("  有贴图:", child.material.map ? "是" : "否");
+              }
+            }
+          });
+
+          // 计算模型边界框
+          const box = new THREE.Box3().setFromObject(model);
+          const size = new THREE.Vector3();
+          box.getSize(size);
+          const minY = box.min.y;
+
+          // 缩放模型（根据需要调整）
+          const scaleFactor = scale;
+          model.scale.set(scaleFactor, scaleFactor, scaleFactor);
+
+          // 重新计算缩放后的边界框和中心
+          const boxScaled = new THREE.Box3().setFromObject(model);
+          const centerScaled = new THREE.Vector3();
+          boxScaled.getCenter(centerScaled);
+          const sizeScaled = new THREE.Vector3();
+          boxScaled.getSize(sizeScaled);
+
+          // 将模型居中：使模型的中心位于场景中心 (0, 0, 0)
+          // position[0] 和 position[1] 是用户想要模型中心的位置
+          // 但由于模型本身有中心偏移，需要减去 centerScaled 来补偿
+          model.position.x = position[0] - centerScaled.x; // 使模型中心在 position[0]
+          model.position.y = -minY * scaleFactor; // 放置在地面上
+          model.position.z = position[1] - centerScaled.z; // 使模型中心在 position[1]
+
+          // 相机始终看向场景中心 (0, 0, 0)，而不是模型位置
+          // 这样地形（点阵底座）和模型都会在视野中，地形不会偏移
+          this.ThreeSdk.camera.lookAt(0, 0, 0);
+
+          // 添加到场景
+          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);
+
+          // 添加边界框辅助线（可选，用于调试）
+          const helper = new THREE.BoxHelper(model, 0x00ff00);
+          // scene.add(helper);
+          console.log("已添加绿色边界框辅助线");
+
+          this._ModelMap.set(ModelID, model);
+          res(model);
+        },
+        // 加载进度的回调
+        (xhr) => {
+          const percentComplete = (xhr.loaded / xhr.total) * 100;
+          console.log(`GLTF 建筑物加载进度: ${Math.round(percentComplete)}%`);
+          onLoadProcess && onLoadProcess(percentComplete);
+        },
+        // 加载错误的回调
+        (error) => {
+          console.error("加载 GLTF 建筑物时出错:", error);
+          rej(error);
+        }
+      );
+    });
+  }
+
+  //开启模型鼠标移动事件监听 - 用于悬停效果
+  onModelMouseMoveListener(callback = () => {}) {
+    window.addEventListener("mousemove", (event) => {
+      let mouse = new THREE.Vector2();
+      // 计算鼠标在标准化设备坐标中的位置 (-1 到 +1)
+      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+      // 更新射线
+      this.ThreeSdk.raycaster.setFromCamera(mouse, this.ThreeSdk.camera);
+
+      // 检测相交的对象
+      const intersects = this.ThreeSdk.raycaster.intersectObjects(
+        this._clickableObjects,
+        false
+      );
+
+      if (intersects.length > 0) {
+        const object = intersects[0].object;
+
+        // 如果是新的悬停对象
+        if (this._hoveredObject !== object) {
+          // 恢复之前悬停对象的材质
+          if (
+            this._hoveredObject &&
+            this._hoveredObject.userData.originalMaterial
+          ) {
+            this._hoveredObject.material =
+              this._hoveredObject.userData.originalMaterial;
+          }
+          this._hoveredObject = object;
+          // 保存原始材质
+
+          if (!this._hoveredObject.userData.originalMaterial) {
+            this._hoveredObject.userData.originalMaterial =
+              this._hoveredObject.material.clone();
+          }
+
+          this._animateMouseMove(object);
+        }
+
+        callback(object);
+      } else {
+        // 没有悬停对象，恢复状态
+        if (
+          this._hoveredObject &&
+          this._hoveredObject.userData.originalMaterial
+        ) {
+          this._hoveredObject.material =
+            this._hoveredObject.userData.originalMaterial;
+          this._hoveredObject = null;
+        }
+        this.ThreeSdk.renderer.domElement.style.cursor = "default";
+        callback(null);
+      }
+    });
+  }
+
+  /**
+   * 设置模型Mesh对象鼠标移动悬停效果
+   * @param {THREE.Mesh} object 模型Mesh对象
+   */
+  _animateMouseMove(object) {
+    // 创建高亮材质
+    const highlightMaterial = this._hoveredObject.material.clone();
+    highlightMaterial.emissive = new THREE.Color(0x00ffff);
+    highlightMaterial.emissiveIntensity = 0.3;
+    this._hoveredObject.material = highlightMaterial;
+
+    // 更新鼠标样式和状态
+    this.ThreeSdk.renderer.domElement.style.cursor = "pointer";
+  }
+
+  //开启模型鼠标点击事件监听
+  onModelClickListener(callback = () => {}) {
+    window.addEventListener("click", (event) => {
+      let mouse = new THREE.Vector2();
+      // 计算鼠标位置
+      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+      this.ThreeSdk.raycaster.setFromCamera(mouse, this.ThreeSdk.camera);
+      // 检测相交的对象
+      const intersects = this.ThreeSdk.raycaster.intersectObjects(
+        this._clickableObjects,
+        false
+      );
+
+      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);
+
+        // 执行点击动画
+        this._animateClick(clickedObject);
+
+        callback(clickedObject);
+      } else {
+        callback(null);
+      }
+    });
+  }
+
+  /**
+   * 模型Mesh对象点击动画效果
+   * @param {THREE.Mesh} object 模型Mesh对象
+   */
+  _animateClick(object) {
+    // 点击的网格的颜色永久变为绿色
+    object.material.color.set(0x00ff00);
+    const originalScale = object.scale.clone();
+    let progress = 0;
+
+    const animate = () => {
+      progress += 0.1;
+      const scale = 1 + Math.sin(progress * Math.PI) * 0.1;
+      object.scale.copy(originalScale).multiplyScalar(scale);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        object.scale.copy(originalScale);
+      }
+    };
+    animate();
+  }
+}