Mesh

import { Mesh } from '../lib/fabric'

<Mesh url="/models/robot.glb" scale={0.5} autoPlay material={{ shader: 'phong' }} />

Props

Prop	Type	Default	Notes
url	string		A .glb — standard glTF 2.0, no Draco or Meshopt
position	[x, y, z]	[0, 0, 0]	Applied once at mount
rotation	[x, y, z]	[0, 0, 0]	Degrees, applied once at mount
scale	number or [x, y, z]	1	Applied once at mount
material	MeshMaterial		Reactive — each option may be a signal and re-applies on change
autoPlay	string, true, or () => string | true | undefined		Clip name, first clip, or a thunk resolved each frame
animation	{ clip: string, time: PhotonValue }		Drives a morph-target clip from an animated time value

autoPlay as a thunk lets a flux accessor choose the clip at runtime without remounting. Returning '' or undefined pauses. The clock restarts whenever the active clip changes, so a switch mid-playback starts the new clip from zero.

MeshMaterial

Mesh materials are a separate set from shape materials, with overlapping names.

Option	Type	Default	Notes
shader	'lambert' | 'phong' | 'glass'	lambert
color	string		Overrides vertex colour and texture when set
ambient	number	0.2
shininess	number	32	phong
roughness	number	0	Normal bumping; on glass, background blur
roughnessScale	number	0.5	Bump frequency, normalised to the mesh’s extent so it means the same on any GLB

Glass options match the shape glass set — ior, fresnel, fresnelColor, thickness, chromaticAberration, attenuationDistance, attenuationColor, distortion, distortionScale, temporalDistortion, anisotropy, anisotropyRotation, anisotropyBlur, metalness, grain, grainScale, iridescence, iridescenceThickness, clearcoat, clearcoatRoughness, sheen, sheenColor, reflection, reflectionRoughness, gloss, glossSharpness, glossCoverage — see Materials › glass for each — with these differences:

Option	Type	Default	Notes
thickness	number	1	On a mesh this scales the measured back-face distance; 1 is physical. Under refraction: 'slab' it is a distance in world units instead
outline	number	0	Silhouette darkening
outlineSoftness	number	0.2	0 tight rim, 1 broad gradient
silhouetteAA	number	1.5	Edge fade width in screen pixels; 0 hard
silhouetteFloor	number	0	Minimum alpha at the silhouette; 1 disables the fade
silhouetteInset	number	0	Extra inward fade, as a fraction of the rim

What loads when

Everything is lazy. <Mesh> imports the loader and the mesh engine on mount, fetches the GLB, builds the pipeline, uploads the buffers, applies the bind-pose skinning, then applies the material and starts playback. A scene without a <Mesh> ships none of it.