super-three 0.136.1 → 0.144.0

package/examples/js/misc/VolumeSlice.js

@@ -9,103 +9,103 @@
  * @see Volume
  */
 
-	function VolumeSlice( volume, index, axis ) {
+	class VolumeSlice {
 
-		var slice = this;
-		/**
-   * @member {Volume} volume The associated volume
-   */
-
-		this.volume = volume;
-		/**
-   * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
-   */
-
-		index = index || 0;
-		Object.defineProperty( this, 'index', {
-			get: function () {
+		constructor( volume, index, axis ) {
 
-				return index;
-
-			},
-			set: function ( value ) {
-
-				index = value;
-				slice.geometryNeedsUpdate = true;
-				return index;
-
-			}
-		} );
-		/**
-   * @member {String} axis The normal axis
-   */
+			const slice = this;
+			/**
+     * @member {Volume} volume The associated volume
+     */
 
-		this.axis = axis || 'z';
-		/**
-   * @member {HTMLCanvasElement} canvas The final canvas used for the texture
-   */
+			this.volume = volume;
+			/**
+     * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
+     */
 
-		/**
-   * @member {CanvasRenderingContext2D} ctx Context of the canvas
-   */
+			index = index || 0;
+			Object.defineProperty( this, 'index', {
+				get: function () {
 
-		this.canvas = document.createElement( 'canvas' );
-		/**
-   * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
-   */
+					return index;
 
-		/**
-   * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
-   */
+				},
+				set: function ( value ) {
 
-		this.canvasBuffer = document.createElement( 'canvas' );
-		this.updateGeometry();
-		var canvasMap = new THREE.Texture( this.canvas );
-		canvasMap.minFilter = THREE.LinearFilter;
-		canvasMap.wrapS = canvasMap.wrapT = THREE.ClampToEdgeWrapping;
-		var material = new THREE.MeshBasicMaterial( {
-			map: canvasMap,
-			side: THREE.DoubleSide,
-			transparent: true
-		} );
-		/**
-   * @member {Mesh} mesh The mesh ready to get used in the scene
-   */
+					index = value;
+					slice.geometryNeedsUpdate = true;
+					return index;
 
-		this.mesh = new THREE.Mesh( this.geometry, material );
-		this.mesh.matrixAutoUpdate = false;
-		/**
-   * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
-   */
-
-		this.geometryNeedsUpdate = true;
-		this.repaint();
-		/**
-   * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
-   */
-
-		/**
-   * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
-   */
-
-		/**
-   * @member {Function} sliceAccess Function that allow the slice to access right data
-   * @see Volume.extractPerpendicularPlane
-   * @param {Number} i The first coordinate
-   * @param {Number} j The second coordinate
-   * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
-   */
-
-	}
-
-	VolumeSlice.prototype = {
-		constructor: VolumeSlice,
+				}
+			} );
+			/**
+     * @member {String} axis The normal axis
+     */
+
+			this.axis = axis || 'z';
+			/**
+     * @member {HTMLCanvasElement} canvas The final canvas used for the texture
+     */
+
+			/**
+     * @member {CanvasRenderingContext2D} ctx Context of the canvas
+     */
+
+			this.canvas = document.createElement( 'canvas' );
+			/**
+     * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
+     */
+
+			/**
+     * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
+     */
+
+			this.canvasBuffer = document.createElement( 'canvas' );
+			this.updateGeometry();
+			const canvasMap = new THREE.Texture( this.canvas );
+			canvasMap.minFilter = THREE.LinearFilter;
+			canvasMap.wrapS = canvasMap.wrapT = THREE.ClampToEdgeWrapping;
+			const material = new THREE.MeshBasicMaterial( {
+				map: canvasMap,
+				side: THREE.DoubleSide,
+				transparent: true
+			} );
+			/**
+     * @member {Mesh} mesh The mesh ready to get used in the scene
+     */
+
+			this.mesh = new THREE.Mesh( this.geometry, material );
+			this.mesh.matrixAutoUpdate = false;
+			/**
+     * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
+     */
+
+			this.geometryNeedsUpdate = true;
+			this.repaint();
+			/**
+     * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
+     */
+
+			/**
+     * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
+     */
+
+			/**
+     * @member {Function} sliceAccess Function that allow the slice to access right data
+     * @see Volume.extractPerpendicularPlane
+     * @param {Number} i The first coordinate
+     * @param {Number} j The second coordinate
+     * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
+     */
 
+		}
 		/**
    * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
    * @memberof VolumeSlice
    */
-		repaint: function () {
+
+
+		repaint() {
 
 			if ( this.geometryNeedsUpdate ) {
 
@@ -113,33 +113,33 @@
 
 			}
 
-			var iLength = this.iLength,
+			const iLength = this.iLength,
 				jLength = this.jLength,
 				sliceAccess = this.sliceAccess,
 				volume = this.volume,
 				canvas = this.canvasBuffer,
 				ctx = this.ctxBuffer; // get the imageData and pixel array from the canvas
 
-			var imgData = ctx.getImageData( 0, 0, iLength, jLength );
-			var data = imgData.data;
-			var volumeData = volume.data;
-			var upperThreshold = volume.upperThreshold;
-			var lowerThreshold = volume.lowerThreshold;
-			var windowLow = volume.windowLow;
-			var windowHigh = volume.windowHigh; // manipulate some pixel elements
+			const imgData = ctx.getImageData( 0, 0, iLength, jLength );
+			const data = imgData.data;
+			const volumeData = volume.data;
+			const upperThreshold = volume.upperThreshold;
+			const lowerThreshold = volume.lowerThreshold;
+			const windowLow = volume.windowLow;
+			const windowHigh = volume.windowHigh; // manipulate some pixel elements
 
-			var pixelCount = 0;
+			let pixelCount = 0;
 
 			if ( volume.dataType === 'label' ) {
 
 				//this part is currently useless but will be used when colortables will be handled
-				for ( var j = 0; j < jLength; j ++ ) {
+				for ( let j = 0; j < jLength; j ++ ) {
 
-					for ( var i = 0; i < iLength; i ++ ) {
+					for ( let i = 0; i < iLength; i ++ ) {
 
-						var label = volumeData[ sliceAccess( i, j ) ];
+						let label = volumeData[ sliceAccess( i, j ) ];
 						label = label >= this.colorMap.length ? label % this.colorMap.length + 1 : label;
-						var color = this.colorMap[ label ];
+						const color = this.colorMap[ label ];
 						data[ 4 * pixelCount ] = color >> 24 & 0xff;
 						data[ 4 * pixelCount + 1 ] = color >> 16 & 0xff;
 						data[ 4 * pixelCount + 2 ] = color >> 8 & 0xff;
@@ -152,12 +152,12 @@
 
 			} else {
 
-				for ( var j = 0; j < jLength; j ++ ) {
+				for ( let j = 0; j < jLength; j ++ ) {
 
-					for ( var i = 0; i < iLength; i ++ ) {
+					for ( let i = 0; i < iLength; i ++ ) {
 
-						var value = volumeData[ sliceAccess( i, j ) ];
-						var alpha = 0xff; //apply threshold
+						let value = volumeData[ sliceAccess( i, j ) ];
+						let alpha = 0xff; //apply threshold
 
 						alpha = upperThreshold >= value ? lowerThreshold <= value ? alpha : 0 : 0; //apply window level
 
@@ -179,16 +179,17 @@
 			this.ctx.drawImage( canvas, 0, 0, iLength, jLength, 0, 0, this.canvas.width, this.canvas.height );
 			this.mesh.material.map.needsUpdate = true;
 
-		},
-
+		}
 		/**
    * @member {Function} Refresh the geometry according to axis and index
    * @see Volume.extractPerpendicularPlane
    * @memberof VolumeSlice
    */
-		updateGeometry: function () {
 
-			var extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
+
+		updateGeometry() {
+
+			const extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
 			this.sliceAccess = extracted.sliceAccess;
 			this.jLength = extracted.jLength;
 			this.iLength = extracted.iLength;
@@ -215,7 +216,8 @@
 			this.geometryNeedsUpdate = false;
 
 		}
-	};
+
+	}
 
 	THREE.VolumeSlice = VolumeSlice;
 

package/examples/js/modifiers/EdgeSplitModifier.js

@@ -139,13 +139,6 @@
 
 			}
 
-			if ( geometry.isGeometry === true ) {
-
-				console.error( 'THREE.EdgeSplitModifier no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.' );
-				return;
-
-			}
-
 			let hadNormals = false;
 			let oldNormals = null;
 
@@ -166,12 +159,6 @@
 
 			if ( geometry.index == null ) {
 
-				if ( THREE.BufferGeometryUtils === undefined ) {
-
-					throw new Error( 'THREE.EdgeSplitModifier relies on THREE.BufferGeometryUtils' );
-
-				}
-
 				geometry = THREE.BufferGeometryUtils.mergeVertices( geometry );
 
 			}

package/examples/js/modifiers/SimplifyModifier.js

@@ -13,25 +13,8 @@
 
 	class SimplifyModifier {
 
-		constructor() {
-
-			if ( THREE.BufferGeometryUtils === undefined ) {
-
-				throw new Error( 'THREE.SimplifyModifier relies on THREE.BufferGeometryUtils' );
-
-			}
-
-		}
-
 		modify( geometry, count ) {
 
-			if ( geometry.isGeometry === true ) {
-
-				console.error( 'THREE.SimplifyModifier no longer supports Geometry. Use THREE.BufferGeometry instead.' );
-				return;
-
-			}
-
 			geometry = geometry.clone();
 			const attributes = geometry.attributes; // this modifier can only process indexed and non-indexed geomtries with a position attribute
 
@@ -151,7 +134,7 @@
 
 	function removeFromArray( array, object ) {
 
-		var k = array.indexOf( object );
+		const k = array.indexOf( object );
 		if ( k > - 1 ) array.splice( k, 1 );
 
 	}
@@ -323,7 +306,7 @@
 
 		for ( let i = u.faces.length - 1; i >= 0; i -- ) {
 
-			if ( u.faces[ i ].hasVertex( v ) ) {
+			if ( u.faces[ i ] && u.faces[ i ].hasVertex( v ) ) {
 
 				removeFace( u.faces[ i ], faces );
 

package/examples/js/modifiers/TessellateModifier.js

@@ -15,13 +15,6 @@
 
 		modify( geometry ) {
 
-			if ( geometry.isGeometry === true ) {
-
-				console.error( 'THREE.TessellateModifier no longer supports Geometry. Use THREE.BufferGeometry instead.' );
-				return geometry;
-
-			}
-
 			if ( geometry.index !== null ) {
 
 				geometry = geometry.toNonIndexed();

package/examples/js/objects/GroundProjectedEnv.js

@@ -0,0 +1,193 @@
+( function () {
+
+	/**
+ * Ground projected env map adapted from @react-three/drei.
+ * https://github.com/pmndrs/drei/blob/master/src/core/Environment.tsx
+ */
+
+	class GroundProjectedEnv extends THREE.Mesh {
+
+		constructor( texture, options ) {
+
+			const isCubeMap = texture.isCubeTexture;
+			const w = ( isCubeMap ? texture.image[ 0 ]?.width : texture.image.width ) ?? 1024;
+			const cubeSize = w / 4;
+
+			const _lodMax = Math.floor( Math.log2( cubeSize ) );
+
+			const _cubeSize = Math.pow( 2, _lodMax );
+
+			const width = 3 * Math.max( _cubeSize, 16 * 7 );
+			const height = 4 * _cubeSize;
+			const defines = [ isCubeMap ? '#define ENVMAP_TYPE_CUBE' : '', `#define CUBEUV_TEXEL_WIDTH ${1.0 / width}`, `#define CUBEUV_TEXEL_HEIGHT ${1.0 / height}`, `#define CUBEUV_MAX_MIP ${_lodMax}.0` ];
+			const vertexShader =
+    /* glsl */
+    `
+        varying vec3 vWorldPosition;
+
+        void main() 
+        {
+
+            vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );
+            vWorldPosition = worldPosition.xyz;
+            
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+        }
+        `;
+			const fragmentShader = defines.join( '\n' ) +
+    /* glsl */
+    `
+        #define ENVMAP_TYPE_CUBE_UV
+
+        varying vec3 vWorldPosition;
+
+        uniform float radius;
+        uniform float height;
+        uniform float angle;
+
+        #ifdef ENVMAP_TYPE_CUBE
+
+            uniform samplerCube map;
+
+        #else
+
+            uniform sampler2D map;
+
+        #endif
+
+        // From: https://www.shadertoy.com/view/4tsBD7
+        float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r ) 
+        {
+
+            float d = dot ( rd, n );
+            
+            if( d > 0.0 ) { return 1e6; }
+            
+            vec3  o = ro - c;
+            float t = - dot( n, o ) / d;
+            vec3  q = o + rd * t;
+            
+            return ( dot( q, q ) < r * r ) ? t : 1e6;
+
+        }
+
+        // From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm
+        float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra ) 
+        {
+
+            vec3 oc = ro - ce;
+            float b = dot( oc, rd );
+            float c = dot( oc, oc ) - ra * ra;
+            float h = b * b - c;
+            
+            if( h < 0.0 ) { return -1.0; }
+            
+            h = sqrt( h );
+            
+            return - b + h;
+
+        }
+
+        vec3 project() 
+        {
+
+            vec3 p = normalize( vWorldPosition );
+            vec3 camPos = cameraPosition;
+            camPos.y -= height;
+
+            float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );
+            if( intersection > 0.0 ) {
+                
+                vec3 h = vec3( 0.0, - height, 0.0 );
+                float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );
+                p = ( camPos + min( intersection, intersection2 ) * p ) / radius;
+
+            } else {
+
+                p = vec3( 0.0, 1.0, 0.0 );
+
+            }
+
+            return p;
+
+        }
+
+        #include <common>
+        #include <cube_uv_reflection_fragment>
+
+        void main() 
+        {
+
+            vec3 projectedWorldPosition = project();
+            
+            #ifdef ENVMAP_TYPE_CUBE
+
+                vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;
+
+            #else
+
+                vec3 direction = normalize( projectedWorldPosition );
+                vec2 uv = equirectUv( direction );
+                vec3 outcolor = texture2D( map, uv ).rgb;
+
+            #endif
+
+            gl_FragColor = vec4( outcolor, 1.0 );
+
+            #include <tonemapping_fragment>
+            #include <encodings_fragment>
+
+        }
+        `;
+			const uniforms = {
+				map: {
+					value: texture
+				},
+				height: {
+					value: options?.height || 15
+				},
+				radius: {
+					value: options?.radius || 100
+				}
+			};
+			const geometry = new THREE.IcosahedronGeometry( 1, 16 );
+			const material = new THREE.ShaderMaterial( {
+				uniforms,
+				fragmentShader,
+				vertexShader,
+				side: THREE.DoubleSide
+			} );
+			super( geometry, material );
+
+		}
+
+		set radius( radius ) {
+
+			this.material.uniforms.radius.value = radius;
+
+		}
+
+		get radius() {
+
+			return this.material.uniforms.radius.value;
+
+		}
+
+		set height( height ) {
+
+			this.material.uniforms.height.value = height;
+
+		}
+
+		get height() {
+
+			return this.material.uniforms.height.value;
+
+		}
+
+	}
+
+	THREE.GroundProjectedEnv = GroundProjectedEnv;
+
+} )();

package/examples/js/objects/Lensflare.js

@@ -8,6 +8,7 @@
 				opacity: 0,
 				transparent: true
 			} ) );
+			this.isLensflare = true;
 			this.type = 'Lensflare';
 			this.frustumCulled = false;
 			this.renderOrder = Infinity; //
@@ -15,8 +16,8 @@
 			const positionScreen = new THREE.Vector3();
 			const positionView = new THREE.Vector3(); // textures
 
-			const tempMap = new THREE.FramebufferTexture( 16, 16, THREE.RGBFormat );
-			const occlusionMap = new THREE.FramebufferTexture( 16, 16, THREE.RGBFormat ); // material
+			const tempMap = new THREE.FramebufferTexture( 16, 16, THREE.RGBAFormat );
+			const occlusionMap = new THREE.FramebufferTexture( 16, 16, THREE.RGBAFormat ); // material
 
 			const geometry = Lensflare.Geometry;
 			const material1a = new THREE.RawShaderMaterial( {
@@ -232,9 +233,8 @@
 
 		}
 
-	}
+	} //
 
-	Lensflare.prototype.isLensflare = true; //
 
 	class LensflareElement {
 

package/examples/js/objects/LightningStorm.js

@@ -50,7 +50,8 @@
 
 		constructor( stormParams = {} ) {
 
-			super(); // Parameters
+			super();
+			this.isLightningStorm = true; // Parameters
 
 			this.stormParams = stormParams;
 			stormParams.size = stormParams.size !== undefined ? stormParams.size : 1000.0;
@@ -176,9 +177,9 @@
 
 		}
 
-		copy( source ) {
+		copy( source, recursive ) {
 
-			super.copy( source );
+			super.copy( source, recursive );
 			this.stormParams.size = source.stormParams.size;
 			this.stormParams.minHeight = source.stormParams.minHeight;
 			this.stormParams.maxHeight = source.stormParams.maxHeight;
@@ -203,8 +204,6 @@
 
 	}
 
-	LightningStorm.prototype.isLightningStorm = true;
-
 	THREE.LightningStorm = LightningStorm;
 
 } )();