Threebox Mapbox:我编辑过的每一个模型最终都变成了天空中的一个巨大的球
Threebox Mapbox:我编辑过的每一个模型最终都变成了天空中的一个巨大的球
提问于 2021-03-24 23:52:25
当我将truck.glb作为带有threebox的自定义图层添加到mapbox地图中时，一切都很正常。示例中的所有模型都很好。我用three.js编辑器或nunustudio.org编辑的每个模型都被渲染成一个巨大的灰色球，在离地面几百公里的太空中。
使用相同的代码：
// model
var options = {
type: 'gltf',
obj: 'models/truck.glb',
scale: 100,
units: 'meters',
anchor: "bottom",
rotation: { x: 90, y: 90, z: 0 }, //rotation to postiion the truck and heading properly
}
tb.loadObj(options, function (model) {
truck = model.setCoords(origin_truck);
truck.set({ rotation: { x: 0, y: 0, z: 7200 }, duration: 200000 })
tb.add(truck);
})threebox示例中的模型如预期显示，但导出为.glb或.gltf的其他所有模型看起来都像是非常糟糕的科幻电影续集的悬念：
从三个编辑器导出时，我做错了什么？
Thx给出提示
请在以下位置查找模型
Proproolt.ch/test.glb
在编辑器中渲染完美，但在三个框中有一个大的黑色大理石。感谢您的支持。
回答 1
Stack Overflow用户
发布于 2021-04-30 17:32:41
你的问题与Threebox或Threebox无关...我下载了，你的模型只是一个球体。使用3D查看器打开：
使用triejs.org/editor打开
问题是，你已经在模型周围创建了一个巨大的球体，显然是为了创建天空，如果你想创建一个投射和反射灯光的环境，这是不必要的，也不是这种方式。
如果您只是隐藏或删除mesh_0，您的模型将显示在任何工具中。
也是在Threebox中
这是相关的代码(我添加了一个工具提示，真实的阳光和阴影)：
mapboxgl.accessToken = 'PASTE YOUR TOKEN HERE!';
var map = (window.map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v9',
zoom: 18,
center: [-4.0094,41.4104],
pitch: 60,
antialias: true
}));
window.tb = new Threebox(
map,
map.getCanvas().getContext('webgl'),
{
realSunlight: true,
enableSelectingObjects: true,
enableTooltips: true
}
);
let modelOrigin = [-4.0094, 41.4104];
function createCustomLayer(layerName, origin) {
let model;
//create the layer
let customLayer3D = {
id: layerName,
type: 'custom',
renderingMode: '3d',
onAdd: function (map, gl) {
let options = {
type: 'gltf',
obj: './test.glb', //model url
units: 'meters',
scale: 10,
rotation: { x: 90, y: 180, z: 0 },
anchor: 'center'
}
tb.loadObj(options, function (model) {
model.setCoords(origin);
model.addTooltip("A logo in the middle of nowhere", true);
tb.add(model);
model.castShadow = true;
tb.lights.dirLight.target = model;
});
},
render: function (gl, matrix) {
tb.update();
}
};
return customLayer3D;
};
map.on('style.load', function () {
map.addLayer(createCustomLayer('3d-model', modelOrigin));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66784734
复制相关文章
相似问题
腾讯云开发者
