@needle-tools/three 0.145.2 → 0.146.1

package/examples/js/helpers/VertexNormalsHelper.js

@@ -1,11 +1,8 @@
 ( function () {
 
 	const _v1 = new THREE.Vector3();
-
 	const _v2 = new THREE.Vector3();
-
 	const _normalMatrix = new THREE.Matrix3();
-
 	class VertexNormalsHelper extends THREE.LineSegments {
 
 		constructor( object, size = 1, color = 0xff0000 ) {
@@ -20,38 +17,37 @@
 			} ) );
 			this.object = object;
 			this.size = size;
-			this.type = 'VertexNormalsHelper'; //
+			this.type = 'VertexNormalsHelper';
+
+			//
 
 			this.matrixAutoUpdate = false;
 			this.update();
 
 		}
-
 		update() {
 
 			this.object.updateMatrixWorld( true );
-
 			_normalMatrix.getNormalMatrix( this.object.matrixWorld );
-
 			const matrixWorld = this.object.matrixWorld;
-			const position = this.geometry.attributes.position; //
+			const position = this.geometry.attributes.position;
 
-			const objGeometry = this.object.geometry;
+			//
 
+			const objGeometry = this.object.geometry;
 			if ( objGeometry ) {
 
 				const objPos = objGeometry.attributes.position;
 				const objNorm = objGeometry.attributes.normal;
-				let idx = 0; // for simplicity, ignore index and drawcalls, and render every normal
+				let idx = 0;
+
+				// for simplicity, ignore index and drawcalls, and render every normal
 
 				for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
 
 					_v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
-
 					_v2.fromBufferAttribute( objNorm, j );
-
 					_v2.applyMatrix3( _normalMatrix ).normalize().multiplyScalar( this.size ).add( _v1 );
-
 					position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
 					idx = idx + 1;
 					position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
@@ -64,6 +60,12 @@
 			position.needsUpdate = true;
 
 		}
+		dispose() {
+
+			this.geometry.dispose();
+			this.material.dispose();
+
+		}
 
 	}
 

package/examples/js/helpers/VertexTangentsHelper.js

@@ -1,9 +1,7 @@
 ( function () {
 
 	const _v1 = new THREE.Vector3();
-
 	const _v2 = new THREE.Vector3();
-
 	class VertexTangentsHelper extends THREE.LineSegments {
 
 		constructor( object, size = 1, color = 0x00ffff ) {
@@ -18,32 +16,34 @@
 			} ) );
 			this.object = object;
 			this.size = size;
-			this.type = 'VertexTangentsHelper'; //
+			this.type = 'VertexTangentsHelper';
+
+			//
 
 			this.matrixAutoUpdate = false;
 			this.update();
 
 		}
-
 		update() {
 
 			this.object.updateMatrixWorld( true );
 			const matrixWorld = this.object.matrixWorld;
-			const position = this.geometry.attributes.position; //
+			const position = this.geometry.attributes.position;
+
+			//
 
 			const objGeometry = this.object.geometry;
 			const objPos = objGeometry.attributes.position;
 			const objTan = objGeometry.attributes.tangent;
-			let idx = 0; // for simplicity, ignore index and drawcalls, and render every tangent
+			let idx = 0;
+
+			// for simplicity, ignore index and drawcalls, and render every tangent
 
 			for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
 
 				_v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
-
 				_v2.fromBufferAttribute( objTan, j );
-
 				_v2.transformDirection( matrixWorld ).multiplyScalar( this.size ).add( _v1 );
-
 				position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
 				idx = idx + 1;
 				position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
@@ -54,6 +54,12 @@
 			position.needsUpdate = true;
 
 		}
+		dispose() {
+
+			this.geometry.dispose();
+			this.material.dispose();
+
+		}
 
 	}
 

package/examples/js/helpers/ViewHelper.js

@@ -1,7 +1,6 @@
 ( function () {
 
 	const vpTemp = new THREE.Vector4();
-
 	class ViewHelper extends THREE.Object3D {
 
 		constructor( editorCamera, dom ) {
@@ -71,7 +70,6 @@
 				this.updateMatrixWorld();
 				point.set( 0, 0, 1 );
 				point.applyQuaternion( editorCamera.quaternion );
-
 				if ( point.x >= 0 ) {
 
 					posXAxisHelper.material.opacity = 1;
@@ -106,8 +104,9 @@
 					posZAxisHelper.material.opacity = 0.5;
 					negZAxisHelper.material.opacity = 1;
 
-				} //
+				}
 
+				//
 
 				const x = dom.offsetWidth - dim;
 				renderer.clearDepth();
@@ -123,7 +122,6 @@
 			const q1 = new THREE.Quaternion();
 			const q2 = new THREE.Quaternion();
 			let radius = 0;
-
 			this.handleClick = function ( event ) {
 
 				if ( this.animating === true ) return false;
@@ -134,7 +132,6 @@
 				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 ];
@@ -154,13 +151,16 @@
 			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
+				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.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
 
-				editorCamera.quaternion.rotateTowards( targetQuaternion, step );
+				// animate orientation
 
+				editorCamera.quaternion.rotateTowards( targetQuaternion, step );
 				if ( q1.angleTo( q2 ) === 0 ) {
 
 					this.animating = false;
@@ -169,6 +169,27 @@
 
 			};
 
+			this.dispose = function () {
+
+				geometry.dispose();
+				xAxis.material.dispose();
+				yAxis.material.dispose();
+				zAxis.material.dispose();
+				posXAxisHelper.material.map.dispose();
+				posYAxisHelper.material.map.dispose();
+				posZAxisHelper.material.map.dispose();
+				negXAxisHelper.material.map.dispose();
+				negYAxisHelper.material.map.dispose();
+				negZAxisHelper.material.map.dispose();
+				posXAxisHelper.material.dispose();
+				posYAxisHelper.material.dispose();
+				posZAxisHelper.material.dispose();
+				negXAxisHelper.material.dispose();
+				negYAxisHelper.material.dispose();
+				negZAxisHelper.material.dispose();
+
+			};
+
 			function prepareAnimationData( object, focusPoint ) {
 
 				switch ( object.userData.type ) {
@@ -177,37 +198,32 @@
 						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 );
@@ -239,7 +255,6 @@
 				context.closePath();
 				context.fillStyle = color.getStyle();
 				context.fill();
-
 				if ( text !== null ) {
 
 					context.font = '24px Arial';

package/examples/js/interactive/HTMLMesh.js

@@ -12,7 +12,6 @@
 				transparent: true
 			} );
 			super( geometry, material );
-
 			function onEvent( event ) {
 
 				material.map.dispatchDOMEvent( event );
@@ -23,12 +22,12 @@
 			this.addEventListener( 'mousemove', onEvent );
 			this.addEventListener( 'mouseup', onEvent );
 			this.addEventListener( 'click', onEvent );
-
 			this.dispose = function () {
 
 				geometry.dispose();
 				material.dispose();
 				material.map.dispose();
+				canvases.delete( dom );
 				this.removeEventListener( 'mousedown', onEvent );
 				this.removeEventListener( 'mousemove', onEvent );
 				this.removeEventListener( 'mouseup', onEvent );
@@ -39,7 +38,6 @@
 		}
 
 	}
-
 	class HTMLTexture extends THREE.CanvasTexture {
 
 		constructor( dom ) {
@@ -49,8 +47,9 @@
 			this.anisotropy = 16;
 			this.encoding = THREE.sRGBEncoding;
 			this.minFilter = THREE.LinearFilter;
-			this.magFilter = THREE.LinearFilter; // Create an observer on the DOM, and run html2canvas update in the next loop
+			this.magFilter = THREE.LinearFilter;
 
+			// Create an observer on the DOM, and run html2canvas update in the next loop
 			const observer = new MutationObserver( () => {
 
 				if ( ! this.scheduleUpdate ) {
@@ -71,7 +70,6 @@
 			this.observer = observer;
 
 		}
-
 		dispatchDOMEvent( event ) {
 
 			if ( event.data ) {
@@ -81,7 +79,6 @@
 			}
 
 		}
-
 		update() {
 
 			this.image = html2canvas( this.dom );
@@ -89,7 +86,6 @@
 			this.scheduleUpdate = null;
 
 		}
-
 		dispose() {
 
 			if ( this.observer ) {
@@ -103,21 +99,19 @@
 
 		}
 
-	} //
+	}
 
+	//
 
 	const canvases = new WeakMap();
-
 	function html2canvas( element ) {
 
 		const range = document.createRange();
 		const color = new THREE.Color();
-
 		function Clipper( context ) {
 
 			const clips = [];
 			let isClipping = false;
-
 			function doClip() {
 
 				if ( isClipping ) {
@@ -132,7 +126,6 @@
 					minY = - Infinity;
 				let maxX = Infinity,
 					maxY = Infinity;
-
 				for ( let i = 0; i < clips.length; i ++ ) {
 
 					const clip = clips[ i ];
@@ -206,7 +199,6 @@
 			const borderWidth = style[ which + 'Width' ];
 			const borderStyle = style[ which + 'Style' ];
 			const borderColor = style[ which + 'Color' ];
-
 			if ( borderWidth !== '0px' && borderStyle !== 'none' && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)' ) {
 
 				context.strokeStyle = borderColor;
@@ -226,10 +218,10 @@
 				y = 0,
 				width = 0,
 				height = 0;
-
 			if ( element.nodeType === Node.TEXT_NODE ) {
 
 				// text
+
 				range.selectNode( element );
 				const rect = range.getBoundingClientRect();
 				x = rect.left - offset.left - 0.5;
@@ -260,23 +252,24 @@
 				y = rect.top - offset.top - 0.5;
 				width = rect.width;
 				height = rect.height;
-				style = window.getComputedStyle( element ); // Get the border of the element used for fill and border
+				style = window.getComputedStyle( element );
+
+				// Get the border of the element used for fill and border
 
 				buildRectPath( x, y, width, height, parseFloat( style.borderRadius ) );
 				const backgroundColor = style.backgroundColor;
-
 				if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
 
 					context.fillStyle = backgroundColor;
 					context.fill();
 
-				} // If all the borders match then stroke the round rectangle
+				}
 
+				// If all the borders match then stroke the round rectangle
 
 				const borders = [ 'borderTop', 'borderLeft', 'borderBottom', 'borderRight' ];
 				let match = true;
 				let prevBorder = null;
-
 				for ( const border of borders ) {
 
 					if ( prevBorder !== null ) {
@@ -293,8 +286,8 @@
 				if ( match === true ) {
 
 					// They all match so stroke the rectangle from before allows for border-radius
-					const width = parseFloat( style.borderTopWidth );
 
+					const width = parseFloat( style.borderTopWidth );
 					if ( style.borderTopWidth !== '0px' && style.borderTopStyle !== 'none' && style.borderTopColor !== 'transparent' && style.borderTopColor !== 'rgba(0, 0, 0, 0)' ) {
 
 						context.strokeStyle = style.borderTopColor;
@@ -306,6 +299,7 @@
 				} else {
 
 					// Otherwise draw individual borders
+
 					drawBorder( style, 'borderTop', x, y, width, 0 );
 					drawBorder( style, 'borderLeft', x, y, 0, height );
 					drawBorder( style, 'borderBottom', x, y + height, width, 0 );
@@ -320,7 +314,6 @@
 					color.set( accentColor );
 					const luminance = Math.sqrt( 0.299 * color.r ** 2 + 0.587 * color.g ** 2 + 0.114 * color.b ** 2 );
 					const accentTextColor = luminance < 0.5 ? 'white' : '#111111';
-
 					if ( element.type === 'radio' ) {
 
 						buildRectPath( x, y, width, height, height );
@@ -329,7 +322,6 @@
 						context.lineWidth = 1;
 						context.fill();
 						context.stroke();
-
 						if ( element.checked ) {
 
 							buildRectPath( x + 2, y + 2, width - 4, height - 4, height );
@@ -351,7 +343,6 @@
 						context.lineWidth = 1;
 						context.stroke();
 						context.fill();
-
 						if ( element.checked ) {
 
 							const currentTextAlign = context.textAlign;
@@ -404,13 +395,13 @@
 				}
 
 			}
+
 			/*
     // debug
     context.strokeStyle = '#' + Math.random().toString( 16 ).slice( - 3 );
     context.strokeRect( x - 0.5, y - 0.5, width + 1, height + 1 );
     */
 
-
 			const isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
 			if ( isClipping ) clipper.add( {
 				x: x,
@@ -418,7 +409,6 @@
 				width: width,
 				height: height
 			} );
-
 			for ( let i = 0; i < element.childNodes.length; i ++ ) {
 
 				drawElement( element.childNodes[ i ], style );
@@ -431,7 +421,6 @@
 
 		const offset = element.getBoundingClientRect();
 		let canvas = canvases.get( element );
-
 		if ( canvas === undefined ) {
 
 			canvas = document.createElement( 'canvas' );
@@ -441,12 +430,15 @@
 
 		}
 
-		const context = canvas.getContext( '2d'
-			/*, { alpha: false }*/
-		);
-		const clipper = new Clipper( context ); // console.time( 'drawElement' );
+		const context = canvas.getContext( '2d' /*, { alpha: false }*/ );
+
+		const clipper = new Clipper( context );
+
+		// console.time( 'drawElement' );
 
-		drawElement( element ); // console.timeEnd( 'drawElement' );
+		drawElement( element );
+
+		// console.timeEnd( 'drawElement' );
 
 		return canvas;
 
@@ -463,17 +455,14 @@
 		const rect = element.getBoundingClientRect();
 		x = x * rect.width + rect.left;
 		y = y * rect.height + rect.top;
-
 		function traverse( element ) {
 
 			if ( element.nodeType !== Node.TEXT_NODE && element.nodeType !== Node.COMMENT_NODE ) {
 
 				const rect = element.getBoundingClientRect();
-
 				if ( x > rect.left && x < rect.right && y > rect.top && y < rect.bottom ) {
 
 					element.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
-
 					if ( element instanceof HTMLInputElement && element.type === 'range' && ( event === 'mousedown' || event === 'click' ) ) {
 
 						const [ min, max ] = [ 'min', 'max' ].map( property => parseFloat( element[ property ] ) );

package/examples/js/interactive/InteractiveGroup.js

@@ -1,12 +1,10 @@
 ( function () {
 
 	const _pointer = new THREE.Vector2();
-
 	const _event = {
 		type: '',
 		data: _pointer
 	};
-
 	class InteractiveGroup extends THREE.Group {
 
 		constructor( renderer, camera ) {
@@ -14,10 +12,11 @@
 			super();
 			const scope = this;
 			const raycaster = new THREE.Raycaster();
-			const tempMatrix = new THREE.Matrix4(); // Pointer Events
+			const tempMatrix = new THREE.Matrix4();
 
-			const element = renderer.domElement;
+			// Pointer Events
 
+			const element = renderer.domElement;
 			function onPointerEvent( event ) {
 
 				event.stopPropagation();
@@ -26,16 +25,13 @@
 				_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
 				raycaster.setFromCamera( _pointer, camera );
 				const intersects = raycaster.intersectObjects( scope.children, false );
-
 				if ( intersects.length > 0 ) {
 
 					const intersection = intersects[ 0 ];
 					const object = intersection.object;
 					const uv = intersection.uv;
 					_event.type = event.type;
-
 					_event.data.set( uv.x, 1 - uv.y );
-
 					object.dispatchEvent( _event );
 
 				}
@@ -48,7 +44,9 @@
 			element.addEventListener( 'mousedown', onPointerEvent );
 			element.addEventListener( 'mouseup', onPointerEvent );
 			element.addEventListener( 'mousemove', onPointerEvent );
-			element.addEventListener( 'click', onPointerEvent ); // WebXR Controller Events
+			element.addEventListener( 'click', onPointerEvent );
+
+			// WebXR Controller Events
 			// TODO: Dispatch pointerevents too
 
 			const events = {
@@ -57,7 +55,6 @@
 				'selectstart': 'mousedown',
 				'selectend': 'mouseup'
 			};
-
 			function onXRControllerEvent( event ) {
 
 				const controller = event.target;
@@ -65,16 +62,13 @@
 				raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
 				raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
 				const intersections = raycaster.intersectObjects( scope.children, false );
-
 				if ( intersections.length > 0 ) {
 
 					const intersection = intersections[ 0 ];
 					const object = intersection.object;
 					const uv = intersection.uv;
 					_event.type = events[ event.type ];
-
 					_event.data.set( uv.x, 1 - uv.y );
-
 					object.dispatchEvent( _event );
 
 				}