@gnsx/three 0.185.15 → 0.186.0

package/examples/jsm/generators/city/StreetTreeGenerator.js

@@ -0,0 +1,231 @@
+import {
+	CylinderGeometry,
+	IcosahedronGeometry,
+	InterpolationSamplingMode,
+	InterpolationSamplingType,
+	RingGeometry,
+	Vector3
+} from '@gnsx/three';
+
+import { MeshStandardNodeMaterial } from '@gnsx/three/webgpu';
+import { attribute, color, float, fract, instanceIndex, mix, mx_fractal_noise_float, mx_noise_float, normalView, normalWorldGeometry, positionGeometry, positionLocal, positionViewDirection, positionWorld, select, sin, smoothstep, time, varying, vec3 } from '@gnsx/three/tsl';
+
+import { mergeGeometries, mergeVertices } from '../../utils/BufferGeometryUtils.js';
+
+import { InstancedMeshGenerator } from './InstancedMeshGenerator.js';
+import { part, bumpNormal } from './CityGeneratorUtils.js';
+
+/**
+ * A young street tree set in a curbside pit: a flared bark trunk rising through a
+ * cast-iron pit grate, branching into a canopy of vertex-jittered leaf clumps. The
+ * clump normals are blended toward a shared crown sphere so the clumps shade as one
+ * irregular crown rather than separate balls, and the material adds interior
+ * self-shadowing and patchy colour so the foliage reads as leaf mass. Built once
+ * and instanced across a list of placements, dressed with one cheap material that
+ * branches on a baked `partId`.
+ *
+ * The canopy is near rotationally symmetric, so the canonical model stands on
+ * `y = 0`, centred in X / Z, with its slight lean toward `+Z` matching the other
+ * pieces of street furniture.
+ *
+ * ```js
+ * const trees = new StreetTreeGenerator();
+ * scene.add( trees.build( placements ) ); // placements: Matrix4[]
+ * ```
+ */
+class StreetTreeGenerator extends InstancedMeshGenerator {
+
+	constructor( parameters = {} ) {
+
+		super( parameters, buildStreetTreeGeometry, createStreetTreeMaterial, 'StreetTrees' );
+
+	}
+
+}
+
+StreetTreeGenerator.defaults = {
+	trunkHeight: 2.6, // clear trunk below the canopy
+	trunkRadius: 0.18 // bark radius at the base
+};
+
+const TRUNK = 0, LEAF = 1, GRATE = 2;
+
+// the crown sphere the clump normals blend toward; the material reuses it for
+// the interior-shadow falloff
+const CROWN_CENTER = new Vector3( 0, 3.9, 0.1 );
+const CROWN_RADIUS = 3.1;
+
+// deterministic position hash for the clump jitter
+function hash( x, y, z ) {
+
+	const s = Math.sin( x * 127.1 + y * 311.7 + z * 74.7 ) * 43758.5453;
+	return s - Math.floor( s );
+
+}
+
+// a leaf clump: an icosahedron with its vertices pushed in and out radially so the
+// silhouette breaks into lobes, its normals pulled toward the shared crown sphere
+function leafClump( radius, x, y, z ) {
+
+	// polyhedron geometries come non-indexed; weld them so the jittered surface
+	// gets smooth vertex normals instead of hard facets
+	const g = mergeVertices( new IcosahedronGeometry( radius, 1 ).scale( 1, 0.82, 1 ) );
+
+	const position = g.attributes.position;
+	const v = new Vector3();
+
+	for ( let i = 0; i < position.count; i ++ ) {
+
+		v.fromBufferAttribute( position, i );
+		const n = hash( v.x, v.y, v.z );
+		v.multiplyScalar( 0.86 + n * 0.3 );
+		position.setXYZ( i, v.x, v.y, v.z );
+
+	}
+
+	g.translate( x, y, z );
+	g.computeVertexNormals();
+
+	// blend the faceted normals toward the crown sphere so all the clumps light
+	// as one continuous canopy instead of a cluster of separate balls
+	const normal = g.attributes.normal;
+
+	for ( let i = 0; i < normal.count; i ++ ) {
+
+		v.fromBufferAttribute( position, i ).sub( CROWN_CENTER ).normalize();
+		normal.setXYZ(
+			i,
+			normal.getX( i ) * 0.45 + v.x * 0.55,
+			normal.getY( i ) * 0.45 + v.y * 0.55,
+			normal.getZ( i ) * 0.45 + v.z * 0.55
+		);
+
+	}
+
+	g.normalizeNormals();
+
+	return g;
+
+}
+
+function buildStreetTreeGeometry( p ) {
+
+	const r = p.trunkRadius, h = p.trunkHeight;
+
+	// tree pit: dark soil sunk inside a cast-iron grate ring flush with the pavement
+	const soil = new CylinderGeometry( 0.24, 0.3, 0.05, 10 ).translate( 0, 0.025, 0 );
+	const grate = new RingGeometry( 0.24, 0.62, 16, 4 ).rotateX( - Math.PI / 2 ).translate( 0, 0.045, 0 );
+
+	// the trunk flares at the root collar and tapers toward the crown
+	const rootFlare = new CylinderGeometry( r * 1.15, r * 1.6, 0.22, 8 ).translate( 0, 0.11, 0 );
+	const trunk = new CylinderGeometry( r * 0.55, r * 1.1, h, 8 ).translate( 0, h / 2, 0 );
+
+	// a few bare limbs fan from the trunk top into the clumps, so the canopy
+	// visibly grows out of the tree instead of hovering over it
+	const limbs = [];
+	for ( const [ rx, rz, len ] of [[ 0.5, 0.2, 1.5 ], [ - 0.45, - 0.3, 1.4 ], [ 0.1, - 0.55, 1.2 ], [ - 0.15, 0.5, 1.3 ]] ) {
+
+		limbs.push(
+			new CylinderGeometry( 0.03, 0.07, len, 5 )
+				.translate( 0, len / 2, 0 )
+				.rotateX( rx ).rotateZ( rz )
+				.translate( 0, h - 0.15, 0 )
+		);
+
+	}
+
+	// overlapping jittered clumps, one dominant mass with satellites tucked
+	// around it so the crown reads irregular rather than as a single ball
+	const clumps = [
+		leafClump( 2.15, 0, 3.9, 0.1 ),
+		leafClump( 1.5, 1.15, 4.35, 0.5 ),
+		leafClump( 1.45, - 1.05, 3.55, - 0.5 ),
+		leafClump( 1.3, 0.35, 4.75, - 0.65 ),
+		leafClump( 1.25, - 0.35, 4.5, 0.9 ),
+		leafClump( 1.1, 0.9, 3.3, - 0.85 )
+	];
+
+	return mergeGeometries( [
+		part( soil, TRUNK ),
+		part( grate, GRATE ),
+		part( mergeGeometries( [ rootFlare, trunk, ...limbs ] ), TRUNK ),
+		...clumps.map( c => part( c, LEAF ) )
+	] );
+
+}
+
+function createStreetTreeMaterial() {
+
+	const partId = varying( attribute( 'partId', 'float' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER );
+	const isLeaf = partId.equal( LEAF );
+	const isGrate = partId.equal( GRATE );
+
+	const p = positionGeometry;
+
+	// smooth world-space noise: large patches shift the green so no two trees
+	// ( or two sides of one crown ) read as the same flat colour
+	const patch = mx_fractal_noise_float( positionWorld.mul( 0.55 ), 2 ).mul( 0.5 ).add( 0.5 );
+
+	// leaf detail field: tuft-scale clumps and a leaf-scale sparkle. the same
+	// heights drive the colour break-up and the derivative bump, so the crown
+	// catches light like packed foliage instead of a smooth shell
+	const tufts = mx_fractal_noise_float( positionWorld.mul( 2.2 ), 2 ).mul( 0.5 ).add( 0.5 );
+	const sparkle = mx_noise_float( positionWorld.mul( 9 ) ).mul( 0.5 ).add( 0.5 );
+
+	// interior shadow: leaves darken toward the crown core, where a real canopy
+	// swallows the light, and brighten toward the sun-fed rim
+	const crownDist = p.sub( vec3( CROWN_CENTER.x, CROWN_CENTER.y, CROWN_CENTER.z ) ).length().div( CROWN_RADIUS );
+	const interiorAO = smoothstep( 0.1, 1.05, crownDist ).mul( 0.5 ).add( 0.5 );
+
+	// every tree draws its own tint: some paler, some warm as if turning early
+	const treeLane = fract( sin( float( instanceIndex ).mul( 12.9898 ) ).mul( 43758.5453 ) );
+
+	// sky-facing lift plus patchy hue drift between deep and warm greens
+	const skyLift = normalWorldGeometry.y.mul( 0.5 ).add( 0.5 );
+	const leafBase = mix( color( 0x33511f ), color( 0x5d7c33 ), skyLift );
+	const leafVaried = mix( leafBase, color( 0x77822f ), patch.mul( 0.55 ) );
+	const leafTinted = mix( leafVaried, color( 0x7d7c2c ), treeLane.mul( 0.3 ) );
+	const leafLit = leafTinted.mul( tufts.mul( 0.35 ).add( 0.75 ) ).mul( sparkle.mul( 0.24 ).add( 0.88 ) );
+	const leaf = leafLit.mul( interiorAO );
+
+	// bark: ridges running up the trunk, their crevices darker and rougher
+	const ridge = mx_fractal_noise_float( vec3( p.x.mul( 9 ), p.y.mul( 1.4 ), p.z.mul( 9 ) ), 2 ).abs().oneMinus();
+	const bark = mix( color( 0x4a3a2a ), color( 0x6f5e46 ), smoothstep( 0.55, 1.0, ridge ).mul( 0.7 ) );
+
+	// cast-iron pit grate: concentric slots cut by a radial stripe pattern
+	const gr = p.xz.length();
+	const slots = smoothstep( 0.35, 0.5, fract( gr.mul( 11.0 ) ) );
+	const grate = mix( color( 0x121110 ), color( 0x3a3835 ), slots );
+
+	const material = new MeshStandardNodeMaterial();
+	material.colorNode = select( isLeaf, leaf, select( isGrate, grate, bark ) );
+	material.roughnessNode = select( isGrate, float( 0.7 ), select( isLeaf, sparkle.mul( 0.15 ).add( 0.8 ), ridge.mul( 0.12 ).add( 0.82 ) ) );
+	material.metalnessNode = select( isGrate, float( 0.4 ), float( 0 ) );
+
+	// the same detail heights feed the screen-space bump, so tufts and bark
+	// ridges self-shade under the sun
+	// tufts only: leaf-scale noise in the bump turns to moire at grazing light,
+	// and the bump itself fades out at grazing view angles for the same reason
+	const grazingFade = smoothstep( 0.08, 0.35, normalView.dot( positionViewDirection ).abs() );
+	const detailHeight = select( isLeaf, tufts.mul( 0.07 ), select( isGrate, float( 0 ), ridge.mul( 0.02 ) ) ).mul( grazingFade );
+	material.normalNode = bumpNormal( detailHeight );
+
+	// a gentle breeze: the canopy leans and flutters, rising with height so the
+	// trunk stays planted. per-instance phase keeps neighbouring trees out of step
+	const isLeafVertex = attribute( 'partId', 'float' ).equal( LEAF );
+	const phase = float( instanceIndex ).mul( 1.7 );
+	const heightGate = smoothstep( 2.0, 5.0, p.y );
+	const lean = vec3(
+		sin( time.mul( 0.8 ).add( phase ) ).mul( 0.05 ),
+		0,
+		sin( time.mul( 0.61 ).add( phase.mul( 1.3 ) ) ).mul( 0.04 )
+	);
+	const flutter = sin( time.mul( 3.1 ).add( p.y.mul( 2.4 ) ).add( p.x.mul( 1.9 ) ) ).mul( 0.015 );
+	const sway = lean.add( vec3( flutter, flutter.negate(), 0 ) ).mul( heightGate );
+	material.positionNode = positionLocal.add( select( isLeafVertex, sway, vec3( 0 ) ) ); // on top of positionLocal, which already carries the instance transform
+
+	return material;
+
+}
+
+export { StreetTreeGenerator };

package/examples/jsm/generators/city/StreetlightGenerator.js

@@ -0,0 +1,100 @@
+import {
+	BoxGeometry,
+	CylinderGeometry,
+	InterpolationSamplingMode,
+	InterpolationSamplingType,
+	Quaternion,
+	Vector3
+} from '@gnsx/three';
+
+import { MeshStandardNodeMaterial } from '@gnsx/three/webgpu';
+import { attribute, color, float, select, varying } from '@gnsx/three/tsl';
+
+import { mergeGeometries } from '../../utils/BufferGeometryUtils.js';
+
+import { InstancedMeshGenerator } from './InstancedMeshGenerator.js';
+import { part } from './CityGeneratorUtils.js';
+
+/**
+ * A NYC cobra-head streetlight: a tall tapered mast standing at the curb with a
+ * curved arm reaching out over the roadway to a drop luminaire. Built once and
+ * instanced across a list of placements, dressed with one cheap material that
+ * branches on a baked `partId` ( dark metal pole, pale lamp lens ).
+ *
+ * The canonical model stands on `y = 0`, centred in X / Z, with the arm reaching
+ * toward `+Z`, so a placement whose local `+Z` faces the road throws the lamp
+ * over it.
+ *
+ * ```js
+ * const lights = new StreetlightGenerator();
+ * scene.add( lights.build( placements ) ); // placements: Matrix4[]
+ * ```
+ */
+class StreetlightGenerator extends InstancedMeshGenerator {
+
+	constructor( parameters = {} ) {
+
+		super( parameters, buildStreetlightGeometry, createStreetlightMaterial, 'Streetlights', false );
+
+	}
+
+}
+
+StreetlightGenerator.defaults = {
+	height: 9, // mast height ( NYC arterial standard ~9 m )
+	reach: 2.4, // how far the arm reaches out over the road
+	radius: 0.1 // mast radius at the top
+};
+
+// material-zone codes baked per vertex
+const METAL = 0, LENS = 1;
+
+// a capsule-less strut: a cylinder spanning two points, oriented from +Y
+function strut( a, b, radius, segments = 6 ) {
+
+	const dir = new Vector3().subVectors( b, a );
+	const length = dir.length();
+	const geometry = new CylinderGeometry( radius, radius, length, segments );
+	geometry.applyQuaternion( new Quaternion().setFromUnitVectors( new Vector3( 0, 1, 0 ), dir.normalize() ) );
+	geometry.translate( ( a.x + b.x ) / 2, ( a.y + b.y ) / 2, ( a.z + b.z ) / 2 );
+	return geometry;
+
+}
+
+function buildStreetlightGeometry( p ) {
+
+	const h = p.height;
+
+	const base = new CylinderGeometry( 0.18, 0.22, 0.6, 8 ).translate( 0, 0.3, 0 );
+	const pole = new CylinderGeometry( p.radius, p.radius * 1.7, h, 8 ).translate( 0, h / 2, 0 );
+
+	// the arm rises off the mast then sweeps out over the road to the luminaire
+	const armBase = new Vector3( 0, h - 0.4, 0 );
+	const armKnee = new Vector3( 0, h + 0.5, p.reach * 0.35 );
+	const armEnd = new Vector3( 0, h + 0.2, p.reach );
+	const arm = mergeGeometries( [ strut( armBase, armKnee, 0.07 ), strut( armKnee, armEnd, 0.06 ) ] );
+
+	// a tapering cobra-head luminaire at the arm end, with a pale lens underneath
+	const head = new BoxGeometry( 0.26, 0.16, 0.7 ).translate( armEnd.x, armEnd.y - 0.05, armEnd.z + 0.2 );
+	const lens = new BoxGeometry( 0.2, 0.05, 0.5 ).translate( armEnd.x, armEnd.y - 0.14, armEnd.z + 0.2 );
+
+	return mergeGeometries( [ part( base, METAL ), part( pole, METAL ), part( arm, METAL ), part( head, METAL ), part( lens, LENS ) ] );
+
+}
+
+function createStreetlightMaterial() {
+
+	const partId = varying( attribute( 'partId', 'float' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER );
+	const isLens = partId.equal( LENS );
+
+	const material = new MeshStandardNodeMaterial();
+	material.colorNode = select( isLens, color( 0xfff0cc ), color( 0x40433d ) ); // warm lit lens, dark olive-grey metal
+	material.roughnessNode = select( isLens, float( 0.3 ), float( 0.5 ) );
+	material.metalnessNode = select( isLens, float( 0 ), float( 0.7 ) );
+	material.emissiveNode = select( isLens, color( 0xffe2a6 ).mul( 60 ), color( 0x000000 ) ); // luminaire lens at ~2x a sunlit white wall, as a real cobra head reads
+
+	return material;
+
+}
+
+export { StreetlightGenerator };

package/examples/jsm/generators/city/TrafficlightGenerator.js

@@ -0,0 +1,106 @@
+import {
+	BoxGeometry,
+	CylinderGeometry,
+	InterpolationSamplingMode,
+	InterpolationSamplingType
+} from '@gnsx/three';
+
+import { MeshStandardNodeMaterial } from '@gnsx/three/webgpu';
+import { attribute, color, float, select, varying } from '@gnsx/three/tsl';
+
+import { mergeGeometries } from '../../utils/BufferGeometryUtils.js';
+
+import { InstancedMeshGenerator } from './InstancedMeshGenerator.js';
+import { part } from './CityGeneratorUtils.js';
+
+/**
+ * A NYC traffic signal: a round pole at the curb with a horizontal mast arm
+ * reaching out over the roadway to a vertical three-section signal head, plus a
+ * pedestrian-signal box on the pole. Built once and instanced across a list of
+ * placements, dressed with one cheap material that branches on a baked `partId`
+ * ( dark metal, three coloured lenses ).
+ *
+ * The canonical model stands on `y = 0`, centred in X / Z, with the arm reaching
+ * toward `+Z`, so a placement whose local `+Z` faces the road throws the head
+ * over it with its lenses aimed back at oncoming traffic.
+ *
+ * ```js
+ * const lights = new TrafficlightGenerator();
+ * scene.add( lights.build( placements ) ); // placements: Matrix4[]
+ * ```
+ */
+class TrafficlightGenerator extends InstancedMeshGenerator {
+
+	constructor( parameters = {} ) {
+
+		super( parameters, buildTrafficlightGeometry, createTrafficlightMaterial, 'Trafficlights' );
+
+	}
+
+}
+
+TrafficlightGenerator.defaults = {
+	height: 6.5, // pole height at the curb, so the mast arm clears traffic
+	reach: 5.5, // how far the mast arm reaches out over the road
+	radius: 0.14 // pole radius
+};
+
+// material-zone codes baked per vertex
+const METAL = 0, RED = 1, AMBER = 2, GREEN = 3;
+
+// a short lens disc on the front of the signal head, facing back down the arm
+function lensDisc( y, z, id ) {
+
+	return part( new CylinderGeometry( 0.13, 0.13, 0.08, 12 ).rotateX( Math.PI / 2 ).translate( 0, y, z ), id );
+
+}
+
+function buildTrafficlightGeometry( p ) {
+
+	const h = p.height, reach = p.reach;
+	const armY = h - 0.3; // the arm rides just below the pole top
+
+	const base = new CylinderGeometry( 0.2, 0.26, 0.5, 8 ).translate( 0, 0.25, 0 );
+	const pole = new CylinderGeometry( p.radius, p.radius * 1.2, h, 8 ).translate( 0, h / 2, 0 );
+
+	// horizontal, slightly tapered mast arm out over the roadway toward +Z
+	const arm = new CylinderGeometry( 0.07, 0.1, reach, 8 ).rotateX( Math.PI / 2 ).translate( 0, armY, reach / 2 );
+
+	// pedestrian-signal box clamped to the pole at eye level, facing the crossing
+	const pedBox = new BoxGeometry( 0.4, 0.42, 0.2 ).translate( 0, 2.6, p.radius + 0.1 );
+
+	// the three-section head hangs from the arm's far end, its bottom ~4.7 m over
+	// the road for truck clearance, lenses aimed back at oncoming traffic
+	const headZ = reach - 0.6, headY = armY - 1.05;
+	const housing = new BoxGeometry( 0.36, 0.95, 0.32 ).translate( 0, headY, headZ );
+	const dropLen = armY - ( headY + 0.475 );
+	const drop = new CylinderGeometry( 0.05, 0.05, dropLen, 6 ).translate( 0, headY + 0.475 + dropLen / 2, headZ ); // bracket hanging the head off the arm
+	const lensZ = headZ - 0.19; // discs stand proud of the housing's -Z face
+
+	return mergeGeometries( [
+		part( base, METAL ), part( pole, METAL ), part( arm, METAL ), part( drop, METAL ),
+		part( pedBox, METAL ), part( housing, METAL ),
+		lensDisc( headY + 0.28, lensZ, RED ),
+		lensDisc( headY, lensZ, AMBER ),
+		lensDisc( headY - 0.28, lensZ, GREEN )
+	] );
+
+}
+
+function createTrafficlightMaterial() {
+
+	const partId = varying( attribute( 'partId', 'float' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER );
+	const isGreen = partId.equal( GREEN );
+	const isLens = partId.greaterThan( 0.5 ); // any coloured lens, never the metal
+
+	const material = new MeshStandardNodeMaterial();
+	material.colorNode = select( partId.equal( RED ), color( 0x3a0a06 ), select( partId.equal( AMBER ), color( 0x402608 ), select( isGreen, color( 0x2bd24b ), color( 0x233029 ) ) ) ); // dark glass, lit green, dark olive metal
+	material.roughnessNode = select( isLens, float( 0.3 ), float( 0.5 ) );
+	material.metalnessNode = select( isLens, float( 0 ), float( 0.7 ) );
+	material.emissiveNode = select( isGreen, color( 0x2bd24b ).mul( 18 ), color( 0x000000 ) ); // only the go signal glows, at LED-aspect radiance that still reads in full sun
+
+	return material;
+
+}
+
+export { TrafficlightGenerator };

package/examples/jsm/generators/city/TrashcanGenerator.js

@@ -0,0 +1,100 @@
+import {
+	CylinderGeometry,
+	IcosahedronGeometry,
+	InterpolationSamplingMode,
+	InterpolationSamplingType
+} from '@gnsx/three';
+
+import { MeshStandardNodeMaterial } from '@gnsx/three/webgpu';
+import { attribute, color, float, Fn, fract, mix, mx_fractal_noise_float, positionGeometry, select, smoothstep, step, uv, varying } from '@gnsx/three/tsl';
+
+import { mergeGeometries } from '../../utils/BufferGeometryUtils.js';
+
+import { InstancedMeshGenerator } from './InstancedMeshGenerator.js';
+import { part } from './CityGeneratorUtils.js';
+
+/**
+ * The NYC green wire-mesh litter basket: a slightly tapered drum with a heavy top
+ * rim, a foot ring and a dark bag of trash inside. Built once and instanced across
+ * a list of placements; one cheap material branches on a baked `partId`, drawing
+ * the mesh weave procedurally from the drum's own UVs so no alpha or extra geometry
+ * is needed. Canonical model stands on `y = 0`, centred in X / Z.
+ *
+ * ```js
+ * const cans = new TrashcanGenerator();
+ * scene.add( cans.build( placements ) ); // placements: Matrix4[]
+ * ```
+ */
+class TrashcanGenerator extends InstancedMeshGenerator {
+
+	constructor( parameters = {} ) {
+
+		super( parameters, buildTrashcanGeometry, createTrashcanMaterial, 'Trashcans' );
+
+	}
+
+}
+
+TrashcanGenerator.defaults = {
+	radius: 0.28, // ~0.55 m diameter basket
+	height: 0.8
+};
+
+const MESH = 0, RIM = 1, TRASH = 2;
+
+function buildTrashcanGeometry( p ) {
+
+	const r = p.radius, h = p.height;
+
+	const drum = new CylinderGeometry( r, r * 0.92, h, 16, 1, true ).translate( 0, h / 2, 0 ); // open-ended weave drum
+	const rim = new CylinderGeometry( r + 0.03, r + 0.03, 0.07, 16 ).translate( 0, h, 0 );
+	const foot = new CylinderGeometry( r * 0.92, r * 0.86, 0.06, 16 ).translate( 0, 0.03, 0 );
+	const bag = new CylinderGeometry( r * 0.86, r * 0.7, h * 0.9, 12 ).translate( 0, h * 0.5, 0 ); // dark refuse, just inside
+
+	// the basket never quite closes: a lumpy mound of refuse crests over the rim
+	const mound = new IcosahedronGeometry( r * 0.82, 1 ).scale( 1, 0.55, 1 ).translate( 0.02, h + 0.02, - 0.01 );
+
+	return mergeGeometries( [ part( drum, MESH ), part( rim, RIM ), part( foot, RIM ), part( bag, TRASH ), part( mound, TRASH ) ] );
+
+}
+
+function createTrashcanMaterial() {
+
+	const partId = varying( attribute( 'partId', 'float' ) ).setInterpolation( InterpolationSamplingType.FLAT, InterpolationSamplingMode.EITHER );
+	const isRim = partId.equal( RIM );
+	const isTrash = partId.equal( TRASH );
+
+	// expanded-metal weave on the drum, drawn from its UV so the mesh reads as
+	// open without alpha: thin crossing diagonal wires around dark diamond holes
+	const weave = Fn( () => {
+
+		const u = uv().x.mul( 26 );
+		const v = uv().y.mul( 9 );
+		const a = fract( u.add( v ) ).sub( 0.5 ).abs();
+		const b = fract( u.sub( v ) ).sub( 0.5 ).abs();
+		return smoothstep( 0.3, 0.2, a.min( b ) ); // 1 on the wires, 0 in the diamond holes
+
+	} )();
+
+	const p = positionGeometry;
+
+	// street grime creeps up from the foot of the basket
+	const grime = smoothstep( 0.45, 0.05, p.y ).mul( 0.5 ).oneMinus();
+
+	const green = color( 0x39543a ).mul( grime );
+	const drumColor = mix( color( 0x101210 ), green, weave ); // holes fall into the dark interior
+
+	// the mound of refuse: dark bags flecked with scraps of paper and litter
+	const fleck = step( 0.82, mx_fractal_noise_float( p.mul( 34 ), 2 ).mul( 0.5 ).add( 0.5 ) );
+	const trash = mix( color( 0x24221d ), color( 0xa89e88 ), fleck.mul( smoothstep( 0.6, 0.75, p.y ) ) );
+
+	const material = new MeshStandardNodeMaterial();
+	material.colorNode = select( isTrash, trash, select( isRim, green.mul( 1.15 ), drumColor ) );
+	material.roughnessNode = select( isTrash, float( 0.9 ), float( 0.55 ) );
+	material.metalnessNode = select( isTrash, float( 0 ), float( 0.5 ) );
+
+	return material;
+
+}
+
+export { TrashcanGenerator };

package/examples/jsm/geometries/BoxLineGeometry.js

@@ -7,7 +7,7 @@ import {
  * A special type of box geometry intended for {@link LineSegments}.
  *
  * ```js
- * const geometry = new THREE.BoxLineGeometry();
+ * const geometry = new BoxLineGeometry();
  * const material = new THREE.LineBasicMaterial( { color: 0x00ff00 } );
  * const lines = new THREE.LineSegments( geometry, material );
  * scene.add( lines );

package/examples/jsm/geometries/ParametricGeometry.js

@@ -10,7 +10,7 @@ import {
  * Reference: [Mesh Generation with Python](https://prideout.net/blog/old/blog/index.html@p=44.html)
  *
  * ```js
- * const geometry = new THREE.ParametricGeometry( klein, 25, 25 );
+ * const geometry = new ParametricGeometry( klein, 25, 25 );
  * const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  * const klein = new THREE.Mesh( geometry, material );
  * scene.add( klein );

package/examples/jsm/geometries/RoundedBoxGeometry.js

@@ -42,7 +42,7 @@ function getUv( faceDirVector, normal, uvAxis, projectionAxis, radius, sideLengt
  * A special type of box geometry with rounded corners and edges.
  *
  * ```js
- * const geometry = new THREE.RoundedBoxGeometry();
+ * const geometry = new RoundedBoxGeometry();
  * const material = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
  * const cube = new THREE.Mesh( geometry, material );
  * scene.add( cube );