@plastic-software/three 0.167.0

package/examples/jsm/geometries/ParametricGeometries.js

@@ -0,0 +1,254 @@
+import {
+	Curve,
+	Vector3
+} from 'three';
+
+import { ParametricGeometry } from './ParametricGeometry.js';
+
+/**
+ * Experimenting of primitive geometry creation using Surface Parametric equations
+ */
+
+const ParametricGeometries = {
+
+	klein: function ( v, u, target ) {
+
+		u *= Math.PI;
+		v *= 2 * Math.PI;
+
+		u = u * 2;
+		let x, z;
+		if ( u < Math.PI ) {
+
+			x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( u ) * Math.cos( v );
+			z = - 8 * Math.sin( u ) - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( u ) * Math.cos( v );
+
+		} else {
+
+			x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( v + Math.PI );
+			z = - 8 * Math.sin( u );
+
+		}
+
+		const y = - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( v );
+
+		target.set( x, y, z );
+
+	},
+
+	plane: function ( width, height ) {
+
+		return function ( u, v, target ) {
+
+			const x = u * width;
+			const y = 0;
+			const z = v * height;
+
+			target.set( x, y, z );
+
+		};
+
+	},
+
+	mobius: function ( u, t, target ) {
+
+		// flat mobius strip
+		// http://www.wolframalpha.com/input/?i=M%C3%B6bius+strip+parametric+equations&lk=1&a=ClashPrefs_*Surface.MoebiusStrip.SurfaceProperty.ParametricEquations-
+		u = u - 0.5;
+		const v = 2 * Math.PI * t;
+
+		const a = 2;
+
+		const x = Math.cos( v ) * ( a + u * Math.cos( v / 2 ) );
+		const y = Math.sin( v ) * ( a + u * Math.cos( v / 2 ) );
+		const z = u * Math.sin( v / 2 );
+
+		target.set( x, y, z );
+
+	},
+
+	mobius3d: function ( u, t, target ) {
+
+		// volumetric mobius strip
+
+		u *= Math.PI;
+		t *= 2 * Math.PI;
+
+		u = u * 2;
+		const phi = u / 2;
+		const major = 2.25, a = 0.125, b = 0.65;
+
+		let x = a * Math.cos( t ) * Math.cos( phi ) - b * Math.sin( t ) * Math.sin( phi );
+		const z = a * Math.cos( t ) * Math.sin( phi ) + b * Math.sin( t ) * Math.cos( phi );
+		const y = ( major + x ) * Math.sin( u );
+		x = ( major + x ) * Math.cos( u );
+
+		target.set( x, y, z );
+
+	}
+
+};
+
+
+/*********************************************
+ *
+ * Parametric Replacement for TubeGeometry
+ *
+ *********************************************/
+
+ParametricGeometries.TubeGeometry = class TubeGeometry extends ParametricGeometry {
+
+	constructor( path, segments = 64, radius = 1, segmentsRadius = 8, closed = false ) {
+
+		const numpoints = segments + 1;
+
+		const frames = path.computeFrenetFrames( segments, closed ),
+			tangents = frames.tangents,
+			normals = frames.normals,
+			binormals = frames.binormals;
+
+		const position = new Vector3();
+
+		function ParametricTube( u, v, target ) {
+
+			v *= 2 * Math.PI;
+
+			const i = Math.floor( u * ( numpoints - 1 ) );
+
+			path.getPointAt( u, position );
+
+			const normal = normals[ i ];
+			const binormal = binormals[ i ];
+
+			const cx = - radius * Math.cos( v ); // TODO: Hack: Negating it so it faces outside.
+			const cy = radius * Math.sin( v );
+
+			position.x += cx * normal.x + cy * binormal.x;
+			position.y += cx * normal.y + cy * binormal.y;
+			position.z += cx * normal.z + cy * binormal.z;
+
+			target.copy( position );
+
+		}
+
+		super( ParametricTube, segments, segmentsRadius );
+
+		// proxy internals
+
+		this.tangents = tangents;
+		this.normals = normals;
+		this.binormals = binormals;
+
+		this.path = path;
+		this.segments = segments;
+		this.radius = radius;
+		this.segmentsRadius = segmentsRadius;
+		this.closed = closed;
+
+	}
+
+};
+
+
+/*********************************************
+  *
+  * Parametric Replacement for TorusKnotGeometry
+  *
+  *********************************************/
+ParametricGeometries.TorusKnotGeometry = class TorusKnotGeometry extends ParametricGeometries.TubeGeometry {
+
+	constructor( radius = 200, tube = 40, segmentsT = 64, segmentsR = 8, p = 2, q = 3 ) {
+
+		class TorusKnotCurve extends Curve {
+
+			getPoint( t, optionalTarget = new Vector3() ) {
+
+				const point = optionalTarget;
+
+				t *= Math.PI * 2;
+
+				const r = 0.5;
+
+				const x = ( 1 + r * Math.cos( q * t ) ) * Math.cos( p * t );
+				const y = ( 1 + r * Math.cos( q * t ) ) * Math.sin( p * t );
+				const z = r * Math.sin( q * t );
+
+				return point.set( x, y, z ).multiplyScalar( radius );
+
+			}
+
+		}
+
+		const segments = segmentsT;
+		const radiusSegments = segmentsR;
+		const extrudePath = new TorusKnotCurve();
+
+		super( extrudePath, segments, tube, radiusSegments, true, false );
+
+		this.radius = radius;
+		this.tube = tube;
+		this.segmentsT = segmentsT;
+		this.segmentsR = segmentsR;
+		this.p = p;
+		this.q = q;
+
+	}
+
+};
+
+/*********************************************
+  *
+  * Parametric Replacement for SphereGeometry
+  *
+  *********************************************/
+ParametricGeometries.SphereGeometry = class SphereGeometry extends ParametricGeometry {
+
+	constructor( size, u, v ) {
+
+		function sphere( u, v, target ) {
+
+			u *= Math.PI;
+			v *= 2 * Math.PI;
+
+			const x = size * Math.sin( u ) * Math.cos( v );
+			const y = size * Math.sin( u ) * Math.sin( v );
+			const z = size * Math.cos( u );
+
+			target.set( x, y, z );
+
+		}
+
+		super( sphere, u, v );
+
+	}
+
+};
+
+
+/*********************************************
+  *
+  * Parametric Replacement for PlaneGeometry
+  *
+  *********************************************/
+
+ParametricGeometries.PlaneGeometry = class PlaneGeometry extends ParametricGeometry {
+
+	constructor( width, depth, segmentsWidth, segmentsDepth ) {
+
+		function plane( u, v, target ) {
+
+			const x = u * width;
+			const y = 0;
+			const z = v * depth;
+
+			target.set( x, y, z );
+
+		}
+
+		super( plane, segmentsWidth, segmentsDepth );
+
+	}
+
+};
+
+export { ParametricGeometries };

package/examples/jsm/geometries/ParametricGeometry.js

@@ -0,0 +1,139 @@
+/**
+ * Parametric Surfaces Geometry
+ * based on the brilliant article by @prideout https://prideout.net/blog/old/blog/index.html@p=44.html
+ */
+
+import {
+	BufferGeometry,
+	Float32BufferAttribute,
+	Vector3
+} from 'three';
+
+class ParametricGeometry extends BufferGeometry {
+
+	constructor( func = ( u, v, target ) => target.set( u, v, Math.cos( u ) * Math.sin( v ) ), slices = 8, stacks = 8 ) {
+
+		super();
+
+		this.type = 'ParametricGeometry';
+
+		this.parameters = {
+			func: func,
+			slices: slices,
+			stacks: stacks
+		};
+
+		// buffers
+
+		const indices = [];
+		const vertices = [];
+		const normals = [];
+		const uvs = [];
+
+		const EPS = 0.00001;
+
+		const normal = new Vector3();
+
+		const p0 = new Vector3(), p1 = new Vector3();
+		const pu = new Vector3(), pv = new Vector3();
+
+		// generate vertices, normals and uvs
+
+		const sliceCount = slices + 1;
+
+		for ( let i = 0; i <= stacks; i ++ ) {
+
+			const v = i / stacks;
+
+			for ( let j = 0; j <= slices; j ++ ) {
+
+				const u = j / slices;
+
+				// vertex
+
+				func( u, v, p0 );
+				vertices.push( p0.x, p0.y, p0.z );
+
+				// normal
+
+				// approximate tangent vectors via finite differences
+
+				if ( u - EPS >= 0 ) {
+
+					func( u - EPS, v, p1 );
+					pu.subVectors( p0, p1 );
+
+				} else {
+
+					func( u + EPS, v, p1 );
+					pu.subVectors( p1, p0 );
+
+				}
+
+				if ( v - EPS >= 0 ) {
+
+					func( u, v - EPS, p1 );
+					pv.subVectors( p0, p1 );
+
+				} else {
+
+					func( u, v + EPS, p1 );
+					pv.subVectors( p1, p0 );
+
+				}
+
+				// cross product of tangent vectors returns surface normal
+
+				normal.crossVectors( pu, pv ).normalize();
+				normals.push( normal.x, normal.y, normal.z );
+
+				// uv
+
+				uvs.push( u, v );
+
+			}
+
+		}
+
+		// generate indices
+
+		for ( let i = 0; i < stacks; i ++ ) {
+
+			for ( let j = 0; j < slices; j ++ ) {
+
+				const a = i * sliceCount + j;
+				const b = i * sliceCount + j + 1;
+				const c = ( i + 1 ) * sliceCount + j + 1;
+				const d = ( i + 1 ) * sliceCount + j;
+
+				// faces one and two
+
+				indices.push( a, b, d );
+				indices.push( b, c, d );
+
+			}
+
+		}
+
+		// build geometry
+
+		this.setIndex( indices );
+		this.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+		this.setAttribute( 'normal', new Float32BufferAttribute( normals, 3 ) );
+		this.setAttribute( 'uv', new Float32BufferAttribute( uvs, 2 ) );
+
+	}
+
+	copy( source ) {
+
+		super.copy( source );
+
+		this.parameters = Object.assign( {}, source.parameters );
+
+		return this;
+
+	}
+
+}
+
+export { ParametricGeometry };

package/examples/jsm/geometries/RoundedBoxGeometry.js

@@ -0,0 +1,155 @@
+import {
+	BoxGeometry,
+	Vector3
+} from 'three';
+
+const _tempNormal = new Vector3();
+
+function getUv( faceDirVector, normal, uvAxis, projectionAxis, radius, sideLength ) {
+
+	const totArcLength = 2 * Math.PI * radius / 4;
+
+	// length of the planes between the arcs on each axis
+	const centerLength = Math.max( sideLength - 2 * radius, 0 );
+	const halfArc = Math.PI / 4;
+
+	// Get the vector projected onto the Y plane
+	_tempNormal.copy( normal );
+	_tempNormal[ projectionAxis ] = 0;
+	_tempNormal.normalize();
+
+	// total amount of UV space alloted to a single arc
+	const arcUvRatio = 0.5 * totArcLength / ( totArcLength + centerLength );
+
+	// the distance along one arc the point is at
+	const arcAngleRatio = 1.0 - ( _tempNormal.angleTo( faceDirVector ) / halfArc );
+
+	if ( Math.sign( _tempNormal[ uvAxis ] ) === 1 ) {
+
+		return arcAngleRatio * arcUvRatio;
+
+	} else {
+
+		// total amount of UV space alloted to the plane between the arcs
+		const lenUv = centerLength / ( totArcLength + centerLength );
+		return lenUv + arcUvRatio + arcUvRatio * ( 1.0 - arcAngleRatio );
+
+	}
+
+}
+
+class RoundedBoxGeometry extends BoxGeometry {
+
+	constructor( width = 1, height = 1, depth = 1, segments = 2, radius = 0.1 ) {
+
+		// ensure segments is odd so we have a plane connecting the rounded corners
+		segments = segments * 2 + 1;
+
+		// ensure radius isn't bigger than shortest side
+		radius = Math.min( width / 2, height / 2, depth / 2, radius );
+
+		super( 1, 1, 1, segments, segments, segments );
+
+		// if we just have one segment we're the same as a regular box
+		if ( segments === 1 ) return;
+
+		const geometry2 = this.toNonIndexed();
+
+		this.index = null;
+		this.attributes.position = geometry2.attributes.position;
+		this.attributes.normal = geometry2.attributes.normal;
+		this.attributes.uv = geometry2.attributes.uv;
+
+		//
+
+		const position = new Vector3();
+		const normal = new Vector3();
+
+		const box = new Vector3( width, height, depth ).divideScalar( 2 ).subScalar( radius );
+
+		const positions = this.attributes.position.array;
+		const normals = this.attributes.normal.array;
+		const uvs = this.attributes.uv.array;
+
+		const faceTris = positions.length / 6;
+		const faceDirVector = new Vector3();
+		const halfSegmentSize = 0.5 / segments;
+
+		for ( let i = 0, j = 0; i < positions.length; i += 3, j += 2 ) {
+
+			position.fromArray( positions, i );
+			normal.copy( position );
+			normal.x -= Math.sign( normal.x ) * halfSegmentSize;
+			normal.y -= Math.sign( normal.y ) * halfSegmentSize;
+			normal.z -= Math.sign( normal.z ) * halfSegmentSize;
+			normal.normalize();
+
+			positions[ i + 0 ] = box.x * Math.sign( position.x ) + normal.x * radius;
+			positions[ i + 1 ] = box.y * Math.sign( position.y ) + normal.y * radius;
+			positions[ i + 2 ] = box.z * Math.sign( position.z ) + normal.z * radius;
+
+			normals[ i + 0 ] = normal.x;
+			normals[ i + 1 ] = normal.y;
+			normals[ i + 2 ] = normal.z;
+
+			const side = Math.floor( i / faceTris );
+
+			switch ( side ) {
+
+				case 0: // right
+
+					// generate UVs along Z then Y
+					faceDirVector.set( 1, 0, 0 );
+					uvs[ j + 0 ] = getUv( faceDirVector, normal, 'z', 'y', radius, depth );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'z', radius, height );
+					break;
+
+				case 1: // left
+
+					// generate UVs along Z then Y
+					faceDirVector.set( - 1, 0, 0 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'z', 'y', radius, depth );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'z', radius, height );
+					break;
+
+				case 2: // top
+
+					// generate UVs along X then Z
+					faceDirVector.set( 0, 1, 0 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'x', 'z', radius, width );
+					uvs[ j + 1 ] = getUv( faceDirVector, normal, 'z', 'x', radius, depth );
+					break;
+
+				case 3: // bottom
+
+					// generate UVs along X then Z
+					faceDirVector.set( 0, - 1, 0 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'x', 'z', radius, width );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'z', 'x', radius, depth );
+					break;
+
+				case 4: // front
+
+					// generate UVs along X then Y
+					faceDirVector.set( 0, 0, 1 );
+					uvs[ j + 0 ] = 1.0 - getUv( faceDirVector, normal, 'x', 'y', radius, width );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'x', radius, height );
+					break;
+
+				case 5: // back
+
+					// generate UVs along X then Y
+					faceDirVector.set( 0, 0, - 1 );
+					uvs[ j + 0 ] = getUv( faceDirVector, normal, 'x', 'y', radius, width );
+					uvs[ j + 1 ] = 1.0 - getUv( faceDirVector, normal, 'y', 'x', radius, height );
+					break;
+
+			}
+
+		}
+
+	}
+
+}
+
+export { RoundedBoxGeometry };

package/examples/jsm/geometries/SDFGeometryGenerator.js

@@ -0,0 +1,144 @@
+/**
+ * @author santiago / @glitch_life
+ * wrapper of https://www.npmjs.com/package/isosurface by https://github.com/mikolalysenko
+ *
+ * Returns BufferGeometry from SDF
+ */
+
+import {
+	BufferAttribute,
+	BufferGeometry,
+	FloatType,
+	Mesh,
+	OrthographicCamera,
+	PlaneGeometry,
+	Scene,
+	ShaderMaterial,
+	Vector2,
+	WebGLRenderTarget
+} from 'three';
+
+import { surfaceNet } from './../libs/surfaceNet.js';
+
+class SDFGeometryGenerator {
+
+	constructor( renderer ) {
+
+		this.renderer = renderer;
+
+	}
+
+	generate( res = 64, distFunc = 'float dist( vec3 p ){ return length(p) - 0.5; }', bounds = 1 ) {
+
+		let w, h;
+		if ( res == 8 ) [ w, h ] = [ 32, 16 ];
+		else if ( res == 16 ) [ w, h ] = [ 64, 64 ];
+		else if ( res == 32 ) [ w, h ] = [ 256, 128 ];
+		else if ( res == 64 ) [ w, h ] = [ 512, 512 ];
+		else if ( res == 128 ) [ w, h ] = [ 2048, 1024 ];
+		else if ( res == 256 ) [ w, h ] = [ 4096, 4096 ];
+		else if ( res == 512 ) [ w, h ] = [ 16384, 8096 ];
+		else if ( res == 1024 ) [ w, h ] = [ 32768, 32768 ];
+		else throw new Error( 'THREE.SDFGeometryGenerator: Resolution must be in range 8 < res < 1024 and must be ^2' );
+
+		const maxTexSize = this.renderer.capabilities.maxTextureSize;
+
+		if ( w > maxTexSize || h > maxTexSize ) throw new Error( 'THREE.SDFGeometryGenerator: Your device does not support this resolution ( ' + res + ' ), decrease [res] param.' );
+
+		const [ tilesX, tilesY ] = [ ( w / res ), ( h / res ) ];
+
+		const sdfCompute = `
+			varying vec2 vUv;
+			uniform float tileNum;
+			uniform float bounds;
+			[#dist#]
+			void main()	{ gl_FragColor=vec4( ( dist( vec3( vUv, tileNum ) * 2.0 * bounds - vec3( bounds ) ) < 0.00001 ) ? 1.0 : 0.0 ); }
+		`;
+
+		const sdfRT = this.computeSDF( w, h, tilesX, tilesY, bounds, sdfCompute.replace( '[#dist#]', distFunc ) );
+
+		const read = new Float32Array( w * h * 4 );
+		this.renderer.readRenderTargetPixels( sdfRT, 0, 0, w, h, read );
+		sdfRT.dispose();
+
+		//
+
+		const mesh = surfaceNet( [ res, res, res ], ( x, y, z ) => {
+
+			x = ( x + bounds ) * ( res / ( bounds * 2 ) );
+			y = ( y + bounds ) * ( res / ( bounds * 2 ) );
+			z = ( z + bounds ) * ( res / ( bounds * 2 ) );
+			let p = ( x + ( z % tilesX ) * res ) + y * w + ( Math.floor( z / tilesX ) * res * w );
+			p *= 4;
+			return ( read[ p + 3 ] > 0 ) ? - 0.000000001 : 1;
+
+		}, [[ - bounds, - bounds, - bounds ], [ bounds, bounds, bounds ]] );
+
+		const ps = [], ids = [];
+		const geometry = new BufferGeometry();
+		mesh.positions.forEach( p => {
+
+			ps.push( p[ 0 ], p[ 1 ], p[ 2 ] );
+
+		} );
+		mesh.cells.forEach( p => ids.push( p[ 0 ], p[ 1 ], p[ 2 ] ) );
+		geometry.setAttribute( 'position', new BufferAttribute( new Float32Array( ps ), 3 ) );
+		geometry.setIndex( ids );
+
+		return geometry;
+
+	}
+
+	computeSDF( width, height, tilesX, tilesY, bounds, shader ) {
+
+		const rt = new WebGLRenderTarget( width, height, { type: FloatType } );
+		const scn = new Scene();
+		const cam = new OrthographicCamera();
+		const tiles = tilesX * tilesY;
+		let currentTile = 0;
+
+		Object.assign( cam, { left: width / - 2, right: width / 2, top: height / 2, bottom: height / - 2 } ).updateProjectionMatrix();
+		cam.position.z = 2;
+
+		const tileSize = width / tilesX;
+		const geometry = new PlaneGeometry( tileSize, tileSize );
+
+		while ( currentTile ++ < tiles ) {
+
+			const c = currentTile - 1;
+			const [ px, py ] = [ ( tileSize ) / 2 + ( c % tilesX ) * ( tileSize ) - width / 2, ( tileSize ) / 2 + Math.floor( c / tilesX ) * ( tileSize ) - height / 2 ];
+			const compPlane = new Mesh( geometry, new ShaderMaterial( {
+				uniforms: {
+					res: { value: new Vector2( width, height ) },
+					tileNum: { value: c / ( tilesX * tilesY - 1 ) },
+					bounds: { value: bounds }
+				},
+				vertexShader: 'varying vec2 vUv;void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}',
+				fragmentShader: shader
+			} ) );
+			compPlane.position.set( px, py, 0 );
+			scn.add( compPlane );
+
+		}
+
+		this.renderer.setRenderTarget( rt );
+		this.renderer.render( scn, cam );
+		this.renderer.setRenderTarget( null );
+
+		//
+
+		geometry.dispose();
+
+		scn.traverse( function ( object ) {
+
+			if ( object.material !== undefined ) object.material.dispose();
+
+		} );
+
+		return rt;
+
+	}
+
+}
+
+export { SDFGeometryGenerator };