@mcolabs/threebox-plugin 4.0.0 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mcolabs/threebox-plugin",
-    "version": "4.0.0",
+    "version": "4.0.2",
     "type": "module",
     "description": "A Three.js plugin for Mapbox GL JS, using the CustomLayerInterface feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.",
     "main": "dist/threebox.cjs",
@@ -39,7 +39,7 @@
         "test": "tests"
     },
     "peerDependencies": {
-        "three": ">=0.150.0"
+        "three": ">=0.182.0"
     },
     "devDependencies": {
         "terser": "^5.44.1",

package/src/Threebox.js

@@ -113,7 +113,14 @@ Threebox.prototype = {
 		this.map.on('style.load', function () {
 			this.tb.zoomLayers = [];
 			//[jscastro] if multiLayer, create a by default layer in the map, so tb.update won't be needed in client side to avoid duplicating calls to render
-			if (this.tb.options.multiLayer) this.addLayer({ id: "threebox_layer", type: 'custom', renderingMode: '3d', map: this, onAdd: function (map, gl) { }, render: function (gl, matrix) { this.map.tb.update(); } })
+			if (this.tb.options.multiLayer) this.addLayer({
+				id: "threebox_layer",
+				type: 'custom',
+				renderingMode: '3d',
+				map: this,
+				onAdd: function (map, gl) { },
+				render: function (gl, matrix) { this.map.tb.update(); }
+			})
 
 			this.once('idle', () => {
 				this.tb.setObjectsScale();
@@ -681,36 +688,58 @@ Threebox.prototype = {
 	// Objects
 	sphere: function (options) {
 		this.setDefaultView(options, this.options);
-		return sphere(options, this.world)
+		let obj = sphere(options, this.world);
+		obj.threebox = this;
+		return obj;
 	},
 
-	line: line,
+	line: function (options) {
+		let obj = line(options);
+		obj.threebox = this;
+		return obj;
+	},
 
-	label: label,
+	label: function (options) {
+		let obj = label(options);
+		obj.threebox = this;
+		return obj;
+	},
 
-	tooltip: tooltip,
+	tooltip: function (options) {
+		let obj = tooltip(options);
+		obj.threebox = this;
+		return obj;
+	},
 
 	tube: function (options) {
 		this.setDefaultView(options, this.options);
-		return tube(options, this.world)
+		let obj = tube(options, this.world);
+		obj.threebox = this;
+		return obj;
 	},
 
 	extrusion: function (options) {
 		this.setDefaultView(options, this.options);
-		return extrusion(options);
+		let obj = extrusion(options);
+		obj.threebox = this;
+		return obj;
 	},
 
 	Object3D: function (options) {
 		this.setDefaultView(options, this.options);
-		return Object3D(options)
+		let obj = Object3D(options);
+		obj.threebox = this;
+		return obj;
 	},
 
 	loadObj: async function loadObj(options, cb) {
 		this.setDefaultView(options, this.options);
+		const tb = this; // capture threebox reference for callbacks
 		if (options.clone === false) {
 			return new Promise(
 				async (resolve) => {
 					loader(options, cb, async (obj) => {
+						obj.threebox = tb;
 						resolve(obj);
 					});
 				});
@@ -721,7 +750,9 @@ Threebox.prototype = {
 			if (cache) {
 				cache.promise
 					.then(obj => {
-						cb(obj.duplicate(options));
+						let dupe = obj.duplicate(options);
+						dupe.threebox = tb;
+						cb(dupe);
 					})
 					.catch(err => {
 						this.objectsCache.delete(options.obj);
@@ -732,6 +763,7 @@ Threebox.prototype = {
 					promise: new Promise(
 						async (resolve, reject) => {
 							loader(options, cb, async (obj) => {
+								obj.threebox = tb;
 								if (obj.duplicate) {
 									resolve(obj.duplicate());
 								} else {
@@ -894,7 +926,7 @@ Threebox.prototype = {
 		this.labelRenderer.toggleLabels(layerId, visible);
 	},
 
-	update: function () {
+	update: function (matrix) {
 
 		if (this.map.repaint) this.map.repaint = false
 
@@ -907,6 +939,19 @@ Threebox.prototype = {
 
 		// Render the scene and repaint the map
 		this.renderer.resetState(); //update threejs r126
+		// Reset pixel store params that Mapbox sets - these aren't allowed for 3D texture uploads
+		const gl = this.renderer.getContext();
+		gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+
+		// Mapbox v3 fix: Re-enable depth testing
+		// Mapbox v3 disables depth testing before calling custom layer render
+		if (this.mapboxVersion >= 3.0) {
+			gl.enable(gl.DEPTH_TEST);
+			gl.depthFunc(gl.LESS);
+			gl.depthMask(true);
+		}
+
 		this.renderer.render(this.scene, this.camera);
 
 		// [jscastro] Render any label
@@ -917,6 +962,7 @@ Threebox.prototype = {
 	add: function (obj, layerId, sourceId) {
 		//[jscastro] remove the tooltip if not enabled
 		if (!this.enableTooltips && obj.tooltip) { obj.tooltip.visibility = false };
+		obj.threebox = this; // store reference to threebox instance
 		this.world.add(obj);
 		if (layerId) {
 			obj.layer = layerId;
@@ -1035,8 +1081,9 @@ Threebox.prototype = {
 
 		this.lights.dirLight.position.set(azSin, azCos, alt);
 		this.lights.dirLight.position.multiplyScalar(radius);
-		this.lights.dirLight.intensity = Math.max(alt, 0);
-		this.lights.hemiLight.intensity = Math.max(alt * 1, 0.1);
+		// Intensities scaled up for physically-based lighting (Three.js r155+)
+		this.lights.dirLight.intensity = Math.max(alt, 0) * 5;
+		this.lights.hemiLight.intensity = Math.max(alt * 1, 0.1) * 3;
 		//console.log("Intensity:" + this.lights.dirLight.intensity);
 		this.lights.dirLight.updateMatrixWorld();
 		this.updateLightHelper();
@@ -1115,25 +1162,26 @@ Threebox.prototype = {
 	},
 
 	defaultLights: function () {
-
-		this.lights.ambientLight = new THREE.AmbientLight(new THREE.Color('hsl(0, 0%, 100%)'), 0.75);
+		// Light intensities scaled up for physically-based lighting (Three.js r155+)
+		// Original values were designed for legacy lighting mode
+		this.lights.ambientLight = new THREE.AmbientLight(new THREE.Color('hsl(0, 0%, 100%)'), 3);
 		this.scene.add(this.lights.ambientLight);
 
-		this.lights.dirLightBack = new THREE.DirectionalLight(new THREE.Color('hsl(0, 0%, 100%)'), 0.25);
+		this.lights.dirLightBack = new THREE.DirectionalLight(new THREE.Color('hsl(0, 0%, 100%)'), 1);
 		this.lights.dirLightBack.position.set(30, 100, 100);
 		this.scene.add(this.lights.dirLightBack);
 
-		this.lights.dirLight  = new THREE.DirectionalLight(new THREE.Color('hsl(0, 0%, 100%)'), 0.25);
+		this.lights.dirLight = new THREE.DirectionalLight(new THREE.Color('hsl(0, 0%, 100%)'), 1);
 		this.lights.dirLight.position.set(-30, 100, -100);
 		this.scene.add(this.lights.dirLight);
 
 	},
 
 	realSunlight: function (helper = false) {
-
+		// Light intensities scaled up for physically-based lighting (Three.js r155+)
 		this.renderer.shadowMap.enabled = true;
 		//this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-		this.lights.dirLight = new THREE.DirectionalLight(0xffffff, 1);
+		this.lights.dirLight = new THREE.DirectionalLight(0xffffff, 5);
 		this.scene.add(this.lights.dirLight);
 		if (helper) {
 			this.lights.dirLightHelper = new THREE.DirectionalLightHelper(this.lights.dirLight, 5);
@@ -1148,9 +1196,9 @@ Threebox.prototype = {
 		this.lights.dirLight.shadow.camera.bottom = this.lights.dirLight.shadow.camera.left = -d2;
 		this.lights.dirLight.shadow.camera.near = 1;
 		this.lights.dirLight.shadow.camera.visible = true;
-		this.lights.dirLight.shadow.camera.far = 400000000; 
+		this.lights.dirLight.shadow.camera.far = 400000000;
 
-		this.lights.hemiLight = new THREE.HemisphereLight(new THREE.Color(0xffffff), new THREE.Color(0xffffff), 0.6);
+		this.lights.hemiLight = new THREE.HemisphereLight(new THREE.Color(0xffffff), new THREE.Color(0xffffff), 3);
 		this.lights.hemiLight.color.setHSL(0.661, 0.96, 0.12);
 		this.lights.hemiLight.groundColor.setHSL(0.11, 0.96, 0.14);
 		this.lights.hemiLight.position.set(0, 0, 50);

package/src/animation/AnimationManager.js

@@ -133,7 +133,7 @@ AnimationManager.prototype = {
 				this.animationQueue
 					.push(entry);
 
-				tb.map.repaint = true;
+				this.threebox.map.repaint = true;
 			}
 
 			//if no duration set, stop object's existing animations and go to that state immediately
@@ -183,7 +183,7 @@ AnimationManager.prototype = {
 			this.animationQueue
 				.push(entry);
 
-			tb.map.repaint = true;
+			this.threebox.map.repaint = true;
 
 			return this;
 		};
@@ -251,7 +251,7 @@ AnimationManager.prototype = {
 			this.setReceiveShadowFloor();
 
 			this.updateMatrixWorld();
-			tb.map.repaint = true;
+			this.threebox.map.repaint = true;
 
 			//const threeTarget = new THREE.EventDispatcher();
 			//threeTarget.dispatchEvent({ type: 'event', detail: { object: this, action: { position: options.position, rotation: options.rotation, scale: options.scale } } });
@@ -283,7 +283,7 @@ AnimationManager.prototype = {
 				this.animationQueue
 					.push(entry);
 
-				tb.map.repaint = true
+				this.threebox.map.repaint = true;
 				return this;
 			}
 		}
@@ -343,7 +343,7 @@ AnimationManager.prototype = {
 				// Update the animation mixer and render this frame
 				obj.mixer.update(0.01);
 			}
-			tb.map.repaint = true;
+			this.threebox.map.repaint = true;
 			return this;
 		}
 
@@ -458,7 +458,7 @@ AnimationManager.prototype = {
 						object.isPlaying = true;
 						object.animationMethod = requestAnimationFrame(this.update);
 						object.mixer.update(object.clock.getDelta());
-						tb.map.repaint = true;
+						object.threebox.map.repaint = true;
 					}
 
 				}

package/src/camera/CameraSync.js

@@ -13,11 +13,13 @@ function CameraSync(map, camera, world) {
     this.active = true;
 
     this.camera.matrixAutoUpdate = false; // We're in charge of the camera now!
+    this.camera.matrixWorldAutoUpdate = false; // Three.js r150+: prevent auto world matrix recalculation
 
     // Postion and configure the world group so we can scale it appropriately when the camera zooms
     this.world = world || new THREE.Group();
     this.world.position.x = this.world.position.y = ThreeboxConstants.WORLD_SIZE / 2
     this.world.matrixAutoUpdate = false;
+    this.world.matrixWorldAutoUpdate = false; // Three.js r150+: prevent auto world matrix recalculation
 
     // set up basic camera state
     this.state = {
@@ -101,7 +103,7 @@ CameraSync.prototype = {
         // someday @ansis set further near plane to fix precision for deckgl,so we should fix it to use mapbox-gl v1.3+ correctly
         // https://github.com/mapbox/mapbox-gl-js/commit/5cf6e5f523611bea61dae155db19a7cb19eb825c#diff-5dddfe9d7b5b4413ee54284bc1f7966d
         const nz = (t.height / 50); //min near z as coded by @ansis
-        const nearZ = Math.max(nz * pitchAngle, nz); //on changes in the pitch nz could be too low
+        let nearZ = Math.max(nz * pitchAngle, nz); //on changes in the pitch nz could be too low
 
         const h = t.height;
         const w = t.width;
@@ -118,6 +120,7 @@ CameraSync.prototype = {
         let cameraWorldMatrix = this.calcCameraMatrix(t._pitch, t.angle);
         // When terrain layers are included, height of 3D layers must be modified from t_camera.z * worldSize
         if (t.elevation) cameraWorldMatrix.elements[14] = t._camera.position[2] * worldSize;
+
         //this.camera.matrixWorld.elements is equivalent to t._camera._transform
         this.camera.matrixWorld.copy(cameraWorldMatrix);
         

package/src/objects/effects/BuildingShadows.js

@@ -14,9 +14,14 @@ class BuildingShadows {
 		this.map = map;
 		// find layer source
 		const sourceName = this.map.getLayer(this.buildingsLayerId).source;
-		this.source = (this.map.style.sourceCaches || this.map.style._otherSourceCaches)[sourceName];
+		// Handle Mapbox v1, v2, and v3 internal API differences for source cache access
+		const style = this.map.style;
+		this.source = style.sourceCaches?.[sourceName] ||
+		              style._otherSourceCaches?.[sourceName] ||
+		              style._sourceCaches?.[sourceName];
+
 		if (!this.source) {
-			console.warn(`Can't find layer ${this.buildingsLayerId}'s source.`);
+			console.warn(`BuildingShadows: Can't find layer ${this.buildingsLayerId}'s source.`);
 		}
 
 		// vertex shader of fill-extrusion layer is different in mapbox v1 and v2.
@@ -30,13 +35,22 @@ class BuildingShadows {
 		const vertexShader = gl.createShader(gl.VERTEX_SHADER);
 		gl.shaderSource(vertexShader, vertexSource);
 		gl.compileShader(vertexShader);
+		if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+			console.error('BuildingShadows vertex shader error:', gl.getShaderInfoLog(vertexShader));
+		}
 		const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
 		gl.shaderSource(fragmentShader, fragmentSource);
 		gl.compileShader(fragmentShader);
+		if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+			console.error('BuildingShadows fragment shader error:', gl.getShaderInfoLog(fragmentShader));
+		}
 		this.program = gl.createProgram();
 		gl.attachShader(this.program, vertexShader);
 		gl.attachShader(this.program, fragmentShader);
 		gl.linkProgram(this.program);
+		if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) {
+			console.error('BuildingShadows program link error:', gl.getProgramInfoLog(this.program));
+		}
 		gl.validateProgram(this.program);
 		this.uMatrix = gl.getUniformLocation(this.program, "u_matrix");
 		this.uHeightFactor = gl.getUniformLocation(this.program, "u_height_factor");
@@ -64,19 +78,31 @@ class BuildingShadows {
 		const pos = this.tb.getSunPosition(this.tb.lightDateTime, [lng, lat]);
 		gl.uniform1f(this.uAltitude, (pos.altitude > this.minAltitude ? pos.altitude : 0));
 		gl.uniform1f(this.uAzimuth, pos.azimuth + 3 * Math.PI / 2);
-		//this.opacity = Math.sin(Math.max(pos.altitude, 0)) * 0.6;
 		gl.enable(gl.BLEND);
-		//gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.DST_ALPHA, gl.SRC_ALPHA);
 		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
-		var ext = gl.getExtension('EXT_blend_minmax');
-		//gl.blendEquationSeparate(gl.FUNC_SUBTRACT, ext.MIN_EXT);
-		//gl.blendEquation(gl.FUNC_ADD);
 		gl.disable(gl.DEPTH_TEST);
 		for (const coord of coords) {
 			const tile = this.source.getTile(coord);
-			const bucket = tile.getBucket(buildingsLayer);
+
+			let bucket = tile.getBucket(buildingsLayer);
+			// Mapbox v3 fallback: try direct bucket access by layer ID
+			if (!bucket && tile.buckets) {
+				bucket = tile.buckets[this.buildingsLayerId];
+			}
 			if (!bucket) continue;
-			const [heightBuffer, baseBuffer] = bucket.programConfigurations.programConfigurations[this.buildingsLayerId]._buffers;
+
+			// Handle Mapbox v3 internal API changes for buffer access
+			let heightBuffer, baseBuffer;
+			const programConfig = bucket.programConfigurations?.programConfigurations?.[this.buildingsLayerId];
+			if (programConfig?._buffers) {
+				[heightBuffer, baseBuffer] = programConfig._buffers;
+			} else if (programConfig?.getBuffers) {
+				const buffers = programConfig.getBuffers();
+				heightBuffer = buffers[0];
+				baseBuffer = buffers[1];
+			} else {
+				continue;
+			}
 			gl.uniformMatrix4fv(this.uMatrix, false, (coord.posMatrix || coord.projMatrix));
 			gl.uniform1f(this.uHeightFactor, Math.pow(2, coord.overscaledZ) / tile.tileSize / 8);
 			for (const segment of bucket.segments.get()) {
@@ -160,4 +186,4 @@ class BuildingShadows {
 	}
 }
 
-export default BuildingShadows;
+export default BuildingShadows;

package/src/objects/loadObj.js

@@ -43,10 +43,16 @@ function loadObj(options, cb, promise) {
 			break;
 	}
 
-	materialLoader.withCredentials = options.withCredentials;
-	materialLoader.load(options.mtl, loadObject, () => (null), error => {
-		console.warn("No material file found " + error.stack);
-	});
+	// Only load MTL if specified, otherwise proceed directly
+	if (options.mtl) {
+		materialLoader.withCredentials = options.withCredentials;
+		materialLoader.load(options.mtl, loadObject, () => (null), error => {
+			console.warn("No material file found " + error.stack);
+			loadObject(null); // Proceed without materials on error
+		});
+	} else {
+		loadObject(null); // No MTL specified, proceed directly
+	}
 
 	function loadObject(materials) {
 
@@ -80,6 +86,8 @@ function loadObj(options, cb, promise) {
 			const s = utils.types.scale(options.scale, [1, 1, 1]);
 			obj.rotation.set(r[0], r[1], r[2]);
 			obj.scale.set(s[0], s[1], s[2]);
+			// Fix materials for Three.js r152+ color management and transparency
+			// fixMaterials(obj);
 			// [jscastro] normalize specular/metalness/shininess from meshes in FBX and GLB model as it would need 5 lights to illuminate them properly
 			if (options.normalize) { normalizeSpecular(obj); }
 			obj.name = "model";
@@ -107,7 +115,44 @@ function loadObj(options, cb, promise) {
 
 	};
 
+	// // Fix materials for Three.js r132+ transparency and r152+ color management
+	// function fixMaterials(model) {
+	// 	model.traverse(function (c) {
+	// 		if (c.isMesh) {
+	// 			let materials = Array.isArray(c.material) ? c.material : [c.material];
+	// 			materials.forEach(function (mat) {
+	// 				if (!mat) return;
+
+	// 				// Set colorSpace for color textures (Three.js r152+)
+	// 				if (mat.map) mat.map.colorSpace = THREE.SRGBColorSpace;
+	// 				if (mat.emissiveMap) mat.emissiveMap.colorSpace = THREE.SRGBColorSpace;
+
+	// 				// Fix GLTF transparency (Three.js r132+ issue)
+	// 				// Since r132, setting transparent=true on GLTF materials doesn't work properly
+	// 				// Need to use custom blending for transparency to display correctly
+	// 				let isTransparent = mat.transparent || mat.opacity < 1 || mat.alphaMap || mat.alphaTest > 0;
+
+	// 				// Also check for alpha in the base color texture
+	// 				if (mat.map && mat.map.format === THREE.RGBAFormat) {
+	// 					isTransparent = true;
+	// 				}
+
+	// 				if (isTransparent) {
+	// 					mat.transparent = true;
+	// 					mat.depthWrite = false;
+	// 					mat.blending = THREE.CustomBlending;
+	// 					mat.blendSrc = THREE.SrcAlphaFactor;
+	// 					mat.blendDst = THREE.OneMinusSrcAlphaFactor;
+	// 					mat.blendEquation = THREE.AddEquation;
+	// 					mat.needsUpdate = true;
+	// 				}
+	// 			});
+	// 		}
+	// 	});
+	// }
+
 	//[jscastro] some FBX/GLTF models have too much specular effects for mapbox
+	// Multipliers adjusted for physically-based lighting (Three.js r155+)
 	function normalizeSpecular(model) {
 		model.traverse(function (c) {
 
@@ -116,13 +161,13 @@ function loadObj(options, cb, promise) {
 				let specularColor;
 				if (c.material.type == 'MeshStandardMaterial') {
 
-					if (c.material.metalness) { c.material.metalness *= 0.1; }
-					if (c.material.glossiness) { c.material.glossiness *= 0.25; }
-					specularColor = new THREE.Color(12, 12, 12);
+					if (c.material.metalness) { c.material.metalness *= 0.3; }
+					if (c.material.glossiness) { c.material.glossiness *= 0.5; }
+					specularColor = new THREE.Color(0x0c0c0c);
 
 				} else if (c.material.type == 'MeshPhongMaterial') {
-					c.material.shininess = 0.1;
-					specularColor = new THREE.Color(20, 20, 20);
+					c.material.shininess = 0.3;
+					specularColor = new THREE.Color(0x141414);
 				}
 				if (c.material.specular && c.material.specular.isColor) {
 					c.material.specular = specularColor;

package/src/objects/objects.js

@@ -175,7 +175,7 @@ Objects.prototype = {
 				model.position.add(point); // re-add the offset
 				model.rotateOnAxis(axis, theta)
 
-				tb.map.repaint = true;
+				obj.threebox.map.repaint = true;
 			}
 
 
@@ -818,13 +818,14 @@ Objects.prototype = {
 			})
 
 			obj.scaleGroup.remove(o);
-			tb.map.repaint = true;
+			obj.threebox.map.repaint = true;
 		}
 
 		//[jscastro] clone + assigning all the attributes
 		obj.duplicate = function (options) {
 
 			let dupe = obj.clone(true);	//clone the whole threebox object
+			dupe.threebox = obj.threebox; // copy threebox reference to the duplicate
 			dupe.getObjectByName("model").animations = obj.animations; //we must set this explicitly before addMethods
 			if (dupe.userData.feature) {
 				if (options && options.feature) dupe.userData.feature = options.feature;