threejs编写加载本地的obj、gltf（glb）、3dtiles数据可视化页面

最新推荐文章于 2025-12-18 16:03:39 发布
原创 最新推荐文章于 2025-12-18 16:03:39 发布 · 75 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#3d #信息可视化 #arcgis 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D 模型加载器</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 10px;
      border-radius: 5px;
      z-index: 100;
    }

    #loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 20px;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.8);
      padding: 20px;
      border-radius: 10px;
    }
  </style>
</head>

<body>
  <div id="info">加载中...</div>
  <div id="loading" style="display: none;"></div>

  <script type="importmap">
    {
      "imports": {
        "three": "./node_modules/three/build/three.module.js",
        "three/examples/jsm/": "./node_modules/three/examples/jsm/",
        "3d-tiles-renderer": "./node_modules/3d-tiles-renderer/build/index.three.js",
        "dat.gui": "./node_modules/dat.gui/build/dat.gui.module.js"
      }
    }
  </script>

  <script type="module">
    // 动态导入所有模块
    (async () => {
      try {
        const THREE = await import('three');
        window.THREE = THREE;
        const { OrbitControls } = await import('three/examples/jsm/controls/OrbitControls.js');
        const { GLTFLoader } = await import('three/examples/jsm/loaders/GLTFLoader.js');
        const { DRACOLoader } = await import('three/examples/jsm/loaders/DRACOLoader.js');
        // const { TilesRenderer } = await import('3d-tiles-renderer');
        const { GUI } = await import('dat.gui');
        const { MTLLoader } = await import('three/examples/jsm/loaders/MTLLoader.js');
        const { OBJLoader } = await import('three/examples/jsm/loaders/OBJLoader.js');
        const { TilesRenderer, GoogleTilesRenderer } = await import('https://cdn.jsdelivr.net/npm/3d-tiles-renderer@0.3.30/+esm');
        // const { DRACOLoader } = await import('three/examples/jsm/loaders/DRACOLoader.js');
        // const { Loader3DTiles } = await import('three-loader-3dtiles');



        console.log('所有模块加载成功！');

        // ========== 1. 创建基础 3D 场景 ==========
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87ceeb); // 天空蓝

        const camera = new THREE.PerspectiveCamera(
          75,
          window.innerWidth / window.innerHeight,
          0.1,
          100000
        );
        camera.position.set(0, 100, 200);

        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

        // 添加光源
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(100, 100, 50);
        directionalLight.castShadow = true;
        scene.add(directionalLight);

        // ========== 2. 创建图层分组 ==========
        const glbGroup = new THREE.Group();
        glbGroup.name = 'GLB_Group';
        scene.add(glbGroup);

        const objGroup = new THREE.Group();
        objGroup.name = 'OBJ_Group';
        scene.add(objGroup);

        // 注意：3D Tiles 不再使用单独的组，直接添加到场景

        // ========== 3. 读取 input.txt 文件 ==========
        async function readInputFile(url) {
          const response = await fetch(url);
          const text = await response.text();
          return text.split('\n')
            .map(line => line.trim())
            .filter(line => line && !line.startsWith('#'))
            .map(line => line.replace(/^\.\\/, '').replace(/\\/g, '/'));
        }

        // ========== 4. 加载 GLB 文件 ==========
        const gltfLoader = new GLTFLoader();
        let glbLoadedCount = 0;
        let glbTotalCount = 0;

        // 限制并发加载数量，避免服务器过载
        async function loadWithRetry(loader, path, maxRetries = 3, delay = 1000) {
          for (let i = 0; i < maxRetries; i++) {
            try {
              return await new Promise((resolve, reject) => {
                const timeout = setTimeout(() => {
                  reject(new Error('加载超时'));
                }, 60000); // 60秒超时

                loader.load(
                  path,
                  (result) => {
                    clearTimeout(timeout);
                    resolve(result);
                  },
                  undefined,
                  (error) => {
                    clearTimeout(timeout);
                    reject(error);
                  }
                );
              });
            } catch (error) {
              if (i === maxRetries - 1) {
                throw error;
              }
              // 等待后重试
              await new Promise(resolve => setTimeout(resolve, delay * (i + 1)));
            }
          }
        }

        async function loadGLBFiles() {
          try {
            const glbPaths = await readInputFile('./assets/glb/input.txt');
            glbTotalCount = glbPaths.length;
            updateLoadingInfo(`正在加载 GLB 文件: 0/${glbTotalCount}`);

            // 限制并发数量为 5
            const concurrency = 5;
            for (let i = 0; i < glbPaths.length; i += concurrency) {
              const batch = glbPaths.slice(i, i + concurrency);

              await Promise.all(batch.map(async (path) => {
                const fullPath = `./assets/glb/${path}`;
                try {
                  const gltf = await loadWithRetry(gltfLoader, fullPath);
                  // 确保场景已更新矩阵
                  gltf.scene.updateMatrixWorld(true);
                  glbGroup.add(gltf.scene);
                  glbLoadedCount++;
                  updateLoadingInfo(`正在加载 GLB 文件: ${glbLoadedCount}/${glbTotalCount}`);

                  // 调试：输出第一个模型的位置
                  if (glbLoadedCount === 1 && gltf.scene.children.length > 0) {
                    const firstChild = gltf.scene.children[0];
                    if (firstChild.position) {
                      console.log('第一个 GLB 模型位置:', firstChild.position);
                    }
                  }
                } catch (error) {
                  console.warn(`加载 GLB 文件失败: ${fullPath}`, error);
                }
              }));

              // 批次之间稍作延迟
              if (i + concurrency < glbPaths.length) {
                await new Promise(resolve => setTimeout(resolve, 100));
              }
            }
            console.log(`GLB 文件加载完成: ${glbLoadedCount}/${glbTotalCount}`);
          } catch (error) {
            console.error('读取 GLB input.txt 失败:', error);
          }
        }

        // ========== 5. 加载 OBJ 文件 ==========
        const mtlLoader = new MTLLoader();
        const objLoader = new OBJLoader();
        let objLoadedCount = 0;
        let objTotalCount = 0;

        async function loadOBJFiles() {
          try {
            const objPaths = await readInputFile('./assets/objs-3dtiles/3dtiles/input.txt');
            objTotalCount = objPaths.length;
            updateLoadingInfo(`正在加载 OBJ 文件: 0/${objTotalCount}`);

            // 限制并发数量为 5
            const concurrency = 5;
            for (let i = 0; i < objPaths.length; i += concurrency) {
              const batch = objPaths.slice(i, i + concurrency);

              await Promise.all(batch.map(async (path) => {
                const fullPath = `./assets/objs-3dtiles/3dtiles/${path}`;
                const basePath = fullPath.substring(0, fullPath.lastIndexOf('/') + 1);
                const fileName = path.substring(path.lastIndexOf('/') + 1);
                const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.'));

                try {
                  // 尝试加载对应的 MTL 文件
                  const mtlPath = `${basePath}${nameWithoutExt}.mtl`;
                  let materials = null;

                  try {
                    materials = await loadWithRetry(mtlLoader, mtlPath, 2, 500);
                    materials.preload();
                  } catch (mtlError) {
                    // MTL 文件不存在或加载失败，继续加载 OBJ
                  }

                  if (materials) {
                    objLoader.setMaterials(materials);
                  }

                  const obj = await loadWithRetry(objLoader, fullPath);
                  // 确保对象已更新矩阵
                  obj.updateMatrixWorld(true);
                  objGroup.add(obj);
                  objLoadedCount++;
                  updateLoadingInfo(`正在加载 OBJ 文件: ${objLoadedCount}/${objTotalCount}`);

                  // 调试：输出第一个模型的位置
                  if (objLoadedCount === 1 && obj.children.length > 0) {
                    const firstChild = obj.children[0];
                    if (firstChild.position) {
                      console.log('第一个 OBJ 模型位置:', firstChild.position);
                    }
                  }
                } catch (error) {
                  console.warn(`加载 OBJ 文件失败: ${fullPath}`, error);
                }
              }));

              // 批次之间稍作延迟
              if (i + concurrency < objPaths.length) {
                await new Promise(resolve => setTimeout(resolve, 100));
              }
            }
            console.log(`OBJ 文件加载完成: ${objLoadedCount}/${objTotalCount}`);
          } catch (error) {
            console.error('读取 OBJ input.txt 失败:', error);
          }
        }

        // ========== 6. 加载 3D Tiles ==========
        let tilesRenderer = null;
        let tilesGroup = null; // 用于存储实际的 3D Tiles 组

        async function load3DTiles() {
          try {
            // 使用本地 tileset.json 路径
            tilesRenderer = new TilesRenderer('./assets/objs-3dtiles/3dtiles/tileset.json');
            // tilesRenderer = new TilesRenderer('https://data1.mars3d.cn/3dtiles/qx-dyt/tileset.json');
            // tilesRenderer = new TilesRenderer('./assets/PC01JZ0001/tileset.json');

            // tilesRenderer.setLatLonToYUp(36.266494 * THREE.MathUtils.DEG2RAD, 120.460205 * THREE.MathUtils.DEG2RAD); // Tokyo Tower

            // 设置相机和渲染器
            tilesRenderer.setCamera(camera);
            tilesRenderer.setResolutionFromRenderer(camera, renderer);




            // const dracoLoader = new DRACOLoader();
            // dracoLoader.setDecoderPath('https://unpkg.com/three@0.181.0/examples/jsm/libs/draco/gltf/');

            // const loader = new GLTFLoader(tilesRenderer.manager);
            // loader.setDRACOLoader(dracoLoader);

            // tilesRenderer.manager.addHandler(/\.gltf$/, loader);




            // 监听加载完成事件
            tilesRenderer.addEventListener('load-tile-set', () => {
              console.log('3D Tiles 加载完成');

              // 确保 group 已添加到场景
              if (tilesRenderer.group && !scene.children.includes(tilesRenderer.group)) {
                tilesGroup = tilesRenderer.group;
                scene.add(tilesGroup);
                tilesGroup.visible = true;
                tilesGroup.userData.is3DTiles = true;
                console.log('3D Tiles group 在加载完成后添加到场景');
              }

              // 更新 group 信息
              if (tilesGroup) {
                tilesGroup.updateMatrixWorld(true);
                console.log('3D Tiles group 信息:', {
                  children: tilesGroup.children.length,
                  visible: tilesGroup.visible,
                  position: tilesGroup.position
                });
              }

              updateLoadingInfo('3D Tiles 已加载');
            });

            // 监听错误事件
            tilesRenderer.addEventListener('load-tile-error', (event) => {
              console.warn('3D Tiles 加载错误:', event);
            });

            // 监听瓦片加载事件
            tilesRenderer.addEventListener('load-tile', (event) => {
              console.log('3D Tiles 瓦片加载:', event);
            });

          } catch (error) {
            console.error('加载 3D Tiles 失败:', error);
          }
        }

        // ========== 7. 更新加载信息 ==========
        const infoDiv = document.getElementById('info');
        const loadingDiv = document.getElementById('loading');

        function updateLoadingInfo(text) {
          infoDiv.textContent = text;
        }

        // ========== 8. 图层控制 UI ==========
        const gui = new GUI();
        const layerControls = {
          showGLB: true,
          showOBJ: true,
          show3DTiles: true,
          resetCamera: function () {
            fitCameraToScene();
          }
        };

        // 调整相机到指定组的函数
        function fitCameraToGroup(group, groupName) {
          if (!group) {
            console.warn(`${groupName} 组不存在`);
            return;
          }

          // 对于 3D Tiles，确保使用正确的 group
          if (groupName === '3D Tiles') {
            const actualGroup = tilesGroup || (tilesRenderer && tilesRenderer.group);
            if (actualGroup && actualGroup !== group) {
              group = actualGroup;
              console.log('使用实际的 3D Tiles group');
            }
          }

          group.updateMatrixWorld(true);

          // 检查是否有子对象
          const hasChildren = group.children.length > 0;
          console.log(`${groupName} 组信息:`, {
            children: group.children.length,
            visible: group.visible,
            hasChildren: hasChildren
          });

          const box = new THREE.Box3();
          box.setFromObject(group);

          if (!box.isEmpty()) {
            const center = box.getCenter(new THREE.Vector3());
            const size = box.getSize(new THREE.Vector3());
            const maxDim = Math.max(size.x, size.y, size.z);

            // 如果尺寸为0或很小，使用默认距离
            const distance = maxDim > 0.1 ? maxDim * 1.5 : 100;

            camera.position.set(
              center.x + distance * 0.7,
              center.y + distance * 0.8,
              center.z + distance * 0.7
            );

            camera.lookAt(center);
            controls.target.copy(center);
            controls.update();

            console.log(`${groupName} 相机已调整到:`, center, '距离:', distance, '尺寸:', size);
          } else {
            console.warn(`${groupName} 边界框为空，使用默认位置`);
            // 如果边界框为空，尝试使用 tilesRenderer 的根位置
            if (groupName === '3D Tiles' && tilesRenderer && tilesRenderer.group) {
              const group = tilesRenderer.group;
              if (group.position) {
                const pos = group.position;
                camera.position.set(pos.x + 100, pos.y + 100, pos.z + 100);
                camera.lookAt(pos);
                controls.target.copy(pos);
                controls.update();
                console.log('使用 3D Tiles group 位置:', pos);
              }
            }
          }
        }

        gui.add(layerControls, 'showGLB').name('显示 GLB/GLTF').onChange((value) => {
          glbGroup.visible = value;
          console.log('GLB 可见性:', value, '子对象数量:', glbGroup.children.length);

          // 如果显示，调整相机到 GLB 组
          if (value) {
            setTimeout(() => {
              fitCameraToGroup(glbGroup, 'GLB');
            }, 100);
          }
        });

        gui.add(layerControls, 'showOBJ').name('显示 OBJ').onChange((value) => {
          objGroup.visible = value;
          console.log('OBJ 可见性:', value, '子对象数量:', objGroup.children.length);

          // 如果显示，调整相机到 OBJ 组
          if (value) {
            setTimeout(() => {
              fitCameraToGroup(objGroup, 'OBJ');
            }, 100);
          }
        });

        let tilesPositionUpdateInterval = null;
        const box = new THREE.Box3();

        // 更新 3D Tiles 位置的函数
        function updateTilesPosition() {
          if (!tilesRenderer || !tilesRenderer.group) {
            return;
          }

          // 获取 3D Tiles 的边界框
          if (tilesRenderer.getBounds && tilesRenderer.getBounds(box)) {
            // 获取边界框的中心并设置到 group 的位置
            const center = new THREE.Vector3();
            box.getCenter(center);

            // 将 group 的位置调整到包围盒的合适位置
            tilesRenderer.group.position.copy(center).multiplyScalar(-1);

            // 确保更新场景中的对象矩阵
            scene.updateMatrixWorld(true);
            camera.updateMatrixWorld();
          }
        }

        gui.add(layerControls, 'show3DTiles').name('显示 3D Tiles').onChange((value) => {
          // 优先使用 tilesGroup，如果没有则从 tilesRenderer 获取
          const group = tilesGroup || (tilesRenderer && tilesRenderer.group);

          if (group) {
            group.visible = value;
            console.log('3D Tiles 可见性:', value, '子对象数量:', group.children.length);

            // 如果显示，调整相机到 3D Tiles 并更新位置
            if (value) {
              // // 清除之前的定时器（如果存在）
              // if (tilesPositionUpdateInterval) {
              //   clearInterval(tilesPositionUpdateInterval);
              //   tilesPositionUpdateInterval = null;
              // }

              // // 立即更新一次位置
              // updateTilesPosition();

              // // 设置定时器，只在显示时更新位置
              // tilesPositionUpdateInterval = setInterval(() => {
              //   const currentGroup = tilesGroup || (tilesRenderer && tilesRenderer.group);
              //   if (currentGroup && currentGroup.visible && tilesRenderer) {
              //     updateTilesPosition();
              //     tilesRenderer.update();
              //   } else {
              //     // 如果不可见，清除定时器
              //     if (tilesPositionUpdateInterval) {
              //       clearInterval(tilesPositionUpdateInterval);
              //       tilesPositionUpdateInterval = null;
              //     }
              //   }
              // }, 100); // 每隔 100 毫秒检查一次

              // 使用边界球调整相机到 3D Tiles
              setTimeout(() => {
                if (tilesRenderer && tilesRenderer.getBoundingSphere) {
                  const sphere = new THREE.Sphere();
                  if (tilesRenderer.getBoundingSphere(sphere)) {
                    // 调整相机位置到合适的观察距离
                    const distance = sphere.radius * 2.5;
                    camera.position.set(
                      sphere.center.x + distance,
                      sphere.center.y + distance,
                      sphere.center.z + distance
                    );

                    
                    camera.lookAt(sphere.center);

                    // 更新控制器目标到模型中心
                    controls.target.copy(sphere.center);
                    controls.update();

                    console.log('相机已调整到 3D Tiles，中心:', sphere.center, '距离:', distance);
                  } else {
                    // 如果获取边界球失败，使用原来的方法
                    fitCameraToGroup(group, '3D Tiles');
                  }
                } else {
                  // 如果没有 getBoundingSphere 方法，使用原来的方法
                  fitCameraToGroup(group, '3D Tiles');
                }
              }, 300); // 增加延迟，确保瓦片已加载
            } else {
              // 如果隐藏，清除定时器
              if (tilesPositionUpdateInterval) {
                clearInterval(tilesPositionUpdateInterval);
                tilesPositionUpdateInterval = null;
              }
            }
          } else {
            console.warn('3D Tiles 未加载或 group 不存在');
            console.log('tilesRenderer:', tilesRenderer);
            console.log('tilesGroup:', tilesGroup);
            if (tilesRenderer) {
              console.log('tilesRenderer.group:', tilesRenderer.group);
            }
          }
        });









        gui.add(layerControls, 'resetCamera').name('重置相机位置');

        // ========== 9. 计算场景边界并调整相机 ==========
        function fitCameraToScene() {
          // 强制更新所有对象的矩阵
          scene.updateMatrixWorld(true);

          const box = new THREE.Box3();

          // 分别计算每个组的边界（只计算可见的组）
          const glbBox = new THREE.Box3();
          const objBox = new THREE.Box3();
          const tilesBox = new THREE.Box3();

          if (glbGroup.children.length > 0 && glbGroup.visible) {
            glbGroup.updateMatrixWorld(true);
            glbBox.setFromObject(glbGroup);
            console.log('GLB 边界:', glbBox);
          }

          if (objGroup.children.length > 0 && objGroup.visible) {
            objGroup.updateMatrixWorld(true);
            objBox.setFromObject(objGroup);
            console.log('OBJ 边界:', objBox);
          }

          // 3D Tiles 现在直接添加到场景
          const tilesGroupForBounds = tilesGroup || (tilesRenderer && tilesRenderer.group);
          if (tilesGroupForBounds && tilesGroupForBounds.visible) {
            tilesGroupForBounds.updateMatrixWorld(true);
            tilesBox.setFromObject(tilesGroupForBounds);
            console.log('3D Tiles 边界:', tilesBox);
          }

          // 合并所有可见组的边界框
          if (!glbBox.isEmpty()) box.union(glbBox);
          if (!objBox.isEmpty()) box.union(objBox);
          if (!tilesBox.isEmpty()) box.union(tilesBox);

          // 如果边界框无效，使用默认值
          if (!box.isEmpty()) {
            const center = box.getCenter(new THREE.Vector3());
            const size = box.getSize(new THREE.Vector3());
            const maxDim = Math.max(size.x, size.y, size.z);

            console.log('场景中心:', center);
            console.log('场景尺寸:', size);
            console.log('最大维度:', maxDim);

            // 计算合适的相机距离
            const distance = maxDim * 1.5; // 距离为最大维度的1.5倍

            // 设置相机位置，从上方和侧面观察
            camera.position.set(
              center.x + distance * 0.7,
              center.y + distance * 0.8,
              center.z + distance * 0.7
            );

            camera.lookAt(center);
            controls.target.copy(center);
            controls.update();

            console.log('相机位置:', camera.position);
            console.log('相机目标:', controls.target);
          } else {
            // 如果边界框为空，使用默认位置
            console.warn('场景边界框为空，使用默认相机位置');
            camera.position.set(0, 100, 200);
            camera.lookAt(0, 0, 0);
            controls.target.set(0, 0, 0);
            controls.update();
          }
        }

        // ========== 10. 开始加载所有模型 ==========
        async function loadAllModels() {
          loadingDiv.style.display = 'block';
          loadingDiv.textContent = '开始加载模型...';

          await Promise.all([
            loadGLBFiles(),
            loadOBJFiles(),
            load3DTiles()
          ]);

          loadingDiv.style.display = 'none';
          updateLoadingInfo(`加载完成 - GLB: ${glbLoadedCount}, OBJ: ${objLoadedCount}, 3D Tiles: ${tilesRenderer ? '已加载' : '未加载'}`);

          // 输出调试信息
          console.log('=== 加载统计 ===');
          console.log('GLB 组子对象数量:', glbGroup.children.length);
          console.log('OBJ 组子对象数量:', objGroup.children.length);
          console.log('3D Tiles group:', tilesRenderer && tilesRenderer.group ? '已加载' : '未加载');
          console.log('场景总子对象数量:', scene.children.length);

          // 延迟一下再调整相机，确保所有模型都已添加到场景
          setTimeout(() => {
            fitCameraToScene();
          }, 2000); // 增加到2秒，确保3D Tiles也有时间加载
        }

        loadAllModels();

        // ========== 11. 动画循环 ==========
        function animate() {
          requestAnimationFrame(animate);
          controls.update();
          camera.updateMatrixWorld();

          if (tilesRenderer) {
            tilesRenderer.update();
          }

          renderer.render(scene, camera);
        }
        animate();

        // ========== 12. 窗口大小调整 ==========
        window.addEventListener('resize', () => {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(window.innerWidth, window.innerHeight);
          if (tilesRenderer) {
            tilesRenderer.setResolutionFromRenderer(camera, renderer);
          }
        });

      } catch (error) {
        console.error('❌ 模块导入错误:', error);
        console.error('错误详情:', error.message);
        document.getElementById('loading').textContent = '加载失败: ' + error.message;
      }
    })();




  </script>

</body>

</html>

fxshy
关注
基于vue3+threejs实现三维数字孪生可视化系统
jnfy的博客
09-04 2951
Three.js是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。本文需要对 threejs 的一些基本概念和 api 有一定了解。如果对 threejs 这部分还不了解的可以看下官方文档和一些中文文档进行学习。官方文档地址：threejs.org/中文文档地址：www.webgl3d.cn/pages/aac9a…项目，包含了一些常用的功能，
3DTiles 1.0 数据规范详解[1] 介绍
【CSDN】
08-15 746
我觉得你还是云里雾里的，下一节将展示3dTiles具体数据，说说3dTiles的组织结构，说说3dTiles中的"Tile"，也就是“三维瓦片数据”中的“瓦片”是什么。随着学科的融合、计算机技术和硬件的更新换代，使得有模型、有细节的真三维融入到GIS中成为了可能，或者说，计算机技术和硬件的升级，给GIS以更广阔的视角观察世界。它不再使用面向对象的思维存储三维模型、贴图纹理，而是按显卡的思维存储，存的是顶点、法线、顶点颜色等最基础的信息，只不过组织结构上进行了精心的设计。...
Three.js 快速入门教程【十二】外部模型加载（ gltf、glb、fbx、obj等格式模型）
前端领域技术分享
02-28 1847
在使用 Three.js 进行 3D 场景开发时，加载外部模型是一项非常常见且重要的操作。通过加载外部模型，我们可以快速丰富场景内容，实现更加复杂和逼真的 3D 效果。本教程将详细介绍如何在 Three.js 中加载常见的 3D 模型格式。通过本篇教程，我们了解了加载外部模型的基本流程以及学会不同格式模型文件的加载方法。模型加载是3D可视化开发的基础技能，但也仅仅是起点，还有诸如模型动画、物理效果和着色器改造更多开发技能等着你学习，在实践中掌握技巧，让你的3D场景更具生命力。
three.js加载3d模型_Web 3D 模型可视化方案
weixin_39627201的博客
11-28 1883
一、一般流程：1.3dtiles=gltf+lod(gltf2.0)2. 3dmodel转3dtiles(转换工具objto3d-tiles)格式转换 obj转b3dm, i3dm, gltf瓦片生成 bdm、 i3dm 格式生成(只有cesium支持)备注：gltf格式介绍见地址https://cloud.tencent.com/developer/news/204942。简单讲就...
glTF /glb文件深度指南：揭示 3D 可视化的核心
weixin_42070282的博客
07-02 922
未来的路线图设想了潜在的发展，例如 COLLADA 到 glTF 转换器、对 Unreal、Autodesk 和 Blender 的扩展支持，以及 Unity 的专用导出器。这种持续的演变还旨在通过增强的支持工具、简化的一致性测试流程、JSON 架构、丰富的支持材料以及对现有规范的增强来完善生态系统。glTF 格式的受欢迎程度得益于其对增强现实 （AR） 和虚拟现实 （VR） 应用程序的能力、高效的运动和动画支持、紧凑的文件大小和快速的加载时间。这种广泛的认可标志着该格式在不同领域的相关性、采用和影响。
Three.js 播放glb,fbx,gltf,obj 模型文件自带动画
ZHANG_666
07-17 2671
three.js如何播放模型自带的动画，和模型动画相关参数的配置
六、Three.js加载外部三维模型(gltf)
Seven_Ting的博客
02-24 2182
通过gltf加载完成，模型后，你还需要根据自身需要，设置合适的相机参数，就好比你拍照，你想拍摄一个石头，肯定要把相机对着石头，如果希望石头在照片上占比大，就要离石头近一些。如果你想看到工厂的全貌，你可以理解为你坐着无人机向下俯瞰，简单说，相比人漫游工厂，整体预览工厂相机距离工厂距离更远一些，否则你也看不到全貌，当然过于远了，你就看不清工厂了。相机位置怎么设置，你就类比你的眼睛，如果你想模拟人在3D场景中漫游，那么很简单，你把相机放在地面上，距离地面高度和人身高接近即可。
obj文件转gltf,glb文件
m0_37845115的博客
12-09 1130
obj文件转gltf,glb文件，操作记录
WEB端三维可视化（threejs）03
hcdu
12-28 4393
前言 上一篇主要写了如何创建一个场景，本篇写一下模型加载方面的细节。 目前threejs支持的模型格式有很多，gltf/glb、obj+mtl、fbx、dea等等… 主要推荐的模型格式：obj+mtl 或者 gltf/glb。 原因： obj+mtl这种格式将模型信息、材质信息、贴图拆分开，相比较于其他来说，文件分散，分散后文件体积小，唯一的缺点是，文件套多了，注意命名，小心弄乱。 gltf呢，被称为模型界的JPEG，它可以在原有的基础上有损压缩（这部分放在后边），压缩后体积更小。 个人做了一下比较：同一个
精选资源
化工园区三维模型gltf、obj、3dmax格式资源，threejs对gltf加载只需要2秒
12-31
这些模型能够帮助设计者、工程师以及管理人员可视化化工设施，进行规划、模拟操作和安全评估。本资源包提供了多种格式的化工园区三维模型，包括gltf、obj和3dmax，这些都是广泛使用的3D模型格式。特别是，它强调了...
精选资源
自动批量压缩目录下模型文件-obj2gltf
04-06
"obj2gltf"工具就是这样一个解决方案，它能够帮助我们批量将OBJ模型转换为gltf或glb格式，这两个格式都是Three.js库所支持的轻量级3D模型格式。 标题中的“自动批量压缩目录下模型文件-obj2gltf”表明这个工具或...
webgl+three.js+glft及glb模型下载
11-21
与常见的3D模型格式如FBX或OBJ相比，gltf文件格式支持与JSON的结合，使得模型数据的加载和解析更加高效和方便。这种格式广泛地被游戏引擎、图形软件和3D可视化工具所支持。 glb格式是gltf格式的二进制版本，旨在...
ThreejsVueElementPlus构建的3D模型可视化编辑平台_支持glb_obj_gltf_fbx_stl格式模型导入_提供背景动画属性灯光材质后期处理等全方位可视.zip
08-20
在当前的数字时代，3D模型可视化编辑平台已成为设计师、工程师、以及艺术家们工作中不可或缺的一部分。它们不仅提升了工作效率，还极大地丰富了创意的表达方式。本文将探讨一个使用ThreejsVueElementPlus技术栈构建...
3D工业相机提升晶圆承载部件工艺质量
PHOSKEY的博客
12-17 294
GL-8000系列3D线激光轮廓测量仪，以其在微米级精度、每秒数万线的高速扫描、海量点云数据采集及复杂表面适应能力等方面的综合性能，为解决晶圆承载部件在平面度、平行度及综合尺寸精度方面的管控难题提供了有效的技术方案。
图生3d 人脸 算法笔记 2025
jacke121的专栏
12-14 836
图生3d 人脸 算法笔记 2025
用【vtk3DLinearGridCrinkleExtractor】快速提取3D网格相交面
最新发布
dengbiwei的博客
12-18 650
摘要：vtk3DLinearGridCrinkleExtractor是VTK中针对3D线性网格优化的专用切割工具，可快速提取网格与切割面的交线/交面。相比通用工具效率提升2倍以上，适用于地质建模、工程仿真、医学可视化等场景。关键参数包括切割面设置、数据复制选项、精简数据开关等。使用时需注意仅支持线性单元格、多线程依赖编译设置等限制。该工具通过专注特定需求，在3D网格切割任务中展现出显著性能优势。
WebGIS开发核心库深度解析：从2D到3D的全栈选择
刘一说的IT专栏
12-15 1159
本文对比了五大主流WebGIS开发库：OpenLayers（开源全能2D/3D）、Leaflet（轻量移动端）、Mapbox GL JS（WebGL矢量地图）、Cesium（3D地理可视化）和ArcGIS API（企业级GIS）。从技术特性、适用场景和优缺点进行分析，为开发者提供选型参考：OpenLayers适合复杂2D分析，Leaflet适合轻量应用，Mapbox GL JS适合高定制化矢量地图，Cesium专注3D可视化，ArcGIS API提供企业级解决方案。建议根据项目需求（2D/3D、性能、生态等
论文Review 3DGS综述 | 浙江大学 | A Survey on 3D Gaussian Splatting |（二）发展、应用与结论
weixin_42148238的博客
12-15 732
三维高斯泼溅( GS )已成为辐射领域的一种变革性技术。与主流的隐式神经模型不同，3D GS使用数百万个可学习的3D高斯进行显式场景表示。结合可微分渲染算法，该方法实现了实时渲染和前所未有的可编辑性，使其成为三维重建和表示的潜在游戏规则改变者。在本文中，我们首次系统地综述了3D GS的最新进展和重要贡献。我们首先详细探究了3D GS产生的潜在原理和背后的驱动力，为理解其意义做了铺垫。我们讨论的一个重点是3D GS的实际应用性。 通过实现前所未有的渲染速度，3D GS开辟了大量的应用，从虚拟现实到交互式媒体等
即插即用系列 | MICCAI EM-Net：融合 Mamba 与频域学习的高效 3D 医学图像分割网络
分享顶会顶刊论文即插即用模块
12-14 698
本文提出了一种名为 **EM-Net** 的新型 3D 医学图像分割框架，旨在解决传统 CNN 感受野受限和 Transformer 计算开销过大的问题。核心思路是将 **Mamba (状态空间模型)** 引入分割任务，并设计了两个关键模块：CSRM 模块（通道挤压-增强 Mamba）通过通道选择机制来捕捉区域间的注意力交互；EFL 层（高效频域学习）利用 FFT 在频域中协调多尺度特征的学习。EM-Net 在保持 SOTA 分割精度的同时，将参数量减少了近一半，并将训练速度提升了 2 倍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值