My issue lies in the inability to load any .gltf file, only a standard one. For further details, please continue reading. The map on my application showcases a 3D model indicated by the red arrow:
https://i.sstatic.net/3Ce09.png
The model is a GLTF file accessible here. The code I am using is provided by Mapbox themselves within their documentation, available here.
Here's how it's implemented:
var modelOrigin = [-8.629134, 41.157902];
var modelAltitude = 0;
var modelRotate = [Math.PI / 2, 0, 0];
var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(modelOrigin,modelAltitude);
var modelTransform = {translateX: modelAsMercatorCoordinate.x,translateY: modelAsMercatorCoordinate.y,translateZ: modelAsMercatorCoordinate.z,rotateX: modelRotate[0],rotateY: modelRotate[1],rotateZ: modelRotate[2],scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()};
var THREE = window.THREE;
var customLayer = {
id: '3d-model',
type: 'custom',
renderingMode: '3d',
onAdd: function (map, gl) {
this.camera = new THREE.Camera();
this.scene = new THREE.Scene();
// create two three.js lights to illuminate the model
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, -70, 100).normalize();
this.scene.add(directionalLight);
var directionalLight2 = new THREE.DirectionalLight(0xffffff);
directionalLight2.position.set(0, 70, 100).normalize();
this.scene.add(directionalLight2);
// utilize the three.js GLTF loader to incorporate the 3D model into the scene
var loader = new THREE.GLTFLoader();
loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',function (gltf) {
this.scene.add(gltf.scene);
}.bind(this));
this.map = map;
this.renderer = new THREE.WebGLRenderer({
canvas: map.getCanvas(),
context: gl,
antialias: true
});
this.renderer.autoClear = false;
},
render: function (gl, matrix) {
var rotationX = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
modelTransform.rotateX
);
var rotationY = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 1, 0),
modelTransform.rotateY
);
var rotationZ = new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(0, 0, 1),
modelTransform.rotateZ
);
var m = new THREE.Matrix4().fromArray(matrix);
var l = new THREE.Matrix4().makeTranslation(
modelTransform.translateX,
modelTransform.translateY,
modelTransform.translateZ).scale(
new THREE.Vector3(
modelTransform.scale,
-modelTransform.scale,
modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
this.camera.projectionMatrix = m.multiply(l);
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();
}
};
map.on('load', async () => {
map.addLayer(customLayer, 'waterway-label');
});
Notably, the model link within the loader.load() function functions flawlessly for THAT specific model. However, when attempting other models, whether local or referenced as ('./models/file.gltf), it fails to work. The reason behind this remains unclear, and efforts to resolve the issue have proved unsuccessful.