@octanejs/drei 0.0.1

package/src/core/Stage.three.tsrx

@@ -0,0 +1,112 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements } from '@octanejs/three';
+import { useCallback, useEffect, useState } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import { AccumulativeShadows, type AccumulativeShadowsProps, RandomizedLight, type RandomizedLightProps } from './AccumulativeShadows.three.tsrx';
+import { Bounds, useBounds } from './Bounds.three.tsrx';
+import { Center, type CenterProps, type OnCenterCallbackProps } from './Center.three.tsrx';
+import { ContactShadows, type ContactShadowsProps } from './ContactShadows.three.tsrx';
+import { Environment, type EnvironmentProps } from './Environment.three.tsrx';
+
+const presets = {
+	rembrandt: { main: [1, 2, 1], fill: [-2, -0.5, -2] },
+	portrait: { main: [-1, 2, 0.5], fill: [-1, 0.5, -1.5] },
+	upfront: { main: [0, 2, 1], fill: [-1, 0.5, -1.5] },
+	soft: { main: [-2, 4, 4], fill: [-1, 0.5, -1.5] },
+} satisfies Record<string, { main: [number, number, number]; fill: [number, number, number] }>;
+
+type StageShadows = Partial<AccumulativeShadowsProps> & Partial<RandomizedLightProps> & Partial<ContactShadowsProps> & {
+	type: 'contact' | 'accumulative';
+	offset?: number;
+	bias?: number;
+	normalBias?: number;
+	size?: number;
+};
+
+export type StageProps = Omit<ThreeElements['group'], 'ref'> & {
+	preset?: keyof typeof presets | { main: [number, number, number]; fill: [number, number, number] };
+	shadows?: boolean | 'contact' | 'accumulative' | StageShadows;
+	adjustCamera?: boolean | number;
+	environment?: NonNullable<EnvironmentProps['preset']> | Partial<EnvironmentProps> | null;
+	intensity?: number;
+	center?: Partial<CenterProps>;
+	children?: OctaneNode;
+};
+
+function Refit({ radius, adjustCamera }: { radius: number; adjustCamera: boolean | number }) @{
+	const api = useBounds();
+	useEffect(() => {
+		if (adjustCamera) api.refresh().clip().fit();
+	}, [radius, adjustCamera]);
+	null
+}
+
+export function Stage({
+	children,
+	center,
+	adjustCamera = true,
+	intensity = 0.5,
+	shadows = 'contact',
+	environment = 'city',
+	preset = 'rembrandt',
+	...props
+}: StageProps) @{
+	const config = typeof preset === 'string' ? presets[preset] : preset;
+	const [dimensions, setDimensions] = useState({ radius: 0, width: 0, height: 0, depth: 0 });
+	const { radius, height } = dimensions;
+	const shadowConfig = typeof shadows === 'object' ? shadows : undefined;
+	const shadowBias = shadowConfig?.bias ?? -0.0001;
+	const normalBias = shadowConfig?.normalBias ?? 0;
+	const shadowSize = shadowConfig?.size ?? 1024;
+	const shadowOffset = shadowConfig?.offset ?? 0;
+	const contactShadow = shadows === 'contact' || shadowConfig?.type === 'contact';
+	const accumulativeShadow = shadows === 'accumulative' || shadowConfig?.type === 'accumulative';
+	const shadowSpread = shadowConfig ?? {};
+	const environmentProps = !environment ? null : typeof environment === 'string' ? { preset: environment } : environment;
+	const onCentered = useCallback((centered: OnCenterCallbackProps) => {
+		const { width, height: nextHeight, depth, boundingSphere } = centered;
+		setDimensions({ radius: boundingSphere.radius, width, height: nextHeight, depth });
+		center?.onCentered?.(centered);
+	}, []);
+	<>
+		<ambientLight intensity={intensity / 3} />
+		<spotLight
+			penumbra={1}
+			position={[config.main[0] * radius, config.main[1] * radius, config.main[2] * radius]}
+			intensity={intensity * 2}
+			castShadow={Boolean(shadows)}
+			shadow-bias={shadowBias}
+			shadow-normalBias={normalBias}
+			shadow-mapSize={shadowSize}
+		/>
+		<pointLight position={[config.fill[0] * radius, config.fill[1] * radius, config.fill[2] * radius]} intensity={intensity} />
+		<Bounds fit={Boolean(adjustCamera)} clip={Boolean(adjustCamera)} margin={Number(adjustCamera)} observe {...props}>
+			<Refit radius={radius} adjustCamera={adjustCamera} />
+			<Center {...center} position={[0, shadowOffset / 2, 0]} onCentered={onCentered}>
+				{children}
+			</Center>
+		</Bounds>
+		<group position={[0, -height / 2 - shadowOffset / 2, 0]} name="stage-shadows">
+			@if (contactShadow) {
+				<ContactShadows scale={radius * 4} far={radius} blur={2} {...shadowSpread as ContactShadowsProps} />
+			}
+			@if (accumulativeShadow) {
+				<AccumulativeShadows temporal frames={100} alphaTest={0.9} toneMapped scale={radius * 4} {...shadowSpread as AccumulativeShadowsProps}>
+					<RandomizedLight
+						amount={(shadowSpread as RandomizedLightProps).amount ?? 8}
+						radius={(shadowSpread as RandomizedLightProps).radius ?? radius}
+						ambient={(shadowSpread as RandomizedLightProps).ambient ?? 0.5}
+						intensity={(shadowSpread as RandomizedLightProps).intensity ?? 1}
+						position={[config.main[0] * radius, config.main[1] * radius, config.main[2] * radius]}
+						size={radius * 4}
+						bias={-shadowBias}
+						mapSize={shadowSize}
+					/>
+				</AccumulativeShadows>
+			}
+		</group>
+		@if (environmentProps) {
+			<Environment {...environmentProps} />
+		}
+	</>
+}

package/src/core/Stars.three.tsrx

@@ -0,0 +1,103 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeRef, useFrame } from '@octanejs/three';
+import { useMemo, useState } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+
+export type StarsProps = {
+	radius?: number;
+	depth?: number;
+	count?: number;
+	factor?: number;
+	saturation?: number;
+	fade?: boolean;
+	speed?: number;
+};
+
+export class StarfieldMaterial extends THREE.ShaderMaterial {
+	constructor() {
+		super({
+			uniforms: { time: { value: 0 }, fade: { value: 1 } },
+			vertexShader: `uniform float time;
+attribute float size;
+varying vec3 vColor;
+void main() {
+  vColor = color;
+  vec4 mvPosition = modelViewMatrix * vec4(position, 0.5);
+  gl_PointSize = size * (30.0 / -mvPosition.z) * (3.0 + sin(time + 100.0));
+  gl_Position = projectionMatrix * mvPosition;
+}`,
+			fragmentShader: `uniform sampler2D pointTexture;
+uniform float fade;
+varying vec3 vColor;
+void main() {
+  float opacity = 1.0;
+  if (fade == 1.0) {
+    float d = distance(gl_PointCoord, vec2(0.5, 0.5));
+    opacity = 1.0 / (1.0 + exp(16.0 * (d - 0.25)));
+  }
+  gl_FragColor = vec4(vColor, opacity);
+  #include <tonemapping_fragment>
+  #include <colorspace_fragment>
+}`,
+		});
+	}
+}
+
+function genStar(radius: number): THREE.Vector3 {
+	return new THREE.Vector3().setFromSpherical(
+		new THREE.Spherical(
+			radius,
+			Math.acos(1 - Math.random() * 2),
+			Math.random() * 2 * Math.PI,
+		),
+	);
+}
+
+function assignRef<T>(ref: ThreeRef<T> | undefined, value: T | null): void {
+	if (Array.isArray(ref)) for (const item of ref) assignRef(item, value);
+	else if (typeof ref === 'function') ref(value);
+	else if (ref && 'current' in ref) ref.current = value;
+}
+
+export function Stars({
+	radius = 100,
+	depth = 50,
+	count = 5000,
+	saturation = 0,
+	factor = 4,
+	fade = false,
+	speed = 1,
+	ref,
+}: StarsProps & { ref?: ThreeRef<THREE.Points> }) @{
+	const [position, color, size] = useMemo(() => {
+		const positions: number[] = [];
+		const colors: number[] = [];
+		const sizes = Array.from({ length: count }, () => (0.5 + 0.5 * Math.random()) * factor);
+		const currentColor = new THREE.Color();
+		let currentRadius = radius + depth;
+		const increment = depth / count;
+		for (let index = 0; index < count; index++) {
+			currentRadius -= increment * Math.random();
+			positions.push(...genStar(currentRadius).toArray());
+			currentColor.setHSL(index / count, saturation, 0.9);
+			colors.push(currentColor.r, currentColor.g, currentColor.b);
+		}
+		return [new Float32Array(positions), new Float32Array(colors), new Float32Array(sizes)];
+	}, [count, depth, factor, radius, saturation]);
+	const [material] = useState(() => new StarfieldMaterial());
+	material.blending = THREE.AdditiveBlending;
+	material.uniforms.fade.value = fade;
+	material.depthWrite = false;
+	material.transparent = true;
+	material.vertexColors = true;
+	useFrame((state) => (material.uniforms.time.value = state.clock.elapsedTime * speed));
+	const mergedRef = useMemo(() => (value: THREE.Points | null) => assignRef(ref, value), [ref]);
+	<points ref={mergedRef}>
+		<bufferGeometry>
+			<bufferAttribute attach="attributes-position" args={[position, 3]} />
+			<bufferAttribute attach="attributes-color" args={[color, 3]} />
+			<bufferAttribute attach="attributes-size" args={[size, 1]} />
+		</bufferGeometry>
+		<primitive object={material} attach="material" />
+	</points>
+}

package/src/core/Stats.three.tsrx

@@ -0,0 +1,35 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { addAfterEffect, addEffect } from '@octanejs/three';
+import { useEffect, useLayoutEffect, useState } from '@octanejs/three/renderer';
+import StatsImpl from 'stats.js';
+
+export type StatsProps = {
+	showPanel?: number;
+	className?: string;
+	parent?: { current: HTMLElement | null };
+};
+
+export function Stats({ showPanel = 0, className, parent }: StatsProps) @{
+	const [stats, setStats] = useState<StatsImpl | null>(null);
+	useLayoutEffect(() => {
+		setStats(new StatsImpl());
+	}, []);
+	useEffect(() => {
+		if (stats) {
+			const node = (parent && parent.current) || document.body;
+			stats.showPanel(showPanel);
+			node?.appendChild(stats.dom);
+			const classNames = (className ?? '').split(' ').filter((value) => value);
+			if (classNames.length) stats.dom.classList.add(...classNames);
+			const begin = addEffect(() => stats.begin());
+			const end = addAfterEffect(() => stats.end());
+			return () => {
+				if (classNames.length) stats.dom.classList.remove(...classNames);
+				node?.removeChild(stats.dom);
+				begin();
+				end();
+			};
+		}
+	}, [parent, stats, className, showPanel]);
+	null;
+}

package/src/core/StatsGl.three.tsrx

@@ -0,0 +1,60 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { addAfterEffect, type ThreeRef, useThree } from '@octanejs/three';
+import { useEffect, useMemo } from '@octanejs/three/renderer';
+import StatsImpl from 'stats-gl';
+
+type StatsOptions = ConstructorParameters<typeof StatsImpl>[0];
+
+export type StatsGlProps = Partial<StatsOptions> & {
+	id?: string;
+	clearStatsGlStyle?: boolean;
+	showPanel?: number;
+	className?: string;
+	parent?: { current: HTMLElement | null };
+	ref?: ThreeRef<HTMLDivElement>;
+};
+
+function assignRef<T>(ref: ThreeRef<T> | undefined, value: T | null): void {
+	if (Array.isArray(ref)) for (const item of ref) assignRef(item, value);
+	else if (typeof ref === 'function') ref(value);
+	else if (ref && 'current' in ref) ref.current = value;
+}
+
+export function StatsGl({
+	className,
+	parent,
+	id,
+	clearStatsGlStyle,
+	ref,
+	...props
+}: StatsGlProps) @{
+	const gl = useThree((state) => state.gl);
+	const stats = useMemo(() => {
+		const value = new StatsImpl(props);
+		value.init(gl as any);
+		return value;
+	}, [gl]);
+	useEffect(() => {
+		assignRef(ref, stats.domElement);
+		return () => assignRef(ref, null);
+	}, [ref, stats]);
+	useEffect(() => {
+		const node = (parent && parent.current) || document.body;
+		node?.appendChild(stats.domElement);
+		stats.domElement.querySelectorAll('canvas').forEach((canvas) => {
+			canvas.style.removeProperty('position');
+		});
+		if (id) stats.domElement.id = id;
+		if (clearStatsGlStyle) stats.domElement.removeAttribute('style');
+		stats.domElement.removeAttribute('style');
+		const classNames = (className ?? '').split(' ').filter((value) => value);
+		if (classNames.length) stats.domElement.classList.add(...classNames);
+		const end = addAfterEffect(() => stats.update());
+		return () => {
+			if (classNames.length) stats.domElement.classList.remove(...classNames);
+			node?.removeChild(stats.domElement);
+			end();
+		};
+	}, [parent, stats, className, id, clearStatsGlStyle]);
+	null;
+}

package/src/core/Svg.three.tsrx

@@ -0,0 +1,82 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef, useLoader } from '@octanejs/three';
+import { useEffect, useMemo } from '@octanejs/three/renderer';
+import { DoubleSide, type Object3D } from 'three';
+import { SVGLoader } from 'three-stdlib';
+
+export interface SvgProps extends Omit<ThreeElements['object3D'], 'ref'> {
+	src: string;
+	skipFill?: boolean;
+	skipStrokes?: boolean;
+	fillMaterial?: ThreeElements['meshBasicMaterial'];
+	strokeMaterial?: ThreeElements['meshBasicMaterial'];
+	fillMeshProps?: ThreeElements['mesh'];
+	strokeMeshProps?: ThreeElements['mesh'];
+}
+
+export function Svg({
+	src,
+	skipFill,
+	skipStrokes,
+	fillMaterial,
+	strokeMaterial,
+	fillMeshProps,
+	strokeMeshProps,
+	ref,
+	...props
+}: SvgProps & { ref?: ThreeRef<Object3D> }) @{
+	const url = !src.startsWith('<svg') ? src : `data:image/svg+xml;utf8,${src}`;
+	const svg = useLoader(SVGLoader, url);
+	const fillShapes = useMemo(() => svg.paths.map((path) => SVGLoader.createShapes(path)), [svg]);
+	const strokeGeometries = useMemo(
+		() => skipStrokes
+			? []
+			: svg.paths.map((path) =>
+				path.userData?.style.stroke === undefined || path.userData.style.stroke === 'none'
+					? null
+					: path.subPaths.map((subPath) => SVGLoader.pointsToStroke(subPath.getPoints(), path.userData!.style)),
+			),
+		[svg, skipStrokes],
+	);
+	useEffect(() => () => {
+		strokeGeometries.forEach((group) => group?.forEach((geometry) => geometry.dispose()));
+	}, [strokeGeometries]);
+	let renderOrder = 0;
+	<object3D ref={ref as any} {...props}>
+		<object3D scale={[1, -1, 1]}>
+			@for (const path of svg.paths; key svg.paths.indexOf(path)) {
+				<>
+				@if (!skipFill && path.userData?.style.fill !== undefined && path.userData.style.fill !== 'none') {
+					@for (const shape of fillShapes[svg.paths.indexOf(path)]!; key fillShapes[svg.paths.indexOf(path)]!.indexOf(shape)) {
+						<mesh {...fillMeshProps} renderOrder={renderOrder++}>
+							<shapeGeometry args={[shape as any]} />
+							<meshBasicMaterial
+								color={path.userData!.style.fill}
+								opacity={path.userData!.style.fillOpacity}
+								transparent
+								side={DoubleSide}
+								depthWrite={false}
+								{...fillMaterial}
+							/>
+						</mesh>
+					}
+				}
+				@if (!skipStrokes && path.userData?.style.stroke !== undefined && path.userData.style.stroke !== 'none') {
+					@for (const subPath of path.subPaths; key path.subPaths.indexOf(subPath)) {
+						<mesh geometry={strokeGeometries[svg.paths.indexOf(path)]?.[path.subPaths.indexOf(subPath)] as any} {...strokeMeshProps} renderOrder={renderOrder++}>
+							<meshBasicMaterial
+								color={path.userData!.style.stroke}
+								opacity={path.userData!.style.strokeOpacity}
+								transparent
+								side={DoubleSide}
+								depthWrite={false}
+								{...strokeMaterial}
+							/>
+						</mesh>
+					}
+				}
+				</>
+			}
+		</object3D>
+	</object3D>
+}

package/src/core/Text.three.tsrx

@@ -0,0 +1,96 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+/// <reference path="../troika-three-text.d.ts" />
+import { type ThreeElements, type ThreeRef, useThree } from '@octanejs/three';
+import { use, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import type { ColorRepresentation } from 'three';
+import { Text as TextMeshImpl, preloadFont } from 'troika-three-text';
+import { forEachOctaneChild } from './octane-element.js';
+import { resourcePromise } from './resource.js';
+
+export type TextProps = Omit<ThreeElements['mesh'], 'ref'> & {
+	children: OctaneNode;
+	characters?: string;
+	color?: ColorRepresentation;
+	fontSize?: number;
+	fontWeight?: number | string;
+	fontStyle?: 'italic' | 'normal';
+	maxWidth?: number;
+	lineHeight?: number;
+	letterSpacing?: number;
+	textAlign?: 'left' | 'right' | 'center' | 'justify';
+	font?: string;
+	anchorX?: number | 'left' | 'center' | 'right';
+	anchorY?: number | 'top' | 'top-baseline' | 'middle' | 'bottom-baseline' | 'bottom';
+	clipRect?: [number, number, number, number];
+	depthOffset?: number;
+	direction?: 'auto' | 'ltr' | 'rtl';
+	overflowWrap?: 'normal' | 'break-word';
+	whiteSpace?: 'normal' | 'overflowWrap' | 'nowrap';
+	outlineWidth?: number | string;
+	outlineOffsetX?: number | string;
+	outlineOffsetY?: number | string;
+	outlineBlur?: number | string;
+	outlineColor?: ColorRepresentation;
+	outlineOpacity?: number;
+	strokeWidth?: number | string;
+	strokeColor?: ColorRepresentation;
+	strokeOpacity?: number;
+	fillOpacity?: number;
+	sdfGlyphSize?: number;
+	debugSDF?: boolean;
+	glyphGeometryDetail?: number;
+	onSync?: (troika: any) => void;
+};
+
+function loadTroikaFont(font?: string, characters?: string): Promise<void> {
+	return new Promise((resolve) => preloadFont({ font, characters }, resolve));
+}
+
+function splitTextChildren(children: OctaneNode): [OctaneNode[], string] {
+	const nodes: OctaneNode[] = [];
+	let text = '';
+	forEachOctaneChild(children, (child) => {
+		if (typeof child === 'string' || typeof child === 'number') text += child;
+		else nodes.push(child);
+	});
+	return [nodes, text];
+}
+
+export function Text({
+	sdfGlyphSize = 64,
+	anchorX = 'center',
+	anchorY = 'middle',
+	font,
+	fontSize = 1,
+	children,
+	characters,
+	onSync,
+	ref,
+	...props
+}: TextProps & { ref?: ThreeRef<any> }) @{
+	const invalidate = useThree((state) => state.invalidate);
+	const [troikaMesh] = useState(() => new TextMeshImpl());
+	const [nodes, text] = useMemo(() => splitTextChildren(children), [children]);
+	use(resourcePromise(loadTroikaFont, ['troika-text', font, characters]));
+	useLayoutEffect(() => void troikaMesh.sync(() => {
+		invalidate();
+		onSync?.(troikaMesh);
+	}));
+	useEffect(() => () => troikaMesh.dispose(), [troikaMesh]);
+	const localRef = useRef<any>(null);
+	useImperativeHandle((ref ?? null) as any, () => localRef.current, []);
+	<primitive
+		object={troikaMesh}
+		ref={localRef}
+		font={font}
+		text={text}
+		anchorX={anchorX}
+		anchorY={anchorY}
+		fontSize={fontSize}
+		sdfGlyphSize={sdfGlyphSize}
+		{...(props as any)}
+	>
+		{nodes}
+	</primitive>
+}

package/src/core/Text3D.three.tsrx

@@ -0,0 +1,90 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { extend, type ThreeElements, type ThreeRef } from '@octanejs/three';
+import { useImperativeHandle, useLayoutEffect, useMemo, useRef } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { mergeVertices, TextGeometry, type TextGeometryParameters } from 'three-stdlib';
+import { useFont, type FontData } from './useFont.three.tsrx';
+import { forEachOctaneChild } from './octane-element.js';
+
+const RenamedTextGeometry = extend(TextGeometry);
+
+export type Text3DProps = Omit<ThreeElements['mesh'], 'ref'> & {
+	font: FontData | string;
+	bevelSegments?: number;
+	smooth?: number;
+	letterSpacing?: number;
+	lineHeight?: number;
+	children?: OctaneNode;
+} & Omit<TextGeometryParameters, 'font'>;
+
+const textTypes = new Set(['string', 'number']);
+
+function splitTextChildren(children: OctaneNode): [string, ...OctaneNode[]] {
+	let label = '';
+	const rest: OctaneNode[] = [];
+	forEachOctaneChild(children, (child) => {
+		if (textTypes.has(typeof child)) label += String(child);
+		else rest.push(child);
+	});
+	return [label, ...rest];
+}
+
+export function Text3D({
+	font: fontInput,
+	letterSpacing = 0,
+	lineHeight = 1,
+	size = 1,
+	height = 0.2,
+	bevelThickness = 0.1,
+	bevelSize = 0.01,
+	bevelEnabled = false,
+	bevelOffset = 0,
+	bevelSegments = 4,
+	curveSegments = 8,
+	smooth,
+	children,
+	ref,
+	...props
+}: Text3DProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	const mesh = useRef<THREE.Mesh | null>(null);
+	const font = useFont(fontInput);
+	const options = useMemo(() => ({
+		font,
+		size,
+		height,
+		bevelThickness,
+		bevelSize,
+		bevelEnabled,
+		bevelSegments,
+		bevelOffset,
+		curveSegments,
+		letterSpacing,
+		lineHeight,
+	}), [
+		font,
+		size,
+		height,
+		bevelThickness,
+		bevelSize,
+		bevelEnabled,
+		bevelSegments,
+		bevelOffset,
+		curveSegments,
+		letterSpacing,
+		lineHeight,
+	]);
+	const [label, ...rest] = useMemo(() => splitTextChildren(children), [children]);
+	const args = useMemo(() => [label, options] as const, [label, options]);
+	useLayoutEffect(() => {
+		if (smooth && mesh.current) {
+			mesh.current.geometry = mergeVertices(mesh.current.geometry as any, smooth) as any;
+			mesh.current.geometry.computeVertexNormals();
+		}
+	}, [args, smooth]);
+	useImperativeHandle((ref ?? null) as any, () => mesh.current!, []);
+	<mesh {...props} ref={mesh}>
+		<RenamedTextGeometry args={args as any} />
+		{rest}
+	</mesh>
+}

package/src/core/Texture.three.tsrx

@@ -0,0 +1,72 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { useLoader, useThree } from '@octanejs/three';
+import { useEffect, useLayoutEffect, useMemo } from '@octanejs/three/renderer';
+import { Texture as ThreeTexture, TextureLoader } from 'three';
+import { slotDefault } from './compiler-slot.js';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+
+export const IsObject = (url: unknown): url is Record<string, string> =>
+	url === Object(url) && !Array.isArray(url) && typeof url !== 'function';
+
+type TextureArray<T> = T extends string[] ? ThreeTexture[] : never;
+type TextureRecord<T> =
+	T extends Record<string, string> ? { [key in keyof T]: ThreeTexture } : never;
+type SingleTexture<T> = T extends string ? ThreeTexture : never;
+
+export type MappedTextureType<T extends string[] | string | Record<string, string>> =
+	TextureArray<T> | TextureRecord<T> | SingleTexture<T>;
+
+export function useTexture<Url extends string[] | string | Record<string, string>>(
+	input: Url,
+	onLoad?: (texture: MappedTextureType<Url>) => void,
+): MappedTextureType<Url> {
+	onLoad = slotDefault(onLoad, undefined);
+	const gl = useThree((state) => state.gl);
+	const textures = useLoader(
+		TextureLoader,
+		IsObject(input) ? Object.values(input) : input,
+	) as MappedTextureType<Url>;
+
+	useLayoutEffect(() => {
+		onLoad?.(textures);
+	}, [onLoad]);
+
+	useEffect(() => {
+		if (!('initTexture' in gl)) return;
+		let textureArray: ThreeTexture[] = [];
+		if (Array.isArray(textures)) textureArray = textures;
+		else if (textures instanceof ThreeTexture) textureArray = [textures];
+		else if (IsObject(textures)) textureArray = Object.values(textures);
+		for (const texture of textureArray) {
+			if (texture instanceof ThreeTexture) gl.initTexture(texture);
+		}
+	}, [gl, textures]);
+
+	return useMemo(() => {
+		if (!IsObject(input)) return textures;
+		const keyed = {} as MappedTextureType<Url>;
+		let index = 0;
+		for (const key in input) {
+			(keyed as Record<string, ThreeTexture>)[key] = (textures as ThreeTexture[])[index++];
+		}
+		return keyed;
+	}, [input, textures]);
+}
+
+useTexture.preload = (url: string | string[]) => useLoader.preload(TextureLoader, url);
+useTexture.clear = (input: string | string[]) => useLoader.clear(TextureLoader, input);
+
+export function Texture({
+	children,
+	input,
+	onLoad,
+}: {
+	children?: RenderChildren<ReturnType<typeof useTexture>>;
+	input: Parameters<typeof useTexture>[0];
+	onLoad?: Parameters<typeof useTexture>[1];
+}) @{
+	const texture = useTexture(input, onLoad);
+	<>
+		{resolveRenderChildren(children, texture)}
+	</>
+}