super-three 0.137.0 → 0.141.0

package/examples/js/exporters/PLYExporter.js

@@ -103,6 +103,7 @@
 				}
 
 			} );
+			const tempColor = new THREE.Color();
 			const includeIndices = excludeAttributes.indexOf( 'index' ) === - 1;
 			includeNormals = includeNormals && excludeAttributes.indexOf( 'normal' ) === - 1;
 			includeColors = includeColors && excludeAttributes.indexOf( 'color' ) === - 1;
@@ -184,9 +185,7 @@
 
 					for ( let i = 0, l = vertices.count; i < l; i ++ ) {
 
-						vertex.x = vertices.getX( i );
-						vertex.y = vertices.getY( i );
-						vertex.z = vertices.getZ( i );
+						vertex.fromBufferAttribute( vertices, i );
 						vertex.applyMatrix4( mesh.matrixWorld ); // Position information
 
 						output.setFloat32( vOffset, vertex.x, options.littleEndian );
@@ -200,9 +199,7 @@
 
 							if ( normals != null ) {
 
-								vertex.x = normals.getX( i );
-								vertex.y = normals.getY( i );
-								vertex.z = normals.getZ( i );
+								vertex.fromBufferAttribute( normals, i );
 								vertex.applyMatrix3( normalMatrixWorld ).normalize();
 								output.setFloat32( vOffset, vertex.x, options.littleEndian );
 								vOffset += 4;
@@ -234,7 +231,7 @@
 								output.setFloat32( vOffset, uvs.getY( i ), options.littleEndian );
 								vOffset += 4;
 
-							} else if ( includeUVs !== false ) {
+							} else {
 
 								output.setFloat32( vOffset, 0, options.littleEndian );
 								vOffset += 4;
@@ -243,18 +240,19 @@
 
 							}
 
-						} // Color information
+						} // THREE.Color information
 
 
 						if ( includeColors === true ) {
 
 							if ( colors != null ) {
 
-								output.setUint8( vOffset, Math.floor( colors.getX( i ) * 255 ) );
+								tempColor.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+								output.setUint8( vOffset, Math.floor( tempColor.r * 255 ) );
 								vOffset += 1;
-								output.setUint8( vOffset, Math.floor( colors.getY( i ) * 255 ) );
+								output.setUint8( vOffset, Math.floor( tempColor.g * 255 ) );
 								vOffset += 1;
-								output.setUint8( vOffset, Math.floor( colors.getZ( i ) * 255 ) );
+								output.setUint8( vOffset, Math.floor( tempColor.b * 255 ) );
 								vOffset += 1;
 
 							} else {
@@ -334,9 +332,7 @@
 
 					for ( let i = 0, l = vertices.count; i < l; i ++ ) {
 
-						vertex.x = vertices.getX( i );
-						vertex.y = vertices.getY( i );
-						vertex.z = vertices.getZ( i );
+						vertex.fromBufferAttribute( vertices, i );
 						vertex.applyMatrix4( mesh.matrixWorld ); // Position information
 
 						let line = vertex.x + ' ' + vertex.y + ' ' + vertex.z; // Normal information
@@ -345,9 +341,7 @@
 
 							if ( normals != null ) {
 
-								vertex.x = normals.getX( i );
-								vertex.y = normals.getY( i );
-								vertex.z = normals.getZ( i );
+								vertex.fromBufferAttribute( normals, i );
 								vertex.applyMatrix3( normalMatrixWorld ).normalize();
 								line += ' ' + vertex.x + ' ' + vertex.y + ' ' + vertex.z;
 
@@ -366,20 +360,21 @@
 
 								line += ' ' + uvs.getX( i ) + ' ' + uvs.getY( i );
 
-							} else if ( includeUVs !== false ) {
+							} else {
 
 								line += ' 0 0';
 
 							}
 
-						} // Color information
+						} // THREE.Color information
 
 
 						if ( includeColors === true ) {
 
 							if ( colors != null ) {
 
-								line += ' ' + Math.floor( colors.getX( i ) * 255 ) + ' ' + Math.floor( colors.getY( i ) * 255 ) + ' ' + Math.floor( colors.getZ( i ) * 255 );
+								tempColor.fromBufferAttribute( colors, i ).convertLinearToSRGB();
+								line += ' ' + Math.floor( tempColor.r * 255 ) + ' ' + Math.floor( tempColor.g * 255 ) + ' ' + Math.floor( tempColor.b * 255 );
 
 							} else {
 

package/examples/js/exporters/USDZExporter.js

@@ -375,6 +375,7 @@ ${array.join( '' )}
             float outputs:g
             float outputs:b
             float3 outputs:rgb
+            ${material.transparent || material.alphaTest > 0.0 ? 'float outputs:a' : ''}
         }`;
 
 		}
@@ -382,6 +383,18 @@ ${array.join( '' )}
 		if ( material.map !== null ) {
 
 			inputs.push( `${pad}color3f inputs:diffuseColor.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:rgb>` );
+
+			if ( material.transparent ) {
+
+				inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:a>` );
+
+			} else if ( material.alphaTest > 0.0 ) {
+
+				inputs.push( `${pad}float inputs:opacity.connect = </Materials/Material_${material.id}/Texture_${material.map.id}_diffuse.outputs:a>` );
+				inputs.push( `${pad}float inputs:opacityThreshold = ${material.alphaTest}` );
+
+			}
+
 			samplers.push( buildTexture( material.map, 'diffuse', material.color ) );
 
 		} else {

package/examples/js/geometries/DecalGeometry.js

@@ -45,13 +45,6 @@
 				const vertex = new THREE.Vector3();
 				const normal = new THREE.Vector3(); // handle different geometry types
 
-				if ( mesh.geometry.isGeometry === true ) {
-
-					console.error( 'THREE.DecalGeometry no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.' );
-					return;
-
-				}
-
 				const geometry = mesh.geometry;
 				const positionAttribute = geometry.attributes.position;
 				const normalAttribute = geometry.attributes.normal; // first, create an array of 'DecalVertex' objects

package/examples/js/geometries/LightningStrike.js

@@ -106,6 +106,7 @@
 		constructor( rayParameters = {} ) {
 
 			super();
+			this.isLightningStrike = true;
 			this.type = 'LightningStrike'; // Set parameters, and set undefined parameters to default values
 
 			this.init( LightningStrike.copyParameters( rayParameters, rayParameters ) ); // Creates and populates the mesh
@@ -856,9 +857,8 @@
 
 		}
 
-	}
+	} // Ray states
 
-	LightningStrike.prototype.isLightningStrike = true; // Ray states
 
 	LightningStrike.RAY_INITIALIZED = 0;
 	LightningStrike.RAY_UNBORN = 1;

package/examples/js/geometries/ParametricGeometries.js

@@ -173,9 +173,9 @@
 
 				u *= Math.PI;
 				v *= 2 * Math.PI;
-				var x = size * Math.sin( u ) * Math.cos( v );
-				var y = size * Math.sin( u ) * Math.sin( v );
-				var z = size * Math.cos( u );
+				const x = size * Math.sin( u ) * Math.cos( v );
+				const y = size * Math.sin( u ) * Math.sin( v );
+				const z = size * Math.cos( u );
 				target.set( x, y, z );
 
 			}

package/examples/js/helpers/OctreeHelper.js

@@ -0,0 +1,74 @@
+( function () {
+
+	class OctreeHelper extends THREE.LineSegments {
+
+		constructor( octree, color = 0xffff00 ) {
+
+			const vertices = [];
+
+			function traverse( tree ) {
+
+				for ( let i = 0; i < tree.length; i ++ ) {
+
+					const min = tree[ i ].box.min;
+					const max = tree[ i ].box.max;
+					vertices.push( max.x, max.y, max.z );
+					vertices.push( min.x, max.y, max.z ); // 0, 1
+
+					vertices.push( min.x, max.y, max.z );
+					vertices.push( min.x, min.y, max.z ); // 1, 2
+
+					vertices.push( min.x, min.y, max.z );
+					vertices.push( max.x, min.y, max.z ); // 2, 3
+
+					vertices.push( max.x, min.y, max.z );
+					vertices.push( max.x, max.y, max.z ); // 3, 0
+
+					vertices.push( max.x, max.y, min.z );
+					vertices.push( min.x, max.y, min.z ); // 4, 5
+
+					vertices.push( min.x, max.y, min.z );
+					vertices.push( min.x, min.y, min.z ); // 5, 6
+
+					vertices.push( min.x, min.y, min.z );
+					vertices.push( max.x, min.y, min.z ); // 6, 7
+
+					vertices.push( max.x, min.y, min.z );
+					vertices.push( max.x, max.y, min.z ); // 7, 4
+
+					vertices.push( max.x, max.y, max.z );
+					vertices.push( max.x, max.y, min.z ); // 0, 4
+
+					vertices.push( min.x, max.y, max.z );
+					vertices.push( min.x, max.y, min.z ); // 1, 5
+
+					vertices.push( min.x, min.y, max.z );
+					vertices.push( min.x, min.y, min.z ); // 2, 6
+
+					vertices.push( max.x, min.y, max.z );
+					vertices.push( max.x, min.y, min.z ); // 3, 7
+
+					traverse( tree[ i ].subTrees );
+
+				}
+
+			}
+
+			traverse( octree.subTrees );
+			const geometry = new THREE.BufferGeometry();
+			geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+			super( geometry, new THREE.LineBasicMaterial( {
+				color: color,
+				toneMapped: false
+			} ) );
+			this.octree = octree;
+			this.color = color;
+			this.type = 'OctreeHelper';
+
+		}
+
+	}
+
+	THREE.OctreeHelper = OctreeHelper;
+
+} )();

package/examples/js/helpers/VertexNormalsHelper.js

@@ -10,22 +10,8 @@
 
 		constructor( object, size = 1, color = 0xff0000 ) {
 
-			let nNormals = 0;
-			const objGeometry = object.geometry;
-
-			if ( objGeometry && objGeometry.isGeometry ) {
-
-				console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use THREE.BufferGeometry instead.' );
-				return;
-
-			} else if ( objGeometry && objGeometry.isBufferGeometry ) {
-
-				nNormals = objGeometry.attributes.normal.count;
-
-			} //
-
-
 			const geometry = new THREE.BufferGeometry();
+			const nNormals = object.geometry.attributes.normal.count;
 			const positions = new THREE.Float32BufferAttribute( nNormals * 2 * 3, 3 );
 			geometry.setAttribute( 'position', positions );
 			super( geometry, new THREE.LineBasicMaterial( {
@@ -52,12 +38,7 @@
 
 			const objGeometry = this.object.geometry;
 
-			if ( objGeometry && objGeometry.isGeometry ) {
-
-				console.error( 'THREE.VertexNormalsHelper no longer supports Geometry. Use THREE.BufferGeometry instead.' );
-				return;
-
-			} else if ( objGeometry && objGeometry.isBufferGeometry ) {
+			if ( objGeometry ) {
 
 				const objPos = objGeometry.attributes.position;
 				const objNorm = objGeometry.attributes.normal;
@@ -65,9 +46,9 @@
 
 				for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
 
-					_v1.set( objPos.getX( j ), objPos.getY( j ), objPos.getZ( j ) ).applyMatrix4( matrixWorld );
+					_v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
 
-					_v2.set( objNorm.getX( j ), objNorm.getY( j ), objNorm.getZ( j ) );
+					_v2.fromBufferAttribute( objNorm, j );
 
 					_v2.applyMatrix3( _normalMatrix ).normalize().multiplyScalar( this.size ).add( _v1 );
 

package/examples/js/helpers/VertexTangentsHelper.js

@@ -8,18 +8,8 @@
 
 		constructor( object, size = 1, color = 0x00ffff ) {
 
-			const objGeometry = object.geometry;
-
-			if ( ! ( objGeometry && objGeometry.isBufferGeometry ) ) {
-
-				console.error( 'THREE.VertexTangentsHelper: geometry not an instance of THREE.BufferGeometry.', objGeometry );
-				return;
-
-			}
-
-			const nTangents = objGeometry.attributes.tangent.count; //
-
 			const geometry = new THREE.BufferGeometry();
+			const nTangents = object.geometry.attributes.tangent.count;
 			const positions = new THREE.Float32BufferAttribute( nTangents * 2 * 3, 3 );
 			geometry.setAttribute( 'position', positions );
 			super( geometry, new THREE.LineBasicMaterial( {
@@ -48,9 +38,9 @@
 
 			for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
 
-				_v1.set( objPos.getX( j ), objPos.getY( j ), objPos.getZ( j ) ).applyMatrix4( matrixWorld );
+				_v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
 
-				_v2.set( objTan.getX( j ), objTan.getY( j ), objTan.getZ( j ) );
+				_v2.fromBufferAttribute( objTan, j );
 
 				_v2.transformDirection( matrixWorld ).multiplyScalar( this.size ).add( _v1 );
 

package/examples/js/helpers/ViewHelper.js

@@ -0,0 +1,266 @@
+( function () {
+
+	const vpTemp = new THREE.Vector4();
+
+	class ViewHelper extends THREE.Object3D {
+
+		constructor( editorCamera, dom ) {
+
+			super();
+			this.isViewHelper = true;
+			this.animating = false;
+			this.controls = null;
+			const color1 = new THREE.Color( '#ff3653' );
+			const color2 = new THREE.Color( '#8adb00' );
+			const color3 = new THREE.Color( '#2c8fff' );
+			const interactiveObjects = [];
+			const raycaster = new THREE.Raycaster();
+			const mouse = new THREE.Vector2();
+			const dummy = new THREE.Object3D();
+			const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
+			camera.position.set( 0, 0, 2 );
+			const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
+			const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
+			const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
+			const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
+			yAxis.rotation.z = Math.PI / 2;
+			zAxis.rotation.y = - Math.PI / 2;
+			this.add( xAxis );
+			this.add( zAxis );
+			this.add( yAxis );
+			const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
+			posXAxisHelper.userData.type = 'posX';
+			const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
+			posYAxisHelper.userData.type = 'posY';
+			const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
+			posZAxisHelper.userData.type = 'posZ';
+			const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
+			negXAxisHelper.userData.type = 'negX';
+			const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
+			negYAxisHelper.userData.type = 'negY';
+			const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
+			negZAxisHelper.userData.type = 'negZ';
+			posXAxisHelper.position.x = 1;
+			posYAxisHelper.position.y = 1;
+			posZAxisHelper.position.z = 1;
+			negXAxisHelper.position.x = - 1;
+			negXAxisHelper.scale.setScalar( 0.8 );
+			negYAxisHelper.position.y = - 1;
+			negYAxisHelper.scale.setScalar( 0.8 );
+			negZAxisHelper.position.z = - 1;
+			negZAxisHelper.scale.setScalar( 0.8 );
+			this.add( posXAxisHelper );
+			this.add( posYAxisHelper );
+			this.add( posZAxisHelper );
+			this.add( negXAxisHelper );
+			this.add( negYAxisHelper );
+			this.add( negZAxisHelper );
+			interactiveObjects.push( posXAxisHelper );
+			interactiveObjects.push( posYAxisHelper );
+			interactiveObjects.push( posZAxisHelper );
+			interactiveObjects.push( negXAxisHelper );
+			interactiveObjects.push( negYAxisHelper );
+			interactiveObjects.push( negZAxisHelper );
+			const point = new THREE.Vector3();
+			const dim = 128;
+			const turnRate = 2 * Math.PI; // turn rate in angles per second
+
+			this.render = function ( renderer ) {
+
+				this.quaternion.copy( editorCamera.quaternion ).invert();
+				this.updateMatrixWorld();
+				point.set( 0, 0, 1 );
+				point.applyQuaternion( editorCamera.quaternion );
+
+				if ( point.x >= 0 ) {
+
+					posXAxisHelper.material.opacity = 1;
+					negXAxisHelper.material.opacity = 0.5;
+
+				} else {
+
+					posXAxisHelper.material.opacity = 0.5;
+					negXAxisHelper.material.opacity = 1;
+
+				}
+
+				if ( point.y >= 0 ) {
+
+					posYAxisHelper.material.opacity = 1;
+					negYAxisHelper.material.opacity = 0.5;
+
+				} else {
+
+					posYAxisHelper.material.opacity = 0.5;
+					negYAxisHelper.material.opacity = 1;
+
+				}
+
+				if ( point.z >= 0 ) {
+
+					posZAxisHelper.material.opacity = 1;
+					negZAxisHelper.material.opacity = 0.5;
+
+				} else {
+
+					posZAxisHelper.material.opacity = 0.5;
+					negZAxisHelper.material.opacity = 1;
+
+				} //
+
+
+				const x = dom.offsetWidth - dim;
+				renderer.clearDepth();
+				renderer.getViewport( vpTemp );
+				renderer.setViewport( x, 0, dim, dim );
+				renderer.render( this, camera );
+				renderer.setViewport( vpTemp.x, vpTemp.y, vpTemp.z, vpTemp.w );
+
+			};
+
+			const targetPosition = new THREE.Vector3();
+			const targetQuaternion = new THREE.Quaternion();
+			const q1 = new THREE.Quaternion();
+			const q2 = new THREE.Quaternion();
+			let radius = 0;
+
+			this.handleClick = function ( event ) {
+
+				if ( this.animating === true ) return false;
+				const rect = dom.getBoundingClientRect();
+				const offsetX = rect.left + ( dom.offsetWidth - dim );
+				const offsetY = rect.top + ( dom.offsetHeight - dim );
+				mouse.x = ( event.clientX - offsetX ) / ( rect.width - offsetX ) * 2 - 1;
+				mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
+				raycaster.setFromCamera( mouse, camera );
+				const intersects = raycaster.intersectObjects( interactiveObjects );
+
+				if ( intersects.length > 0 ) {
+
+					const intersection = intersects[ 0 ];
+					const object = intersection.object;
+					prepareAnimationData( object, this.controls.center );
+					this.animating = true;
+					return true;
+
+				} else {
+
+					return false;
+
+				}
+
+			};
+
+			this.update = function ( delta ) {
+
+				const step = delta * turnRate;
+				const focusPoint = this.controls.center; // animate position by doing a slerp and then scaling the position on the unit sphere
+
+				q1.rotateTowards( q2, step );
+				editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint ); // animate orientation
+
+				editorCamera.quaternion.rotateTowards( targetQuaternion, step );
+
+				if ( q1.angleTo( q2 ) === 0 ) {
+
+					this.animating = false;
+
+				}
+
+			};
+
+			function prepareAnimationData( object, focusPoint ) {
+
+				switch ( object.userData.type ) {
+
+					case 'posX':
+						targetPosition.set( 1, 0, 0 );
+						targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
+						break;
+
+					case 'posY':
+						targetPosition.set( 0, 1, 0 );
+						targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
+						break;
+
+					case 'posZ':
+						targetPosition.set( 0, 0, 1 );
+						targetQuaternion.setFromEuler( new THREE.Euler() );
+						break;
+
+					case 'negX':
+						targetPosition.set( - 1, 0, 0 );
+						targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
+						break;
+
+					case 'negY':
+						targetPosition.set( 0, - 1, 0 );
+						targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
+						break;
+
+					case 'negZ':
+						targetPosition.set( 0, 0, - 1 );
+						targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
+						break;
+
+					default:
+						console.error( 'ViewHelper: Invalid axis.' );
+
+				} //
+
+
+				radius = editorCamera.position.distanceTo( focusPoint );
+				targetPosition.multiplyScalar( radius ).add( focusPoint );
+				dummy.position.copy( focusPoint );
+				dummy.lookAt( editorCamera.position );
+				q1.copy( dummy.quaternion );
+				dummy.lookAt( targetPosition );
+				q2.copy( dummy.quaternion );
+
+			}
+
+			function getAxisMaterial( color ) {
+
+				return new THREE.MeshBasicMaterial( {
+					color: color,
+					toneMapped: false
+				} );
+
+			}
+
+			function getSpriteMaterial( color, text = null ) {
+
+				const canvas = document.createElement( 'canvas' );
+				canvas.width = 64;
+				canvas.height = 64;
+				const context = canvas.getContext( '2d' );
+				context.beginPath();
+				context.arc( 32, 32, 16, 0, 2 * Math.PI );
+				context.closePath();
+				context.fillStyle = color.getStyle();
+				context.fill();
+
+				if ( text !== null ) {
+
+					context.font = '24px Arial';
+					context.textAlign = 'center';
+					context.fillStyle = '#000000';
+					context.fillText( text, 32, 41 );
+
+				}
+
+				const texture = new THREE.CanvasTexture( canvas );
+				return new THREE.SpriteMaterial( {
+					map: texture,
+					toneMapped: false
+				} );
+
+			}
+
+		}
+
+	}
+
+	THREE.ViewHelper = ViewHelper;
+
+} )();