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 };
 |