TubePainter: Simplified API

examples/jsm/misc/TubePainter.js

@@ -7,6 +7,7 @@ import {
 	BufferGeometry,
 	Color,
 	DynamicDrawUsage,
+	Matrix4,
 	Mesh,
 	MeshStandardMaterial,
 	Vector3,
@@ -33,8 +34,6 @@ function TubePainter() {
 	geometry.drawRange.count = 0;
 
 	let material = new MeshStandardMaterial( {
-		roughness: 0.9,
-		metalness: 0.0,
 		vertexColors: VertexColors
 	} );
 
@@ -62,6 +61,8 @@ function TubePainter() {
 
 	}
 
+	//
+
 	let vector1 = new Vector3();
 	let vector2 = new Vector3();
 	let vector3 = new Vector3();
@@ -131,38 +132,77 @@ function TubePainter() {
 
 	}
 
+	//
+
+	let up = new Vector3( 0, 1, 0 );
+
+	let point1 = new Vector3();
+	let point2 = new Vector3();
+
+	let matrix1 = new Matrix4();
+	let matrix2 = new Matrix4();
+
+	function moveTo( position ) {
+
+		point1.copy( position );
+		matrix1.lookAt( point2, point1, up );
+
+		point2.copy( position );
+		matrix2.copy( matrix1 );
+
+	}
+
+	function lineTo( position ) {
+
+		point1.copy( position );
+		matrix1.lookAt( point2, point1, up );
+
+		stroke( point1, point2, matrix1, matrix2 );
+
+		point2.copy( point1 );
+		matrix2.copy( matrix1 );
+
+	}
+
 	function setSize( value ) {
 
 		size = value;
 
 	}
 
-	function updateGeometry( start, end ) {
+	//
 
-		if ( start === end ) return;
+	let count = 0;
+
+	function update() {
 
-		let offset = start * 3;
-		let count = ( end - start ) * 3;
+		let start = count;
+		let end = geometry.drawRange.count;
 
-		positions.updateRange.offset = offset;
-		positions.updateRange.count = count;
+		if ( start === end ) return;
+
+		positions.updateRange.offset = start * 3;
+		positions.updateRange.count = ( end - start ) * 3;
 		positions.needsUpdate = true;
 
-		normals.updateRange.offset = offset;
-		normals.updateRange.count = count;
+		normals.updateRange.offset = start * 3;
+		normals.updateRange.count = ( end - start ) * 3;
 		normals.needsUpdate = true;
 
-		colors.updateRange.offset = offset;
-		colors.updateRange.count = count;
+		colors.updateRange.offset = start * 3;
+		colors.updateRange.count = ( end - start ) * 3;
 		colors.needsUpdate = true;
 
+		count = geometry.drawRange.count;
+
 	}
 
 	return {
 		mesh: mesh,
-		stroke: stroke,
+		moveTo: moveTo,
+		lineTo: lineTo,
 		setSize: setSize,
-		updateGeometry: updateGeometry
+		update: update
 	};
 
 }

examples/webxr_ar_paint.html

@@ -22,7 +22,7 @@
 			var camera, scene, renderer;
 			var controller, painter;
 
-			var up = new THREE.Vector3( 0, 1, 0 );
+			var cursor = new THREE.Vector3();
 
 			init();
 			animate();
@@ -87,8 +87,6 @@
 				controller = renderer.xr.getController( 0 );
 				controller.addEventListener( 'selectstart', onSelectStart );
 				controller.addEventListener( 'selectend', onSelectEnd );
-				controller.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
-				controller.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 				controller.userData.skipFrames = 0;
 				scene.add( controller );
 
@@ -113,14 +111,7 @@
 
 				var userData = controller.userData;
 
-				var point1 = userData.points[ 0 ];
-				var point2 = userData.points[ 1 ];
-
-				var matrix1 = userData.matrices[ 0 ];
-				var matrix2 = userData.matrices[ 1 ];
-
-				point1.set( 0, 0, - 0.2 ).applyMatrix4( controller.matrixWorld );
-				matrix1.lookAt( point2, point1, up );
+				cursor.set( 0, 0, - 0.2 ).applyMatrix4( controller.matrixWorld );
 
 				if ( userData.isSelecting === true ) {
 
@@ -130,21 +121,17 @@
 
 						userData.skipFrames --;
 
-					} else {
-
-						var count = painter.mesh.geometry.drawRange.count;
+						painter.moveTo( cursor );
 
-						painter.stroke( point1, point2, matrix1, matrix2 );
+					} else {
 
-						painter.updateGeometry( count, painter.mesh.geometry.drawRange.count );
+						painter.lineTo( cursor );
+						painter.update();
 
 					}
 
 				}
 
-				point2.copy( point1 );
-				matrix2.copy( matrix1 );
-
 			}
 
 			function animate() {

examples/webxr_vr_paint.html

@@ -25,9 +25,9 @@
 			var camera, scene, renderer;
 			var controller1, controller2;
 
-			var controls;
+			var cursor = new THREE.Vector3();
 
-			var up = new THREE.Vector3( 0, 1, 0 );
+			var controls;
 
 			init();
 			animate();
@@ -131,8 +131,6 @@
 				controller1.addEventListener( 'squeezestart', onSequeezeStart );
 				controller1.addEventListener( 'squeezeend', onSqueezeEned );
 				controller1.userData.painter = painter1;
-				controller1.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
-				controller1.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 				scene.add( controller1 );
 
 				controller2 = renderer.xr.getController( 1 );
@@ -141,8 +139,6 @@
 				controller2.addEventListener( 'squeezestart', onSequeezeStart );
 				controller2.addEventListener( 'squeezeend', onSqueezeEned );
 				controller2.userData.painter = painter2;
-				controller2.userData.points = [ new THREE.Vector3(), new THREE.Vector3() ];
-				controller2.userData.matrices = [ new THREE.Matrix4(), new THREE.Matrix4() ];
 				scene.add( controller2 );
 
 				//
@@ -180,20 +176,10 @@
 			function handleController( controller ) {
 
 				var userData = controller.userData;
-
-				var point1 = userData.points[ 0 ];
-				var point2 = userData.points[ 1 ];
-
-				var matrix1 = userData.matrices[ 0 ];
-				var matrix2 = userData.matrices[ 1 ];
+				var painter = userData.painter;
 
 				var pivot = controller.getObjectByName( 'pivot' );
 
-				point1.setFromMatrixPosition( pivot.matrixWorld );
-				matrix1.lookAt( point2, point1, up );
-
-				var painter = userData.painter;
-
 				if ( userData.isSqueezing === true ) {
 
 					var delta = ( controller.position.y - userData.positionAtSqueezeStart ) * 5;
@@ -204,19 +190,19 @@
 
 				}
 
+				cursor.setFromMatrixPosition( pivot.matrixWorld );
+
 				if ( userData.isSelecting === true ) {
 
-					var count = painter.mesh.geometry.drawRange.count;
+					painter.lineTo( cursor );
+					painter.update();
 
-					painter.stroke( point1, point2, matrix1, matrix2 );
+				} else {
 
-					painter.updateGeometry( count, painter.mesh.geometry.drawRange.count );
+					painter.moveTo( cursor );
 
 				}
 
-				point2.copy( point1 );
-				matrix2.copy( matrix1 );
-
 			}
 
 			function animate() {