203 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			203 lines
		
	
	
		
			4.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| import {
 | |
| 	BufferAttribute,
 | |
| 	BufferGeometry,
 | |
| 	Color,
 | |
| 	DynamicDrawUsage,
 | |
| 	Matrix4,
 | |
| 	Mesh,
 | |
| 	MeshStandardMaterial,
 | |
| 	Vector3
 | |
| } from 'three';
 | |
| 
 | |
| function TubePainter() {
 | |
| 
 | |
| 	const BUFFER_SIZE = 1000000 * 3;
 | |
| 
 | |
| 	const positions = new BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
 | |
| 	positions.usage = DynamicDrawUsage;
 | |
| 
 | |
| 	const normals = new BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
 | |
| 	normals.usage = DynamicDrawUsage;
 | |
| 
 | |
| 	const colors = new BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
 | |
| 	colors.usage = DynamicDrawUsage;
 | |
| 
 | |
| 	const geometry = new BufferGeometry();
 | |
| 	geometry.setAttribute( 'position', positions );
 | |
| 	geometry.setAttribute( 'normal', normals );
 | |
| 	geometry.setAttribute( 'color', colors );
 | |
| 	geometry.drawRange.count = 0;
 | |
| 
 | |
| 	const material = new MeshStandardMaterial( {
 | |
| 		vertexColors: true
 | |
| 	} );
 | |
| 
 | |
| 	const mesh = new Mesh( geometry, material );
 | |
| 	mesh.frustumCulled = false;
 | |
| 
 | |
| 	//
 | |
| 
 | |
| 	function getPoints( size ) {
 | |
| 
 | |
| 		const PI2 = Math.PI * 2;
 | |
| 
 | |
| 		const sides = 10;
 | |
| 		const array = [];
 | |
| 		const radius = 0.01 * size;
 | |
| 
 | |
| 		for ( let i = 0; i < sides; i ++ ) {
 | |
| 
 | |
| 			const angle = ( i / sides ) * PI2;
 | |
| 			array.push( new Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
 | |
| 
 | |
| 		}
 | |
| 
 | |
| 		return array;
 | |
| 
 | |
| 	}
 | |
| 
 | |
| 	//
 | |
| 
 | |
| 	const vector1 = new Vector3();
 | |
| 	const vector2 = new Vector3();
 | |
| 	const vector3 = new Vector3();
 | |
| 	const vector4 = new Vector3();
 | |
| 
 | |
| 	const color = new Color( 0xffffff );
 | |
| 	let size = 1;
 | |
| 
 | |
| 	function stroke( position1, position2, matrix1, matrix2 ) {
 | |
| 
 | |
| 		if ( position1.distanceToSquared( position2 ) === 0 ) return;
 | |
| 
 | |
| 		let count = geometry.drawRange.count;
 | |
| 
 | |
| 		const points = getPoints( size );
 | |
| 
 | |
| 		for ( let i = 0, il = points.length; i < il; i ++ ) {
 | |
| 
 | |
| 			const vertex1 = points[ i ];
 | |
| 			const 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;
 | |
| 
 | |
| 	}
 | |
| 
 | |
| 	//
 | |
| 
 | |
| 	const up = new Vector3( 0, 1, 0 );
 | |
| 
 | |
| 	const point1 = new Vector3();
 | |
| 	const point2 = new Vector3();
 | |
| 
 | |
| 	const matrix1 = new Matrix4();
 | |
| 	const 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;
 | |
| 
 | |
| 	}
 | |
| 
 | |
| 	//
 | |
| 
 | |
| 	let count = 0;
 | |
| 
 | |
| 	function update() {
 | |
| 
 | |
| 		const start = count;
 | |
| 		const end = geometry.drawRange.count;
 | |
| 
 | |
| 		if ( start === end ) return;
 | |
| 
 | |
| 		positions.addUpdateRange( start * 3, ( end - start ) * 3 );
 | |
| 		positions.needsUpdate = true;
 | |
| 
 | |
| 		normals.addUpdateRange( start * 3, ( end - start ) * 3 );
 | |
| 		normals.needsUpdate = true;
 | |
| 
 | |
| 		colors.addUpdateRange( start * 3, ( end - start ) * 3 );
 | |
| 		colors.needsUpdate = true;
 | |
| 
 | |
| 		count = geometry.drawRange.count;
 | |
| 
 | |
| 	}
 | |
| 
 | |
| 	return {
 | |
| 		mesh: mesh,
 | |
| 		moveTo: moveTo,
 | |
| 		lineTo: lineTo,
 | |
| 		setSize: setSize,
 | |
| 		update: update
 | |
| 	};
 | |
| 
 | |
| }
 | |
| 
 | |
| export { TubePainter };
 |