three-render-objects 1.28.5 → 1.29.0

package/README.md

@@ -48,6 +48,7 @@ ThreeRenderObjects({ configOptions })(<domElement>)
 | Method | Description | Default |
 | --- | --- | :--: |
 | <b>objects</b>([<i>array</i>]) | Getter/setter for the list of objects to render. Each object should be an instance of [Object3D](https://threejs.org/docs/#api/core/Object3D). | `[]` |
+| <b>lights</b>([<i>array</i>]) | Getter/setter for the list of lights to use in the scene. Each item should be an instance of [Light](https://threejs.org/docs/#api/en/lights/Light). | `[]` |
 
 ### Container layout
 

package/dist/three-render-objects.d.ts

@@ -1,4 +1,4 @@
-import { WebGLRendererParameters, Renderer, Object3D, WebGLRenderer, Scene, Camera, Intersection } from 'three';
+import { WebGLRendererParameters, Renderer, Object3D, Light, WebGLRenderer, Scene, Camera, Intersection } from 'three';
 import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js';
@@ -25,6 +25,8 @@ interface ThreeRenderObjectsGenericInstance<ChainableInstance> {
   // Data input
   objects(): Object3D[];
   objects(objs: Object3D[]): ChainableInstance;
+  lights(): Light[];
+  lights(lights: Light[]): ChainableInstance;
 
   // Container layout
   width(): number;
@@ -84,4 +86,4 @@ type ThreeRenderObjectsInstance = ThreeRenderObjectsGenericInstance<ThreeRenderO
 
 declare function ThreeRenderObjects(configOptions?: ConfigOptions): ThreeRenderObjectsInstance;
 
-export { ConfigOptions, ThreeRenderObjectsGenericInstance, ThreeRenderObjectsInstance, ThreeRenderObjects as default };
+export { type ConfigOptions, type ThreeRenderObjectsGenericInstance, type ThreeRenderObjectsInstance, ThreeRenderObjects as default };

package/dist/three-render-objects.js

@@ -1,4 +1,4 @@
-// Version 1.28.5 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.29.0 three-render-objects - https://github.com/vasturiano/three-render-objects
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
   typeof define === 'function' && define.amd ? define(['three'], factory) :
@@ -32,34 +32,34 @@
     }
   }
 
-  var css_248z = ".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  top: 0;\n  color: lavender;\n  font-size: 15px;\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
+  var css_248z = ".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  top: 0;\n  color: lavender;\n  font-size: 15px;\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
   styleInject(css_248z);
 
-  function _iterableToArrayLimit$1(arr, i) {
-    var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
-    if (null != _i) {
-      var _s,
-        _e,
-        _x,
-        _r,
-        _arr = [],
-        _n = !0,
-        _d = !1;
+  function _iterableToArrayLimit$1(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = !0,
+        o = !1;
       try {
-        if (_x = (_i = _i.call(arr)).next, 0 === i) {
-          if (Object(_i) !== _i) return;
-          _n = !1;
-        } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
-      } catch (err) {
-        _d = !0, _e = err;
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = !0, n = r;
       } finally {
         try {
-          if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
         } finally {
-          if (_d) throw _e;
+          if (o) throw n;
         }
       }
-      return _arr;
+      return a;
     }
   }
   function _defineProperty(obj, key, value) {
@@ -953,6 +953,9 @@
   const _changeEvent$1 = { type: 'change' };
   const _startEvent = { type: 'start' };
   const _endEvent = { type: 'end' };
+  const _ray = new three$1.Ray();
+  const _plane = new three$1.Plane();
+  const TILT_LIMIT = Math.cos( 70 * three$1.MathUtils.DEG2RAD );
 
   class OrbitControls extends three$1.EventDispatcher {
 
@@ -1007,6 +1010,7 @@
   		this.panSpeed = 1.0;
   		this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
   		this.keyPanSpeed = 7.0;	// pixels moved per arrow key push
+  		this.zoomToCursor = false;
 
   		// Set to true to automatically rotate around the target
   		// If auto-rotate is enabled, you must call controls.update() in your animation loop
@@ -1104,7 +1108,7 @@
 
   			const twoPI = 2 * Math.PI;
 
-  			return function update() {
+  			return function update( deltaTime = null ) {
 
   				const position = scope.object.position;
 
@@ -1118,7 +1122,7 @@
 
   				if ( scope.autoRotate && state === STATE.NONE ) {
 
-  					rotateLeft( getAutoRotationAngle() );
+  					rotateLeft( getAutoRotationAngle( deltaTime ) );
 
   				}
 
@@ -1165,11 +1169,6 @@
   				spherical.makeSafe();
 
 
-  				spherical.radius *= scale;
-
-  				// restrict radius to be between desired limits
-  				spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-
   				// move target to panned location
 
   				if ( scope.enableDamping === true ) {
@@ -1182,6 +1181,19 @@
 
   				}
 
+  				// adjust the camera position based on zoom only if we're not zooming to the cursor or if it's an ortho camera
+  				// we adjust zoom later in these cases
+  				if ( scope.zoomToCursor && performCursorZoom || scope.object.isOrthographicCamera ) {
+
+  					spherical.radius = clampDistance( spherical.radius );
+
+  				} else {
+
+  					spherical.radius = clampDistance( spherical.radius * scale );
+
+  				}
+
+
   				offset.setFromSpherical( spherical );
 
   				// rotate offset back to "camera-up-vector-is-up" space
@@ -1206,7 +1218,91 @@
 
   				}
 
+  				// adjust camera position
+  				let zoomChanged = false;
+  				if ( scope.zoomToCursor && performCursorZoom ) {
+
+  					let newRadius = null;
+  					if ( scope.object.isPerspectiveCamera ) {
+
+  						// move the camera down the pointer ray
+  						// this method avoids floating point error
+  						const prevRadius = offset.length();
+  						newRadius = clampDistance( prevRadius * scale );
+
+  						const radiusDelta = prevRadius - newRadius;
+  						scope.object.position.addScaledVector( dollyDirection, radiusDelta );
+  						scope.object.updateMatrixWorld();
+
+  					} else if ( scope.object.isOrthographicCamera ) {
+
+  						// adjust the ortho camera position based on zoom changes
+  						const mouseBefore = new three$1.Vector3( mouse.x, mouse.y, 0 );
+  						mouseBefore.unproject( scope.object );
+
+  						scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+  						scope.object.updateProjectionMatrix();
+  						zoomChanged = true;
+
+  						const mouseAfter = new three$1.Vector3( mouse.x, mouse.y, 0 );
+  						mouseAfter.unproject( scope.object );
+
+  						scope.object.position.sub( mouseAfter ).add( mouseBefore );
+  						scope.object.updateMatrixWorld();
+
+  						newRadius = offset.length();
+
+  					} else {
+
+  						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - zoom to cursor disabled.' );
+  						scope.zoomToCursor = false;
+
+  					}
+
+  					// handle the placement of the target
+  					if ( newRadius !== null ) {
+
+  						if ( this.screenSpacePanning ) {
+
+  							// position the orbit target in front of the new camera position
+  							scope.target.set( 0, 0, - 1 )
+  								.transformDirection( scope.object.matrix )
+  								.multiplyScalar( newRadius )
+  								.add( scope.object.position );
+
+  						} else {
+
+  							// get the ray and translation plane to compute target
+  							_ray.origin.copy( scope.object.position );
+  							_ray.direction.set( 0, 0, - 1 ).transformDirection( scope.object.matrix );
+
+  							// if the camera is 20 degrees above the horizon then don't adjust the focus target to avoid
+  							// extremely large values
+  							if ( Math.abs( scope.object.up.dot( _ray.direction ) ) < TILT_LIMIT ) {
+
+  								object.lookAt( scope.target );
+
+  							} else {
+
+  								_plane.setFromNormalAndCoplanarPoint( scope.object.up, scope.target );
+  								_ray.intersectPlane( _plane, scope.target );
+
+  							}
+
+  						}
+
+  					}
+
+  				} else if ( scope.object.isOrthographicCamera ) {
+
+  					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / scale ) );
+  					scope.object.updateProjectionMatrix();
+  					zoomChanged = true;
+
+  				}
+
   				scale = 1;
+  				performCursorZoom = false;
 
   				// update condition is:
   				// min(camera displacement, camera rotation in radians)^2 > EPS
@@ -1285,7 +1381,6 @@
 
   		let scale = 1;
   		const panOffset = new three$1.Vector3();
-  		let zoomChanged = false;
 
   		const rotateStart = new three$1.Vector2();
   		const rotateEnd = new three$1.Vector2();
@@ -1299,12 +1394,24 @@
   		const dollyEnd = new three$1.Vector2();
   		const dollyDelta = new three$1.Vector2();
 
+  		const dollyDirection = new three$1.Vector3();
+  		const mouse = new three$1.Vector2();
+  		let performCursorZoom = false;
+
   		const pointers = [];
   		const pointerPositions = {};
 
-  		function getAutoRotationAngle() {
+  		function getAutoRotationAngle( deltaTime ) {
+
+  			if ( deltaTime !== null ) {
 
-  			return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+  				return ( 2 * Math.PI / 60 * scope.autoRotateSpeed ) * deltaTime;
+
+  			} else {
+
+  				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
+
+  			}
 
   		}
 
@@ -1409,16 +1516,10 @@
 
   		function dollyOut( dollyScale ) {
 
-  			if ( scope.object.isPerspectiveCamera ) {
+  			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
 
   				scale /= dollyScale;
 
-  			} else if ( scope.object.isOrthographicCamera ) {
-
-  				scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
-  				scope.object.updateProjectionMatrix();
-  				zoomChanged = true;
-
   			} else {
 
   				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
@@ -1430,16 +1531,10 @@
 
   		function dollyIn( dollyScale ) {
 
-  			if ( scope.object.isPerspectiveCamera ) {
+  			if ( scope.object.isPerspectiveCamera || scope.object.isOrthographicCamera ) {
 
   				scale *= dollyScale;
 
-  			} else if ( scope.object.isOrthographicCamera ) {
-
-  				scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
-  				scope.object.updateProjectionMatrix();
-  				zoomChanged = true;
-
   			} else {
 
   				console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
@@ -1449,6 +1544,35 @@
 
   		}
 
+  		function updateMouseParameters( event ) {
+
+  			if ( ! scope.zoomToCursor ) {
+
+  				return;
+
+  			}
+
+  			performCursorZoom = true;
+
+  			const rect = scope.domElement.getBoundingClientRect();
+  			const x = event.clientX - rect.left;
+  			const y = event.clientY - rect.top;
+  			const w = rect.width;
+  			const h = rect.height;
+
+  			mouse.x = ( x / w ) * 2 - 1;
+  			mouse.y = - ( y / h ) * 2 + 1;
+
+  			dollyDirection.set( mouse.x, mouse.y, 1 ).unproject( scope.object ).sub( scope.object.position ).normalize();
+
+  		}
+
+  		function clampDistance( dist ) {
+
+  			return Math.max( scope.minDistance, Math.min( scope.maxDistance, dist ) );
+
+  		}
+
   		//
   		// event callbacks - update the object state
   		//
@@ -1461,6 +1585,7 @@
 
   		function handleMouseDownDolly( event ) {
 
+  			updateMouseParameters( event );
   			dollyStart.set( event.clientX, event.clientY );
 
   		}
@@ -1527,6 +1652,8 @@
 
   		function handleMouseWheel( event ) {
 
+  			updateMouseParameters( event );
+
   			if ( event.deltaY < 0 ) {
 
   				dollyIn( getZoomScale() );
@@ -2211,6 +2338,9 @@
 
   		// API
 
+  		// Set to false to disable this control
+  		this.enabled = true;
+
   		this.movementSpeed = 1.0;
   		this.rollSpeed = 0.005;
 
@@ -2238,7 +2368,7 @@
 
   		this.keydown = function ( event ) {
 
-  			if ( event.altKey ) {
+  			if ( event.altKey || this.enabled === false ) {
 
   				return;
 
@@ -2276,6 +2406,8 @@
 
   		this.keyup = function ( event ) {
 
+  			if ( this.enabled === false ) return;
+
   			switch ( event.code ) {
 
   				case 'ShiftLeft':
@@ -2308,6 +2440,8 @@
 
   		this.pointerdown = function ( event ) {
 
+  			if ( this.enabled === false ) return;
+
   			if ( this.dragToLook ) {
 
   				this.status ++;
@@ -2329,6 +2463,8 @@
 
   		this.pointermove = function ( event ) {
 
+  			if ( this.enabled === false ) return;
+
   			if ( ! this.dragToLook || this.status > 0 ) {
 
   				const container = this.getContainerDimensions();
@@ -2346,6 +2482,8 @@
 
   		this.pointerup = function ( event ) {
 
+  			if ( this.enabled === false ) return;
+
   			if ( this.dragToLook ) {
 
   				this.status --;
@@ -2369,8 +2507,18 @@
 
   		};
 
+  		this.contextMenu = function ( event ) {
+
+  			if ( this.enabled === false ) return;
+
+  			event.preventDefault();
+
+  		};
+
   		this.update = function ( delta ) {
 
+  			if ( this.enabled === false ) return;
+
   			const moveMult = delta * scope.movementSpeed;
   			const rotMult = delta * scope.rollSpeed;
 
@@ -2438,7 +2586,7 @@
 
   		this.dispose = function () {
 
-  			this.domElement.removeEventListener( 'contextmenu', contextmenu );
+  			this.domElement.removeEventListener( 'contextmenu', _contextmenu );
   			this.domElement.removeEventListener( 'pointerdown', _pointerdown );
   			this.domElement.removeEventListener( 'pointermove', _pointermove );
   			this.domElement.removeEventListener( 'pointerup', _pointerup );
@@ -2448,13 +2596,14 @@
 
   		};
 
+  		const _contextmenu = this.contextMenu.bind( this );
   		const _pointermove = this.pointermove.bind( this );
   		const _pointerdown = this.pointerdown.bind( this );
   		const _pointerup = this.pointerup.bind( this );
   		const _keydown = this.keydown.bind( this );
   		const _keyup = this.keyup.bind( this );
 
-  		this.domElement.addEventListener( 'contextmenu', contextmenu );
+  		this.domElement.addEventListener( 'contextmenu', _contextmenu );
   		this.domElement.addEventListener( 'pointerdown', _pointerdown );
   		this.domElement.addEventListener( 'pointermove', _pointermove );
   		this.domElement.addEventListener( 'pointerup', _pointerup );
@@ -2469,12 +2618,6 @@
 
   }
 
-  function contextmenu( event ) {
-
-  	event.preventDefault();
-
-  }
-
   /**
    * Full-screen textured quad shader
    */
@@ -2511,8 +2654,8 @@
 
 		void main() {
 
-			gl_FragColor = texture2D( tDiffuse, vUv );
-			gl_FragColor.a *= opacity;
+			vec4 texel = texture2D( tDiffuse, vUv );
+			gl_FragColor = opacity * texel;
 
 
 		}`
@@ -2728,11 +2871,14 @@
   		if ( this.clear ) renderer.clear();
   		renderer.render( this.scene, this.camera );
 
-  		// unlock color and depth buffer for subsequent rendering
+  		// unlock color and depth buffer and make them writable for subsequent rendering/clearing
 
   		state.buffers.color.setLocked( false );
   		state.buffers.depth.setLocked( false );
 
+  		state.buffers.color.setMask( true );
+  		state.buffers.depth.setMask( true );
+
   		// only render where stencil is set to 1
 
   		state.buffers.stencil.setLocked( false );
@@ -2799,6 +2945,7 @@
   		this.passes = [];
 
   		this.copyPass = new ShaderPass( CopyShader );
+  		this.copyPass.material.blending = three$1.NoBlending;
 
   		this.clock = new three$1.Clock();
 
@@ -2982,7 +3129,7 @@
 
   class RenderPass extends Pass {
 
-  	constructor( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
+  	constructor( scene, camera, overrideMaterial = null, clearColor = null, clearAlpha = null ) {
 
   		super();
 
@@ -2992,7 +3139,7 @@
   		this.overrideMaterial = overrideMaterial;
 
   		this.clearColor = clearColor;
-  		this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 0;
+  		this.clearAlpha = clearAlpha;
 
   		this.clear = true;
   		this.clearDepth = false;
@@ -3008,7 +3155,7 @@
 
   		let oldClearAlpha, oldOverrideMaterial;
 
-  		if ( this.overrideMaterial !== undefined ) {
+  		if ( this.overrideMaterial !== null ) {
 
   			oldOverrideMaterial = this.scene.overrideMaterial;
 
@@ -3016,16 +3163,21 @@
 
   		}
 
-  		if ( this.clearColor ) {
+  		if ( this.clearColor !== null ) {
 
   			renderer.getClearColor( this._oldClearColor );
-  			oldClearAlpha = renderer.getClearAlpha();
+  			renderer.setClearColor( this.clearColor );
+
+  		}
 
-  			renderer.setClearColor( this.clearColor, this.clearAlpha );
+  		if ( this.clearAlpha !== null ) {
+
+  			oldClearAlpha = renderer.getClearAlpha();
+  			renderer.setClearAlpha( this.clearAlpha );
 
   		}
 
-  		if ( this.clearDepth ) {
+  		if ( this.clearDepth == true ) {
 
   			renderer.clearDepth();
 
@@ -3033,17 +3185,30 @@
 
   		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
 
-  		// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
-  		if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+  		if ( this.clear === true ) {
+
+  			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
+  			renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+
+  		}
+
   		renderer.render( this.scene, this.camera );
 
-  		if ( this.clearColor ) {
+  		// restore
 
-  			renderer.setClearColor( this._oldClearColor, oldClearAlpha );
+  		if ( this.clearColor !== null ) {
+
+  			renderer.setClearColor( this._oldClearColor );
 
   		}
 
-  		if ( this.overrideMaterial !== undefined ) {
+  		if ( this.clearAlpha !== null ) {
+
+  			renderer.setClearAlpha( oldClearAlpha );
+
+  		}
+
+  		if ( this.overrideMaterial !== null ) {
 
   			this.scene.overrideMaterial = oldOverrideMaterial;
 
@@ -3099,7 +3264,11 @@
   }
 
   function _isNativeFunction(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    try {
+      return Function.toString.call(fn).indexOf("[native code]") !== -1;
+    } catch (e) {
+      return typeof fn === "function";
+    }
   }
 
   function _isNativeReflectConstruct() {
@@ -5403,6 +5572,9 @@
       objects: {
         "default": []
       },
+      lights: {
+        "default": []
+      },
       enablePointerInteraction: {
         "default": true,
         onChange: function onChange(_, state) {
@@ -5863,6 +6035,15 @@
         }
       }
       changedProps.hasOwnProperty('showNavInfo') && (state.navInfo.style.display = state.showNavInfo ? null : 'none');
+      if (changedProps.hasOwnProperty('lights')) {
+        (changedProps.lights || []).forEach(function (light) {
+          return state.scene.remove(light);
+        }); // Clear the place
+        state.lights.forEach(function (light) {
+          return state.scene.add(light);
+        }); // Add to scene
+      }
+
       if (changedProps.hasOwnProperty('objects')) {
         (changedProps.objects || []).forEach(function (obj) {
           return state.scene.remove(obj);