@ridp/threejs 0.0.1

package/src/hooks/useThreeJs.js

@@ -0,0 +1,280 @@
+import {
+  Scene,
+  Group,
+  PerspectiveCamera,
+  WebGLRenderer,
+  Color,
+  Box3,
+  Vector3,
+  MathUtils,
+  EquirectangularReflectionMapping,
+} from "three";
+import Stats from "three/addons/libs/stats.module.js";
+import { CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import { RGBELoader } from "three/examples/jsm/Addons.js";
+
+import {
+  createOrbitControl,
+  createAxesHelper,
+  createGridHelper,
+  disposeThreeObject,
+} from "../utils";
+
+// const hdrImage = new URL(
+//   "./assets/hdr/slightly_overcast_sky_dome_1k.hdr",
+//   import.meta.url
+// ).href;
+
+// import hdrImage from "../../public/hdr/slightly_overcast_sky_dome_1k.hdr";
+// const hdrImage = '/hdr/slightly_overcast_sky_dome_1k.hdr'
+
+const rgbeLoader = new RGBELoader();
+// 缓存Hdr
+const cacheHdr = {};
+// 默认控制器配置
+const defaultControlOpt = {
+  enableDamping: true,
+  dampingFactor: 0.25,
+  screenSpacePanning: false,
+  minDistance: 0.1,
+  maxDistance: 1000,
+  maxPolarAngle: Math.PI / 2,
+};
+
+const renderer = new WebGLRenderer({
+  antialias: true,
+  alpha: true,
+  precision: "mediump",
+});
+export function useThreeJs(selector, option) {
+  const _option = Object.assign(
+    {
+      css3d: false,
+      stats: false,
+      axesHelper: {
+        init: false,
+        size: 10,
+      },
+      gridHelper: {
+        init: false,
+      },
+      control: {
+        init: true,
+        options: {},
+      },
+      envImage: true,
+    },
+    option || {}
+  );
+
+  let el,
+    stats,
+    css3dRenderer,
+    control,
+    animateCbs = [];
+
+  const domWidth = ref(0);
+  const domHeight = ref(0);
+
+  const scene = new Scene({});
+  scene.background = new Color("#222b38");
+  const objectGroup = new Group();
+  scene.add(objectGroup);
+
+  renderer.setPixelRatio(window.devicePixelRatio);
+  const camera = new PerspectiveCamera(50, 1, 0.1, 2000);
+  const tanFOV = Math.tan(((Math.PI / 180) * camera.fov) / 2);
+
+  function init() {
+    const size = getTargetSize();
+    domWidth.value = size[0];
+    domHeight.value = size[1];
+
+    camera.aspect = domWidth.value / domHeight.value;
+    camera.position.set(47, 39, 100);
+    camera.fov =
+      (360 / Math.PI) * Math.atan(tanFOV * (domHeight.value / domWidth.value));
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(domWidth.value, domHeight.value);
+    el.appendChild(renderer.domElement);
+
+    // 环境贴图
+    _option.envImage && initEnvImage(scene);
+
+    _option.stats && initStats();
+    // css3d
+    _option.css3d && createCss3dRenderer();
+    // axesHelper
+    if (_option.axesHelper && _option.axesHelper.init) {
+      const axesHelper = createAxesHelper(_option.axesHelper.size || 10);
+      scene.add(axesHelper);
+    }
+    // GridHelper
+    if (_option.gridHelper && _option.gridHelper.init) {
+      const gridHelper = createGridHelper(
+        _option.gridHelper.size || 150,
+        _option.gridHelper.options || {}
+      );
+      scene.add(gridHelper);
+    }
+    // 控制器
+    if (_option.control && _option.control.init) {
+      control = createOrbitControl(camera, renderer.domElement);
+      const controlOpt = _option.control.options || defaultControlOpt;
+      Object.keys(controlOpt).forEach((key) => {
+        control[key] = controlOpt[key];
+      });
+    }
+
+    return { control, scene, camera, renderer };
+  }
+
+  function addAnimate(animate) {
+    animateCbs.push(animate);
+  }
+
+  function animate(cbs) {
+    animateCbs &&
+      animateCbs.length &&
+      animateCbs.forEach((fun) => {
+        typeof fun === "function" && fun();
+      });
+
+    control && control.update();
+    renderer.render(scene, camera);
+    stats && stats.update();
+    css3dRenderer && css3dRenderer.render(scene, camera);
+
+    requestAnimationFrame(animate);
+  }
+
+  function onResize() {
+    nextTick(() => {
+      const size = getTargetSize();
+      domWidth.value = size[0];
+      domHeight.value = size[1];
+      camera.aspect = domWidth.value / domHeight.value;
+      // adjust the FOV
+      camera.fov =
+        (360 / Math.PI) *
+        Math.atan(tanFOV * (domHeight.value / domWidth.value));
+      camera.updateProjectionMatrix();
+      camera.lookAt(scene.position);
+
+      renderer.render(scene, camera);
+      renderer.setSize(domWidth.value, domHeight.value);
+
+      css3dRenderer && css3dRenderer.setSize(domWidth.value, domHeight.value);
+    });
+  }
+
+  function getTargetSize() {
+    el = document.querySelector(selector);
+    return [el.clientWidth, el.clientHeight];
+  }
+
+  function initStats() {
+    stats = new Stats();
+    stats.dom.style.cssText =
+      "position:absolute;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
+    el.appendChild(stats.dom);
+  }
+
+  /**物体视窗自动适应
+   *
+   * @param {*} model
+   * @param {*} scale
+   * @param {*} camera
+   * @param {*} controls
+   */
+  function frameArea(model, scale, camera, controls) {
+    const box = new Box3().setFromObject(model);
+    const boxSize = box.getSize(new Vector3()).length();
+    const boxCenter = box.getCenter(new Vector3());
+
+    const sizeToFitOnScreen = boxSize * scale;
+    const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
+    const halfFovY = MathUtils.degToRad(camera.fov * 0.5);
+    const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);
+    const direction = new Vector3()
+      .subVectors(camera.position, boxCenter)
+      .multiply(new Vector3(1, 1, 1))
+      .normalize();
+
+    const neP = direction.multiplyScalar(distance).add(boxCenter);
+
+    const targetOption = {
+      x: neP.x,
+      y: neP.y,
+      z: neP.z,
+      lookAt_x: boxCenter.x,
+      lookAt_y: boxCenter.y,
+      lookAt_z: boxCenter.z,
+    };
+
+    camera.position.set(targetOption.x, targetOption.y, targetOption.z);
+    camera.lookAt(
+      targetOption.lookAt_x,
+      targetOption.lookAt_y,
+      targetOption.lookAt_z
+    );
+    camera.updateProjectionMatrix();
+    controls.target.copy(boxCenter);
+    controls.update();
+    return boxSize;
+  }
+
+  function createCss3dRenderer() {
+    css3dRenderer = new CSS3DRenderer();
+    css3dRenderer.setSize(domWidth.value, domHeight.value);
+    css3dRenderer.domElement.style.position = "absolute";
+    css3dRenderer.domElement.style.top = 0;
+    css3dRenderer.domElement.style.left = 0;
+    css3dRenderer.domElement.style.pointerEvents = "none";
+    el.appendChild(css3dRenderer.domElement);
+  }
+
+  function dispose() {
+    disposeThreeObject(scene);
+  }
+
+  return {
+    init,
+    dispose,
+    animate,
+    onResize,
+    addAnimate,
+    frameArea,
+
+    objectGroup,
+    scene,
+    camera,
+    control,
+    renderer,
+    domWidth,
+    domHeight,
+  };
+}
+
+// 加载环境贴图
+export async function initEnvImage(scene, hdrImg) {
+  if (!hdrImg) return;
+  if (cacheHdr[hdrImg]) {
+    const texture = cacheHdr[hdrImg];
+    scene.environment = texture;
+    return;
+  }
+
+  return new Promise((resolve, reject) => {
+    rgbeLoader.load(hdrImg, resolve, undefined, reject);
+  })
+    .then((texture) => {
+      texture.mapping = EquirectangularReflectionMapping;
+      scene.environment = texture;
+      cacheHdr[hdrImg] = texture;
+    })
+    .catch((e) => {
+      console.log("  =====> e:", e);
+    });
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export * from "./utils";

package/src/utils/common.js

@@ -0,0 +1,27 @@
+export const getCommonParent = (meshList, objectGroup) => {
+  const parentCount = {};
+
+  meshList.forEach((mesh) => {
+    let parent = mesh.parent;
+    while (parent) {
+      if (parentCount[parent.uuid]) {
+        parentCount[parent.uuid]++;
+      } else {
+        parentCount[parent.uuid] = 1;
+      }
+      parent = parent.parent;
+    }
+  });
+
+  let commonParent = null;
+  let maxCount = 0;
+
+  for (const uuid in parentCount) {
+    if (parentCount[uuid] > maxCount) {
+      maxCount = parentCount[uuid];
+      commonParent = objectGroup.getObjectByProperty("uuid", uuid);
+    }
+  }
+
+  return commonParent;
+};

package/src/utils/css3dHelper.js

@@ -0,0 +1,24 @@
+import { CSS3DSprite } from "three/examples/jsm/Addons.js";
+
+/**
+ * 创建 CSS3DSprite 信息面板
+ * @param { string } id 元素ID
+ * @param { [ number, number, number ]} scale 缩放
+ * @returns new CSS3DSprite()
+ *
+ * 注意: html元素不能设置模板为结对定位!!!
+ */
+export function createInfoPlane(id, scale = [0.3, 0.3, 0.3]) {
+  const el = document.querySelector(`#${id}`);
+  if (!el) {
+    console.log(" 获取 infoPlane 元素失败 (id) =====> :", id);
+    return;
+  }
+  const _el = el.cloneNode(true);
+  _el.style.display = "block";
+
+  const plane = new CSS3DSprite(_el);
+  plane.visible = false;
+  plane.scale.set(...scale);
+  return plane;
+}

package/src/utils/disposeObject.js

@@ -0,0 +1,39 @@
+/**
+ * 递归释放THREE.js对象 / 材质
+ * @param { Object3D } object
+ */
+export const disposeThreeObject = (object) => {
+  if (object.geometry) {
+    object.geometry.dispose();
+  }
+
+  if (object.material) {
+    // 如果材质是一个数组（例如多材质对象），需要遍历数组并释放每个材质
+    if (Array.isArray(object.material)) {
+      object.material.forEach((material) => {
+        disposeMaterial(material);
+      });
+    } else {
+      disposeMaterial(object.material);
+    }
+  }
+
+  // 递归释放子对象
+  if (object.children) {
+    object.children.forEach((child) => disposeThreeObject(child));
+  }
+};
+
+/**
+ * 释放THREE.js材质
+ * @param { Material } material
+ */
+function disposeMaterial(material) {
+  // 释放材质的纹理
+  for (const key in material) {
+    if (material[key] && material[key].isTexture) {
+      material[key].dispose();
+    }
+  }
+  material.dispose();
+}

package/src/utils/helper.js

@@ -0,0 +1,56 @@
+import {
+  BoxHelper,
+  GridHelper,
+  Raycaster,
+  Vector2,
+  AxesHelper,
+  Vector3,
+  ArrowHelper,
+  CameraHelper
+} from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { MapControls } from "three/addons/controls/MapControls.js";
+
+
+export function createCameraHelper(camera){
+  return new CameraHelper(camera);
+}
+
+export function createGridHelper(size = 150, ...args) {
+  return new GridHelper(size, size / 10, ...args);
+}
+
+export function createBox3Helper(model) {
+  return new BoxHelper(model, 0xffff00);
+}
+
+export function createOrbitControl(camera, dom) {
+  return new OrbitControls(camera, dom);
+}
+
+export function createMapControls(camera, dom) {
+  return new MapControls(camera, dom);
+}
+
+export function createRaycaster() {
+  const raycaster = new Raycaster();
+  const pointer = new Vector2(0, 0);
+  return {
+    raycaster,
+    pointer,
+  };
+}
+
+export function createAxesHelper(size = 10) {
+  return new AxesHelper(size);
+}
+
+export function createArrowHelper(
+  dir = new Vector3(1, 1, 1),
+  ori = new Vector3(10, 10, 10),
+  length = 5,
+  hex = 0xffff00
+) {
+  dir.normalize();
+  return new ArrowHelper(dir, ori, length, hex);
+}

package/src/utils/index.js

@@ -0,0 +1,4 @@
+export * from "./helper.js";
+export * from "./css3dHelper.js";
+export * from "./disposeObject.js";
+export * from "./common.js";

package/vite.config.js

@@ -0,0 +1,35 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "src"),
+    },
+  },
+  build: {
+    lib: {
+      entry: {
+        threejs: resolve(__dirname, "src/index.js"),
+        hooks: resolve(__dirname, "src/hooks/index.js"),
+        utils: resolve(__dirname, "src/utils/index.js"),
+      },
+      name: "threejs",
+    },
+    rollupOptions: {
+      // 确保外部化处理那些
+      // 你不想打包进库的依赖
+      external: ["three"],
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖
+        // 提供一个全局变量
+        globals: {
+          three: "three",
+        },
+      },
+    },
+  },
+});