企业官网建设流程全解析

农产品网站建设结构,关键词app,公司企业网站设计尺寸,网站前面的logo标志在三维场景中加载模型是最常见的需求之一。虽然可以直接使用 Three.js 的 GLTFLoader#xff0c;但在不同投影方式下需要手动处理坐标转换#xff0c;比较麻烦。今天就来学习 mapvthree 提供的 SimpleModel 类#xff0c;看看它是如何简化这个过程的。了解 SimpleModel Simp…在三维场景中加载模型是最常见的需求之一。虽然可以直接使用 Three.js 的 GLTFLoader但在不同投影方式下需要手动处理坐标转换比较麻烦。今天就来学习 mapvthree 提供的 SimpleModel 类看看它是如何简化这个过程的。了解 SimpleModelSimpleModel 是 mapvthree 对 Three.js 模型加载的封装主要解决了以下问题原生 Three.js 加载方式的问题如果直接使用 Three.js 的 GLTFLoader 加载模型/* by 01022.hk - online tools website : 01022.hk/zh/pagecode.html */ import * as THREE from three; import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader; const loader new GLTFLoader(); loader.load(assets/models/tree/tree18.glb, gltf { const model gltf.scene; model.position.set(x, y, z); model.rotateX(Math.PI / 2); model.scale.setScalar(10); engine.add(model); });问题这种方式只适用于平面投影EPSG:3857在 ECEF 等其他投影上需要额外进行投影旋转非常麻烦。SimpleModel 的优势SimpleModel 是对 Three.js 的封装具有以下优势自动投影转换自动根据当前投影进行坐标旋转无需手动处理简化接口统一的配置参数更易使用多种加载方式支持从 URL 加载也支持传入已有的 Object3D 实例格式兼容支持所有 Three.js 支持的模型格式glb、gltf 等坐标系转换自动处理 Y-Up 到 Z-Up 的坐标系转换事件监听提供加载完成事件方便后续处理我的理解SimpleModel 本质上是对 Three.js 的 GLTFLoader 和 Object3D 的封装让我们不需要关心底层的投影转换细节专注于业务逻辑。第一步基本使用 - 从 URL 加载模型最简单的方式是从 URL 加载模型文件。基本示例/* by 01022.hk - online tools website : 01022.hk/zh/pagecode.html */ import * as mapvthree from baidumap/mapv-three; const container document.getElementById(container); const engine new mapvthree.Engine(container, { map: { center: [120.628, 27.786, 0], range: 1000, pitch: 80, projection: EPSG:3857, provider: null, }, }); // 加载单体模型 const model engine.add(new mapvthree.SimpleModel({ name: 树木模型, object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], scale: [10, 10, 10], rotation: [Math.PI / 2, 0, 0], }));我的发现只需要提供模型路径和位置引擎会自动处理加载和投影转换。我的理解object参数模型文件的 URL 路径支持 glb/gltf 格式以及所有 Three.js 支持的格式point参数模型在地图上的位置格式为[经度, 纬度, 高度]scale参数模型缩放比例格式为[x缩放, y缩放, z缩放]rotation参数模型旋转角度格式为[roll, pitch, heading]单位为弧度第二步设置模型位置模型位置使用地理坐标[经度, 纬度, 高度]来表示。构造时设置位置const model engine.add(new mapvthree.SimpleModel({ object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], // 经度、纬度、高度 }));动态修改位置// 通过 point 属性修改 model.point [120.629, 27.787, 50]; // 或通过 setTransform 方法 model.setTransform({ point: [120.629, 27.787, 50], });我的发现可以随时动态修改模型位置引擎会自动更新模型的实际坐标。我的理解高度z 值是相对于地面的高度引擎会自动将地理坐标转换为场景坐标不同投影方式下的转换逻辑由引擎自动处理第三步设置模型旋转和缩放模型的旋转和缩放也非常简单。设置旋转const model engine.add(new mapvthree.SimpleModel({ object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], rotation: [Math.PI / 2, 0, 0], // [roll, pitch, heading] })); // 动态修改旋转 model.setTransform({ rotation: [0, Math.PI / 4, Math.PI / 2], });我的理解rotation[0]roll绕 x 轴旋转rotation[1]pitch绕 y 轴旋转rotation[2]heading绕 z 轴旋转单位是弧度不是角度角度需要转换角度 * Math.PI / 180设置缩放const model engine.add(new mapvthree.SimpleModel({ object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], scale: [10, 10, 10], // [x缩放, y缩放, z缩放] })); // 动态修改缩放 model.setTransform({ scale: [20, 20, 20], });我的发现可以对 x、y、z 三个方向分别设置缩放比例实现非均匀缩放。使用 Three.js 的 Vector3import * as THREE from three; // 也可以使用 Three.js 的 Vector3 model.setTransform({ point: new THREE.Vector3(120.628, 27.786, 50), scale: new THREE.Vector3(15, 15, 15), rotation: new THREE.Vector3(Math.PI / 2, 0, 0), });我的理解SimpleModel 兼容数组和 Vector3 两种格式可以根据习惯选择。第四步监听加载完成事件模型加载是异步的可以通过事件监听器获取加载完成的通知。监听 loaded 事件const model engine.add(new mapvthree.SimpleModel({ object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], })); // 监听模型加载完成事件 model.addEventListener(loaded, e { console.log(模型加载完成:, e.value); // 在加载完成后可以进行后续操作 // 例如添加动画、修改材质等 });我的发现在loaded事件中可以通过e.value获取加载的模型对象进行进一步的自定义操作。我的理解如果需要在加载完成后进行操作如修改材质、添加动画一定要使用loaded事件不要在构造函数返回后立即操作模型因为此时模型可能还没加载完成第五步动态更新模型变换使用setTransform方法可以灵活地更新模型的位置、旋转和缩放。只更新部分参数// 只更新位置 model.setTransform({ point: [120.629, 27.787, 50], }); // 只更新旋转 model.setTransform({ rotation: [0, Math.PI / 4, 0], }); // 只更新缩放 model.setTransform({ scale: [15, 15, 15], });我的发现setTransform方法的参数都是可选的可以只更新需要修改的参数。同时更新多个参数// 同时更新位置、旋转和缩放 model.setTransform({ point: [120.629, 27.787, 50], rotation: [Math.PI / 2, Math.PI / 4, 0], scale: [20, 20, 20], });我的理解setTransform是更新模型变换的推荐方式比直接修改position、rotation、scale属性更安全。第六步理解 autoYUpToZUp 参数很多三维模型如从建模软件导出的模型使用 Y 轴向上的坐标系而地理场景通常使用 Z 轴向上。autoYUpToZUp 的作用const model engine.add(new mapvthree.SimpleModel({ object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], autoYUpToZUp: true, // 默认为 true }));我的理解autoYUpToZUp true默认自动将 Y-Up 坐标系转换为 Z-Up模型会自动旋转 90 度autoYUpToZUp false不进行坐标系转换保持模型原始方向这个参数仅对通过 URL 加载的模型有效对直接传入的 Object3D 实例无效什么时候需要关闭// 如果模型本身就是 Z-Up或者已经做了正确的旋转 const model engine.add(new mapvthree.SimpleModel({ object: assets/models/building.glb, point: [120.628, 27.786, 0], autoYUpToZUp: false, // 不需要自动转换 }));我的发现如果发现加载的模型方向不对如倒着的、躺着的可能是autoYUpToZUp的设置问题。第七步直接传入 Object3D 实例除了从 URL 加载还可以直接传入已经加载好的 Three.js Object3D 实例。传入已有的 Object3Dimport * as THREE from three; import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader; // 先用 Three.js 原生方式加载 const loader new GLTFLoader(); loader.load(assets/models/tree/tree18.glb, gltf { const mesh gltf.scene; // 将加载好的模型传给 SimpleModel const model engine.add(new mapvthree.SimpleModel({ name: 树木模型, object: mesh, // 传入 Object3D 实例 point: [120.628, 27.786, 0], scale: [10, 10, 10], })); });我的理解这种方式适合需要对模型进行预处理的场景例如修改材质、合并多个模型、自定义加载逻辑等传入 Object3D 时autoYUpToZUp参数不生效传入自定义创建的 Meshimport * as THREE from three; // 创建一个自定义的立方体 const geometry new THREE.BoxGeometry(10, 10, 10); const material new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube new THREE.Mesh(geometry, material); // 将自定义 Mesh 传给 SimpleModel const model engine.add(new mapvthree.SimpleModel({ name: 立方体, object: cube, point: [120.628, 27.786, 0], }));我的发现可以传入任何 Three.js 的 Object3D 对象不仅限于从文件加载的模型。我的理解这展示了 SimpleModel 的灵活性它本质上是一个位置和变换管理器可以管理任何 Three.js 对象。第八步完整示例我想写一个完整的示例把学到的都用上import * as mapvthree from baidumap/mapv-three; import * as THREE from three; const container document.getElementById(container); const engine new mapvthree.Engine(container, { map: { center: [120.628, 27.786, 0], range: 1000, pitch: 80, projection: EPSG:3857, provider: null, }, rendering: { enableAnimationLoop: true, }, }); // 加载单体模型 const model engine.add(new mapvthree.SimpleModel({ name: 树木模型, object: assets/models/tree/tree18.glb, point: [120.628, 27.786, 0], scale: [10, 10, 10], rotation: [Math.PI / 2, 0, 0], autoYUpToZUp: true, // 自动坐标系转换 })); // 监听加载完成事件 model.addEventListener(loaded, e { console.log(模型加载完成:, e.value); // 可以在这里进行后续操作 // 例如修改材质、添加动画等 }); // 动态更新模型位置例如5秒后移动模型 setTimeout(() { model.setTransform({ point: [120.629, 27.787, 50], rotation: [Math.PI / 2, Math.PI / 4, 0], scale: [15, 15, 15], }); }, 5000);我的感受掌握了 SimpleModel加载单体模型变得非常简单不需要关心投影转换的细节第九步踩过的坑作为一个初学者我踩了不少坑记录下来避免再犯坑 1模型不显示原因模型路径错误或者模型文件格式不支持。解决检查模型文件路径是否正确确认模型文件格式是否为 glb/gltf或其他 Three.js 支持的格式打开浏览器控制台查看是否有加载错误检查模型位置是否在视野范围内坑 2模型方向不对原因坐标系转换问题或者旋转设置不正确。解决尝试修改autoYUpToZUp参数true/false调整rotation参数尝试不同的旋转角度在建模软件中检查模型的坐标系和方向坑 3模型太大或太小原因模型原始尺寸与场景比例不匹配。解决调整scale参数尝试不同的缩放比例如果模型太小看不见尝试放大 10 倍、100 倍如果模型太大尝试缩小到 0.1、0.01坑 4动态修改不生效原因在模型加载完成前就进行了修改操作。解决使用loaded事件确保在模型加载完成后再操作使用setTransform方法而不是直接修改属性检查是否启用了enableAnimationLoop某些操作需要渲染循环坑 5不同投影下模型位置不对原因没有正确理解 SimpleModel 的自动投影转换。解决确认传入的是地理坐标[经度, 纬度, 高度]而不是场景坐标不要手动计算投影转换SimpleModel 会自动处理如果需要场景坐标使用engine.map.projectArrayCoordinate()转换坑 6传入 Object3D 时 autoYUpToZUp 不生效原因autoYUpToZUp只对通过 URL 加载的模型有效。解决如果传入 Object3D 实例需要手动处理坐标系转换或者使用rotation参数手动旋转或者在加载时就处理好坐标系我的学习总结经过这一天的学习我掌握了SimpleModel 的本质对 Three.js 加载方式的封装自动处理投影转换支持的格式所有 Three.js 支持的模型格式glb、gltf 等两种加载方式从 URL 加载或传入 Object3D 实例位置设置使用地理坐标[经度, 纬度, 高度]旋转和缩放使用数组或 Vector3 格式动态更新使用setTransform方法坐标系转换理解autoYUpToZUp的作用事件监听使用loaded事件处理加载完成后的逻辑我的感受SimpleModel 让加载单体模型变得非常简单不需要关心底层的投影转换细节。它本质上是对 Three.js 的封装所以如果熟悉 Three.js上手会非常快下一步计划学习如何加载和管理多个模型学习 LODModel 实现性能优化学习如何给模型添加动画学习笔记就到这里啦作为一个初学者我觉得 SimpleModel 是一个非常实用的工具类它简化了三维模型的加载和管理。关键是要理解它是对 Three.js 的封装支持所有 Three.js 支持的模型格式并能自动处理不同投影方式下的坐标转换。希望我的笔记能帮到其他初学者大家一起加油