@needle-tools/three 0.162.12 → 0.169.2

package/examples/jsm/helpers/LightProbeHelperGPU.js

@@ -0,0 +1,65 @@
+import {
+	Mesh,
+	NodeMaterial,
+	SphereGeometry
+} from 'three';
+import { float, Fn, getShIrradianceAt, normalWorld, uniformArray, uniform, vec4 } from 'three/tsl';
+
+class LightProbeHelper extends Mesh {
+
+	constructor( lightProbe, size = 1 ) {
+
+		const sh = uniformArray( lightProbe.sh.coefficients );
+		const intensity = uniform( lightProbe.intensity );
+
+		const RECIPROCAL_PI = float( 1 / Math.PI );
+
+		const fragmentNode = Fn( () => {
+
+			const irradiance = getShIrradianceAt( normalWorld, sh );
+
+			const outgoingLight = RECIPROCAL_PI.mul( irradiance ).mul( intensity );
+
+			return vec4( outgoingLight, 1.0 );
+
+		} )();
+
+		const material = new NodeMaterial();
+		material.fragmentNode = fragmentNode;
+
+		const geometry = new SphereGeometry( 1, 32, 16 );
+
+		super( geometry, material );
+
+		this.lightProbe = lightProbe;
+		this.size = size;
+		this.type = 'LightProbeHelper';
+
+		this._intensity = intensity;
+		this._sh = sh;
+
+		this.onBeforeRender();
+
+	}
+
+	dispose() {
+
+		this.geometry.dispose();
+		this.material.dispose();
+
+	}
+
+	onBeforeRender() {
+
+		this.position.copy( this.lightProbe.position );
+
+		this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );
+
+		this._intensity.value = this.lightProbe.intensity;
+		this._sh.array = this.lightProbe.sh.coefficients;
+
+	}
+
+}
+
+export { LightProbeHelper };

package/examples/jsm/helpers/ViewHelper.js

@@ -1,5 +1,5 @@
 import {
-	BoxGeometry,
+	CylinderGeometry,
 	CanvasTexture,
 	Color,
 	Euler,
@@ -11,6 +11,7 @@ import {
 	Raycaster,
 	Sprite,
 	SpriteMaterial,
+	SRGBColorSpace,
 	Vector2,
 	Vector3,
 	Vector4
@@ -27,9 +28,12 @@ class ViewHelper extends Object3D {
 		this.animating = false;
 		this.center = new Vector3();
 
-		const color1 = new Color( '#ff3653' );
-		const color2 = new Color( '#8adb00' );
-		const color3 = new Color( '#2c8fff' );
+		const color1 = new Color( '#ff4466' );
+		const color2 = new Color( '#88ff44' );
+		const color3 = new Color( '#4488ff' );
+		const color4 = new Color( '#000000' );
+
+		const options = {};
 
 		const interactiveObjects = [];
 		const raycaster = new Raycaster();
@@ -39,7 +43,7 @@ class ViewHelper extends Object3D {
 		const orthoCamera = new OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
 		orthoCamera.position.set( 0, 0, 2 );
 
-		const geometry = new BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
+		const geometry = new CylinderGeometry( 0.04, 0.04, 0.8, 5 ).rotateZ( - Math.PI / 2 ).translate( 0.4, 0, 0 );
 
 		const xAxis = new Mesh( geometry, getAxisMaterial( color1 ) );
 		const yAxis = new Mesh( geometry, getAxisMaterial( color2 ) );
@@ -52,28 +56,35 @@ class ViewHelper extends Object3D {
 		this.add( zAxis );
 		this.add( yAxis );
 
-		const posXAxisHelper = new Sprite( getSpriteMaterial( color1, 'X' ) );
-		posXAxisHelper.userData.type = 'posX';
-		const posYAxisHelper = new Sprite( getSpriteMaterial( color2, 'Y' ) );
-		posYAxisHelper.userData.type = 'posY';
-		const posZAxisHelper = new Sprite( getSpriteMaterial( color3, 'Z' ) );
-		posZAxisHelper.userData.type = 'posZ';
-		const negXAxisHelper = new Sprite( getSpriteMaterial( color1 ) );
-		negXAxisHelper.userData.type = 'negX';
-		const negYAxisHelper = new Sprite( getSpriteMaterial( color2 ) );
-		negYAxisHelper.userData.type = 'negY';
-		const negZAxisHelper = new Sprite( getSpriteMaterial( color3 ) );
-		negZAxisHelper.userData.type = 'negZ';
+		const spriteMaterial1 = getSpriteMaterial( color1 );
+		const spriteMaterial2 = getSpriteMaterial( color2 );
+		const spriteMaterial3 = getSpriteMaterial( color3 );
+		const spriteMaterial4 = getSpriteMaterial( color4 );
+
+		const posXAxisHelper = new Sprite( spriteMaterial1 );
+		const posYAxisHelper = new Sprite( spriteMaterial2 );
+		const posZAxisHelper = new Sprite( spriteMaterial3 );
+		const negXAxisHelper = new Sprite( spriteMaterial4 );
+		const negYAxisHelper = new Sprite( spriteMaterial4 );
+		const negZAxisHelper = new Sprite( spriteMaterial4 );
 
 		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 );
+
+		negXAxisHelper.material.opacity = 0.2;
+		negYAxisHelper.material.opacity = 0.2;
+		negZAxisHelper.material.opacity = 0.2;
+
+		posXAxisHelper.userData.type = 'posX';
+		posYAxisHelper.userData.type = 'posY';
+		posZAxisHelper.userData.type = 'posZ';
+		negXAxisHelper.userData.type = 'negX';
+		negYAxisHelper.userData.type = 'negY';
+		negZAxisHelper.userData.type = 'negZ';
 
 		this.add( posXAxisHelper );
 		this.add( posYAxisHelper );
@@ -101,42 +112,6 @@ class ViewHelper extends Object3D {
 			point.set( 0, 0, 1 );
 			point.applyQuaternion( camera.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 = domElement.offsetWidth - dim;
@@ -193,6 +168,26 @@ class ViewHelper extends Object3D {
 
 		};
 
+		this.setLabels = function ( labelX, labelY, labelZ ) {
+
+			options.labelX = labelX;
+			options.labelY = labelY;
+			options.labelZ = labelZ;
+
+			updateLabels();
+
+		};
+
+		this.setLabelStyle = function ( font, color, radius ) {
+
+			options.font = font;
+			options.color = color;
+			options.radius = radius;
+
+			updateLabels();
+
+		};
+
 		this.update = function ( delta ) {
 
 			const step = delta * turnRate;
@@ -298,7 +293,9 @@ class ViewHelper extends Object3D {
 
 		}
 
-		function getSpriteMaterial( color, text = null ) {
+		function getSpriteMaterial( color, text ) {
+
+			const { font = '24px Arial', color: labelColor = '#000000', radius = 14 } = options;
 
 			const canvas = document.createElement( 'canvas' );
 			canvas.width = 64;
@@ -306,26 +303,43 @@ class ViewHelper extends Object3D {
 
 			const context = canvas.getContext( '2d' );
 			context.beginPath();
-			context.arc( 32, 32, 16, 0, 2 * Math.PI );
+			context.arc( 32, 32, radius, 0, 2 * Math.PI );
 			context.closePath();
 			context.fillStyle = color.getStyle();
 			context.fill();
 
-			if ( text !== null ) {
+			if ( text ) {
 
-				context.font = '24px Arial';
+				context.font = font;
 				context.textAlign = 'center';
-				context.fillStyle = '#000000';
+				context.fillStyle = labelColor;
 				context.fillText( text, 32, 41 );
 
 			}
 
 			const texture = new CanvasTexture( canvas );
+			texture.colorSpace = SRGBColorSpace;
 
 			return new SpriteMaterial( { map: texture, toneMapped: false } );
 
 		}
 
+		function updateLabels() {
+
+			posXAxisHelper.material.map.dispose();
+			posYAxisHelper.material.map.dispose();
+			posZAxisHelper.material.map.dispose();
+
+			posXAxisHelper.material.dispose();
+			posYAxisHelper.material.dispose();
+			posZAxisHelper.material.dispose();
+
+			posXAxisHelper.material = getSpriteMaterial( color1, options.labelX );
+			posYAxisHelper.material = getSpriteMaterial( color2, options.labelY );
+			posZAxisHelper.material = getSpriteMaterial( color3, options.labelZ );
+
+		}
+
 	}
 
 }

package/examples/jsm/interactive/HTMLMesh.js

@@ -241,6 +241,13 @@ function html2canvas( element ) {
 
 	function drawElement( element, style ) {
 
+		// Do not render invisible elements, comments and scripts.
+		if ( element.nodeType === Node.COMMENT_NODE || element.nodeName === 'SCRIPT' || ( element.style && element.style.display === 'none' ) ) {
+
+			return;
+
+		}
+
 		let x = 0, y = 0, width = 0, height = 0;
 
 		if ( element.nodeType === Node.TEXT_NODE ) {
@@ -258,14 +265,9 @@ function html2canvas( element ) {
 
 			drawText( style, x, y, element.nodeValue.trim() );
 
-		} else if ( element.nodeType === Node.COMMENT_NODE ) {
-
-			return;
-
 		} else if ( element instanceof HTMLCanvasElement ) {
 
 			// Canvas element
-			if ( element.style.display === 'none' ) return;
 
 			const rect = element.getBoundingClientRect();
 
@@ -280,8 +282,6 @@ function html2canvas( element ) {
 
 		} else if ( element instanceof HTMLImageElement ) {
 
-			if ( element.style.display === 'none' ) return;
-
 			const rect = element.getBoundingClientRect();
 
 			x = rect.left - offset.left - 0.5;
@@ -293,8 +293,6 @@ function html2canvas( element ) {
 
 		} else {
 
-			if ( element.style.display === 'none' ) return;
-
 			const rect = element.getBoundingClientRect();
 
 			x = rect.left - offset.left - 0.5;