Examples: Modularised webvr_paint.

examples/jsm/misc/TubePainter.js

@@ -0,0 +1,163 @@
+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+import {
+	BufferAttribute,
+	BufferGeometry,
+	Color,
+	DynamicDrawUsage,
+	Mesh,
+	MeshStandardMaterial,
+	Vector3,
+	VertexColors
+} from '../../../build/three.module.js';
+
+function TubePainter() {
+
+	const BUFFER_SIZE = 1000000 * 3;
+
+	let positions = new BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
+	positions.usage = DynamicDrawUsage;
+
+	let normals = new BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
+	normals.usage = DynamicDrawUsage;
+
+	let colors = new BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
+	colors.usage = DynamicDrawUsage;
+
+	let geometry = new BufferGeometry();
+	geometry.setAttribute( 'position', positions );
+	geometry.setAttribute( 'normal', normals );
+	geometry.setAttribute( 'color', colors );
+	geometry.drawRange.count = 0;
+
+	let material = new MeshStandardMaterial( {
+		roughness: 0.9,
+		metalness: 0.0,
+		vertexColors: VertexColors
+	} );
+
+	let mesh = new Mesh( geometry, material );
+	mesh.frustumCulled = false;
+
+	//
+
+	function getPoints( size ) {
+
+		let PI2 = Math.PI * 2;
+
+		let sides = 10;
+		let array = [];
+		let radius = 0.01 * size;
+
+		for ( let i = 0; i < sides; i ++ ) {
+
+			let angle = ( i / sides ) * PI2;
+			array.push( new Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
+
+		}
+
+		return array;
+
+	}
+
+	let vector1 = new Vector3();
+	let vector2 = new Vector3();
+	let vector3 = new Vector3();
+	let vector4 = new Vector3();
+
+	let color = new Color( 0xffffff );
+	let size = 1;
+
+	function stroke( position1, position2, matrix1, matrix2 ) {
+
+		if ( position1.distanceToSquared( position2 ) === 0 ) return;
+
+		let count = geometry.drawRange.count;
+
+		let points = getPoints( size );
+
+		for ( let i = 0, il = points.length; i < il; i ++ ) {
+
+			let vertex1 = points[ i ];
+			let vertex2 = points[ ( i + 1 ) % il ];
+
+			// positions
+
+			vector1.copy( vertex1 ).applyMatrix4( matrix2 ).add( position2 );
+			vector2.copy( vertex2 ).applyMatrix4( matrix2 ).add( position2 );
+			vector3.copy( vertex2 ).applyMatrix4( matrix1 ).add( position1 );
+			vector4.copy( vertex1 ).applyMatrix4( matrix1 ).add( position1 );
+
+			vector1.toArray( positions.array, ( count + 0 ) * 3 );
+			vector2.toArray( positions.array, ( count + 1 ) * 3 );
+			vector4.toArray( positions.array, ( count + 2 ) * 3 );
+
+			vector2.toArray( positions.array, ( count + 3 ) * 3 );
+			vector3.toArray( positions.array, ( count + 4 ) * 3 );
+			vector4.toArray( positions.array, ( count + 5 ) * 3 );
+
+			// normals
+
+			vector1.copy( vertex1 ).applyMatrix4( matrix2 ).normalize();
+			vector2.copy( vertex2 ).applyMatrix4( matrix2 ).normalize();
+			vector3.copy( vertex2 ).applyMatrix4( matrix1 ).normalize();
+			vector4.copy( vertex1 ).applyMatrix4( matrix1 ).normalize();
+
+			vector1.toArray( normals.array, ( count + 0 ) * 3 );
+			vector2.toArray( normals.array, ( count + 1 ) * 3 );
+			vector4.toArray( normals.array, ( count + 2 ) * 3 );
+
+			vector2.toArray( normals.array, ( count + 3 ) * 3 );
+			vector3.toArray( normals.array, ( count + 4 ) * 3 );
+			vector4.toArray( normals.array, ( count + 5 ) * 3 );
+
+			// colors
+
+			color.toArray( colors.array, ( count + 0 ) * 3 );
+			color.toArray( colors.array, ( count + 1 ) * 3 );
+			color.toArray( colors.array, ( count + 2 ) * 3 );
+
+			color.toArray( colors.array, ( count + 3 ) * 3 );
+			color.toArray( colors.array, ( count + 4 ) * 3 );
+			color.toArray( colors.array, ( count + 5 ) * 3 );
+
+			count += 6;
+
+		}
+
+		geometry.drawRange.count = count;
+
+	}
+
+	function updateGeometry( start, end ) {
+
+		if ( start === end ) return;
+
+		let offset = start * 3;
+		let count = ( end - start ) * 3;
+
+		positions.updateRange.offset = offset;
+		positions.updateRange.count = count;
+		positions.needsUpdate = true;
+
+		normals.updateRange.offset = offset;
+		normals.updateRange.count = count;
+		normals.needsUpdate = true;
+
+		colors.updateRange.offset = offset;
+		colors.updateRange.count = count;
+		colors.needsUpdate = true;
+
+	}
+
+	return {
+		mesh: mesh,
+		stroke: stroke,
+		updateGeometry: updateGeometry
+	};
+
+}
+
+export { TubePainter };

examples/webvr_paint.html

@@ -19,24 +19,18 @@
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
+			import { TubePainter } from './jsm/misc/TubePainter.js';
 			import { WEBVR } from './jsm/vr/WebVR.js';
 
 			var container;
 			var camera, scene, renderer;
 			var controller1, controller2;
 
-			var line;
-			var shapes = {};
+			var painter;
 
 			var up = new THREE.Vector3( 0, 1, 0 );
 
-			var vector1 = new THREE.Vector3();
-			var vector2 = new THREE.Vector3();
-			var vector3 = new THREE.Vector3();
-			var vector4 = new THREE.Vector3();
-
 			init();
-			initGeometry();
 			animate();
 
 			function init() {
@@ -83,6 +77,11 @@
 
 				//
 
+				painter = new TubePainter();
+				scene.add( painter.mesh );
+
+				//
+
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -142,172 +141,6 @@
 
 			}
 
-			function initGeometry() {
-
-				var geometry = new THREE.BufferGeometry();
-
-				var positions = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
-				positions.usage = THREE.DynamicDrawUsage;
-				geometry.setAttribute( 'position', positions );
-
-				var normals = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
-				normals.usage = THREE.DynamicDrawUsage;
-				geometry.setAttribute( 'normal', normals );
-
-				var colors = new THREE.BufferAttribute( new Float32Array( 1000000 * 3 ), 3 );
-				colors.usage = THREE.DynamicDrawUsage;
-				geometry.setAttribute( 'color', colors );
-
-				geometry.drawRange.count = 0;
-
-				var material = new THREE.MeshStandardMaterial( {
-					roughness: 0.9,
-					metalness: 0.0,
-					vertexColors: THREE.VertexColors
-				} );
-
-				line = new THREE.Mesh( geometry, material );
-				line.frustumCulled = false;
-				scene.add( line );
-
-				// Shapes
-				shapes[ 'tube' ] = getTubeShapes( 1.0 );
-
-			}
-
-			function getTubeShapes( size ) {
-
-				var PI2 = Math.PI * 2;
-
-				var sides = 10;
-				var array = [];
-				var radius = 0.01 * size;
-
-				for ( var i = 0; i < sides; i ++ ) {
-
-					var angle = ( i / sides ) * PI2;
-					array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
-
-				}
-
-				return array;
-
-			}
-
-			function stroke( controller, point1, point2, matrix1, matrix2 ) {
-
-				var color = new THREE.Color( 0xffffff );
-				var size = 1;
-
-				var shapes = getTubeShapes( size );
-
-				var geometry = line.geometry;
-				var attributes = geometry.attributes;
-				var count = geometry.drawRange.count;
-
-				var positions = attributes.position.array;
-				var normals = attributes.normal.array;
-				var colors = attributes.color.array;
-
-				for ( var j = 0, jl = shapes.length; j < jl; j ++ ) {
-
-					var vertex1 = shapes[ j ];
-					var vertex2 = shapes[ ( j + 1 ) % jl ];
-
-					// positions
-
-					vector1.copy( vertex1 );
-					vector1.applyMatrix4( matrix2 );
-					vector1.add( point2 );
-
-					vector2.copy( vertex2 );
-					vector2.applyMatrix4( matrix2 );
-					vector2.add( point2 );
-
-					vector3.copy( vertex2 );
-					vector3.applyMatrix4( matrix1 );
-					vector3.add( point1 );
-
-					vector4.copy( vertex1 );
-					vector4.applyMatrix4( matrix1 );
-					vector4.add( point1 );
-
-					vector1.toArray( positions, ( count + 0 ) * 3 );
-					vector2.toArray( positions, ( count + 1 ) * 3 );
-					vector4.toArray( positions, ( count + 2 ) * 3 );
-
-					vector2.toArray( positions, ( count + 3 ) * 3 );
-					vector3.toArray( positions, ( count + 4 ) * 3 );
-					vector4.toArray( positions, ( count + 5 ) * 3 );
-
-					// normals
-
-					vector1.copy( vertex1 );
-					vector1.applyMatrix4( matrix2 );
-					vector1.normalize();
-
-					vector2.copy( vertex2 );
-					vector2.applyMatrix4( matrix2 );
-					vector2.normalize();
-
-					vector3.copy( vertex2 );
-					vector3.applyMatrix4( matrix1 );
-					vector3.normalize();
-
-					vector4.copy( vertex1 );
-					vector4.applyMatrix4( matrix1 );
-					vector4.normalize();
-
-					vector1.toArray( normals, ( count + 0 ) * 3 );
-					vector2.toArray( normals, ( count + 1 ) * 3 );
-					vector4.toArray( normals, ( count + 2 ) * 3 );
-
-					vector2.toArray( normals, ( count + 3 ) * 3 );
-					vector3.toArray( normals, ( count + 4 ) * 3 );
-					vector4.toArray( normals, ( count + 5 ) * 3 );
-
-					// colors
-
-					color.toArray( colors, ( count + 0 ) * 3 );
-					color.toArray( colors, ( count + 1 ) * 3 );
-					color.toArray( colors, ( count + 2 ) * 3 );
-
-					color.toArray( colors, ( count + 3 ) * 3 );
-					color.toArray( colors, ( count + 4 ) * 3 );
-					color.toArray( colors, ( count + 5 ) * 3 );
-
-					count += 6;
-
-				}
-
-				geometry.drawRange.count = count;
-
-			}
-
-			function updateGeometry( start, end ) {
-
-				if ( start === end ) return;
-
-				var offset = start * 3;
-				var count = ( end - start ) * 3;
-
-				var geometry = line.geometry;
-				var attributes = geometry.attributes;
-
-				attributes.position.updateRange.offset = offset;
-				attributes.position.updateRange.count = count;
-				attributes.position.needsUpdate = true;
-
-				attributes.normal.updateRange.offset = offset;
-				attributes.normal.updateRange.count = count;
-				attributes.normal.needsUpdate = true;
-
-				attributes.color.updateRange.offset = offset;
-				attributes.color.updateRange.count = count;
-				attributes.color.needsUpdate = true;
-
-			}
-
 			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
@@ -325,20 +158,18 @@
 
 				if ( pivot ) {
 
-					var matrix = pivot.matrixWorld;
-
 					var point1 = controller.userData.points[ 0 ];
 					var point2 = controller.userData.points[ 1 ];
 
 					var matrix1 = controller.userData.matrices[ 0 ];
 					var matrix2 = controller.userData.matrices[ 1 ];
 
-					point1.setFromMatrixPosition( matrix );
+					point1.setFromMatrixPosition( pivot.matrixWorld );
 					matrix1.lookAt( point2, point1, up );
 
 					if ( controller.userData.isSelecting === true ) {
 
-						stroke( controller, point1, point2, matrix1, matrix2 );
+						painter.stroke( point1, point2, matrix1, matrix2 );
 
 					}
 
@@ -357,12 +188,12 @@
 
 			function render() {
 
-				var count = line.geometry.drawRange.count;
+				var count = painter.mesh.geometry.drawRange.count;
 
 				handleController( controller1 );
 				handleController( controller2 );
 
-				updateGeometry( count, line.geometry.drawRange.count );
+				painter.updateGeometry( count, painter.mesh.geometry.drawRange.count );
 
 				renderer.render( scene, camera );