高德地图WebJS开发中的GLTF模型的显示问题

博主在高德地图Web端JS开发中,上传的GLTF模型文件无法在地图显示。研究发现模型由多个文件组成,且有转换工具。从不同建模软件导出Obj文件转换后仍无法显示,去掉图片可显示但无贴图。最终发现MagicVoxel导出贴图尺寸问题,修改后可显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

主要问题:我上传的GLTF模型文件无法在地图上显示出来。

高德地图Web端JS开发支持在地图中显示GLTF模型,下面是他提供的例子。
我按顺序讲一下我的理解,麻烦大佬们看看到底是我哪里出错了。

链接:高德地图 glTF 模型

我研究了一下(以前没接触过3D模型之类的东西),发现他的模型其实由三个文件组成 ,以小黄鸭为例:Duck.gltf、Duck0.bin、DuckCM.png

而且它还提供了可以把Obj文件转成GLTF文件的工具(高德地图 gltf模型转换

转换工具的说明里面提到了可以把几何纹理信息文件等一起整合到Gltf文件里,就是说我从建模软件里导出的Obj模型(其实是Obj文件、mtl文件和图片),这三个可以合成一个Gltf文件。
我照着样子从两个建模软件里都导出了两个Obj文件(分别是MagicVoxel和SketchUp),使用模型转换工具转换之后,然而都显示不出来。
如果我把图片文件去掉的话,反而可以显示,只是没有贴图而已。


今天找到了另一个可以转换格式的网页 : glTF格式转换

问题解决了

MagicVoxel这个软件导出的贴图尺寸是256×1的,修改成256×256就可以显示了。

感觉问题出在高德自己地图显示模型的模块里面。
因为从软件里导出的Obj模型可以直接用Win10自带的3D显示器显示,转换之后的glTF文件也可以直接显示,但却在地图里显示不出来。

### 如何在高德地图中使用 Three.js 和 GLTFLoader 加载 GLTF 模型 为了实现在高德地图加载显示GLTF模型,需要结合Three.js的`GltfLoader`以及高德地图API来完成。这涉及到初始化高德地图实例,在地图上创建一个用于承载3D对象的场景,并通过Three.js加载GLTF文件。 #### 初始化高德地图和设置视图参数 首先需引入必要的库文件,包括高德地图JavaScript API、Three.js及其扩展组件如`GltfLoader`等。接着配置地图中心位置及缩放级别: ```javascript // 引入所需的库 import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.147/build/three.module.js'; import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.147/examples/jsm/loaders/GLTFLoader.js'; let map = new AMap.Map('container', { zoom: 18, center: [116.39, 39.9], // 设置地图中心点坐标 }); ``` #### 创建 WebGL 渲染器并与地图关联 为了让Three.js能够绘制到HTML页面上的指定区域,同时让这个区域成为高德地图的一部分,可以通过调整DOM结构使二者融合在一起。这里假设有一个ID为`mapContainer`的容器用来容纳整个组合体: ```html <div id="mapContainer"> <div id="container"></div> </div> <style> #mapContainer{ position:relative; } #container{ width:100%; height:100%; } </style> ``` 然后定义渲染器并将之附加至上述提到的地图容器内: ```javascript const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('mapContainer').appendChild(renderer.domElement); AMap.event.addListener(map, "complete", function() { const containerRect = document.querySelector('#container').getBoundingClientRect(); renderer.setSize(containerRect.width, containerRect.height); }); window.addEventListener('resize', () => { const containerRect = document.querySelector('#container').getBoundingClientRect(); camera.aspect = containerRect.width / containerRect.height; camera.updateProjectionMatrix(); renderer.setSize(containerRect.width, containerRect.height); }, false); ``` #### 使用 `GltfLoader` 加载 GLTF 文件 当准备就绪之后就可以利用`GltfLoader`去异步获取远程服务器上的GLTF资源了。一旦下载完毕,则将其加入到之前构建好的场景之中以便可视化呈现出来: ```javascript var scene = new THREE.Scene(); scene.add(new THREE.AxesHelper(5)); function loadModel(url) { var loader = new GLTFLoader().load( url, (gltf) => { gltf.scene.traverse(function(child){ if (child.isMesh) child.castShadow = true; }); let modelScaleFactor = 1e-2; gltf.scene.scale.set(modelScaleFactor,modelScaleFactor ,modelScaleFactor ); scene.add(gltf.scene); animate(); }, undefined, (error) => console.error(error) ); } loadModel('/path/to/your/model.gltf'); ``` 最后一步是启动动画循环函数`animate()`,该方法会持续更新相机视角并调用渲染器刷新画面帧率,从而确保动态效果得以展现[^1]。 ```javascript var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; function animate(){ requestAnimationFrame(animate); controls && controls.update(); renderer.render(scene,camera); } ```
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值