threejs-model-loader - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

model-viewer-element.js

@@ -94,3 +94,4 @@ // model-viewer element
 
-		const ambientLight = new THREE.HemisphereLight( this.ambientColor, this.ambientColor );
+		const ambientLight = new THREE.HemisphereLight( this.ambientColor, '#000' );
+		ambientLight.groundColor.lerp( ambientLight.color, 0.5 );
 		ambientLight.intensity = 0.5;
@@ -146,3 +147,3 @@ ambientLight.position.set( 0, 1, 0 );
 		controls.enableZoom = true;
-		controls.enablePan = true;
+		controls.enablePan = false;
 		controls.enableDamping = false;
@@ -178,2 +179,22 @@ controls.maxDistance = 50;
 					this.directionalLight.castShadow = this.displayShadow;
+
+					if ( this._model && this.displayShadow ) {
+
+						// Update the shadow camera rendering bounds to encapsulate the
+						// model. We use the bounding sphere of the bounding box for
+						// simplicity -- this could be a tighter fit.
+						const bbox = new THREE.Box3().setFromObject( this._model );
+						const sphere = bbox.getBoundingSphere( new THREE.Sphere() );
+						const minmax = sphere.radius;
+						const cam = this.directionalLight.shadow.camera;
+						cam.left = cam.bottom = - minmax;
+						cam.right = cam.top = minmax;
+						cam.updateProjectionMatrix();
+
+						// TODO: Position the camera about the center of the model
+						// because it's possible that the model will be off center
+						// and extend outside of the shadow camera bounds
+
+					}
+
 					this.renderer.render( scene, camera );
@@ -243,3 +264,3 @@ this._dirty = false;
 				this.ambientLight.color.set( this.ambientColor );
-				this.ambientLight.groundColor.set( '#000' ).lerp( this.ambientLight.color, 0.25 );
+				this.ambientLight.groundColor.set( '#000' ).lerp( this.ambientLight.color, 0.5 );
 				break;
@@ -317,16 +338,2 @@
 
-					// The texture's color space is assumed to be
-					// in sRGB, though most of the THREE loaders assume
-					// a Linear color space.
-					res.model.traverse( c => {
-
-						if ( c.material && c.material.map ) {
-
-							c.material.map.encoding = THREE.GammaEncoding;
-							c.material.needsUpdate = true;
-
-						}
-
-					} );
-
 					this._addModel( res.model );
@@ -414,2 +421,24 @@ this.dispatchEvent( new CustomEvent( 'model-loaded', { bubbles: true, cancelable: true, composed: true } ) );
 
+						// TODO: Lambert materials don't handle shadows well, so
+						// we replace them here. Remove this once the THREE bug is fixed
+						// Mentioned in https://github.com/mrdoob/three.js/issues/8238
+						if ( m instanceof THREE.MeshLambertMaterial ) {
+
+							const mat = new THREE.MeshPhongMaterial();
+							mat.copy( m );
+							mats[ i ] = mat;
+							m = mat;
+
+						}
+
+						if ( m.map ) {
+
+							// The texture's color space is assumed to be
+							// in sRGB, though most of the THREE loaders assume
+							// a Linear color space.
+							m.map.encoding = THREE.GammaEncoding;
+							m.needsUpdate = true;
+
+						}
+
 						m.shadowSide = THREE.DoubleSide;
@@ -416,0 +445,0 @@

package.json

 {
   "name": "threejs-model-loader",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "THREE.js Model Loader that delegates to the appropriate geometry loader",
@@ -5,0 +5,0 @@ "main": "ModelLoader.js",

No alert changes

Improved metrics

Total package byte prevSize

1183548

increased by0.19%

Lines of code

5057

increased by0.54%

No dependency changes