@octanejs/drei 0.0.1

package/src/core/Hud.three.tsrx

@@ -0,0 +1,52 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { createPortal, useFrame, useThree } from '@octanejs/three';
+import { useState } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+
+type RenderHudProps = {
+	defaultScene: THREE.Scene;
+	defaultCamera: THREE.Camera;
+	renderPriority?: number;
+};
+
+function RenderHud({ defaultScene, defaultCamera, renderPriority = 1 }: RenderHudProps) @{
+	const { gl, scene, camera } = useThree();
+	let oldClear: boolean;
+	useFrame(() => {
+		oldClear = gl.autoClear;
+		if (renderPriority === 1) {
+			gl.autoClear = true;
+			gl.render(defaultScene, defaultCamera);
+		}
+		gl.autoClear = false;
+		gl.clearDepth();
+		gl.render(scene, camera);
+		gl.autoClear = oldClear;
+	}, renderPriority);
+	<group onPointerOver={() => null} />
+}
+
+export type HudProps = {
+	children: OctaneNode;
+	renderPriority?: number;
+};
+
+export function Hud({ children, renderPriority = 1 }: { children?: OctaneNode; renderPriority?: number }) @{
+	const { scene: defaultScene, camera: defaultCamera } = useThree();
+	const [hudScene] = useState(() => new THREE.Scene());
+	<>
+		{createPortal(
+			<>
+				{children}
+				<RenderHud
+					defaultScene={defaultScene}
+					defaultCamera={defaultCamera}
+					renderPriority={renderPriority}
+				/>
+			</>,
+			hudScene,
+			{ events: { priority: renderPriority + 1 } },
+		)}
+	</>
+}

package/src/core/Image.three.tsrx

@@ -0,0 +1,146 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { extend, type ThreeElements, type ThreeRef, useThree } from '@octanejs/three';
+import { useImperativeHandle, useLayoutEffect, useRef } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import { universalComponent } from 'octane/universal';
+import * as THREE from 'three';
+import { shaderMaterial } from './shaderMaterial.js';
+import { useTexture } from './Texture.three.tsrx';
+
+type ImageSource = { texture: THREE.Texture; url?: never } | { texture?: never; url: string };
+
+export type ImageProps = Omit<ThreeElements['mesh'], 'scale'> & {
+	segments?: number;
+	scale?: number | [number, number];
+	color?: ThreeElements['meshBasicMaterial']['color'];
+	zoom?: number;
+	radius?: number;
+	grayscale?: number;
+	toneMapped?: boolean;
+	transparent?: boolean;
+	opacity?: number;
+	side?: THREE.Side;
+	children?: OctaneNode;
+} & ImageSource;
+
+const ImageMaterialImpl = shaderMaterial(
+	{
+		color: new THREE.Color('white'),
+		scale: new THREE.Vector2(1, 1),
+		imageBounds: new THREE.Vector2(1, 1),
+		resolution: 1024,
+		map: null,
+		zoom: 1,
+		radius: 0,
+		grayscale: 0,
+		opacity: 1,
+	},
+	`varying vec2 vUv;
+   varying vec2 vPos;
+   void main() {
+     gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.);
+     vUv = uv;
+     vPos = position.xy;
+   }`,
+	`varying vec2 vUv;
+   varying vec2 vPos;
+   uniform vec2 scale;
+   uniform vec2 imageBounds;
+   uniform float resolution;
+   uniform vec3 color;
+   uniform sampler2D map;
+   uniform float radius;
+   uniform float zoom;
+   uniform float grayscale;
+   uniform float opacity;
+   const vec3 luma = vec3(.299, 0.587, 0.114);
+   vec4 toGrayscale(vec4 color, float intensity) { return vec4(mix(color.rgb, vec3(dot(color.rgb, luma)), intensity), color.a); }
+   vec2 aspect(vec2 size) { return size / min(size.x, size.y); }
+   float udRoundBox(vec2 p, vec2 b, float r) { return length(max(abs(p) - b + r, 0.0)) - r; }
+   void main() {
+     vec2 s = aspect(scale);
+     vec2 i = aspect(imageBounds);
+     float rs = s.x / s.y;
+     float ri = i.x / i.y;
+     vec2 nextSize = rs < ri ? vec2(i.x * s.y / i.y, s.y) : vec2(s.x, i.y * s.x / i.x);
+     vec2 offset = (rs < ri ? vec2((nextSize.x - s.x) / 2.0, 0.0) : vec2(0.0, (nextSize.y - s.y) / 2.0)) / nextSize;
+     vec2 uv = vUv * s / nextSize + offset;
+     vec2 zUv = (uv - vec2(0.5)) / zoom + vec2(0.5);
+     vec2 res = vec2(scale * resolution);
+     vec2 halfRes = 0.5 * res;
+     float b = udRoundBox(vUv.xy * res - halfRes, halfRes, resolution * radius);
+     vec3 a = mix(vec3(1.0, 0.0, 0.0), vec3(0.0), smoothstep(0.0, 1.0, b));
+     gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity * a), grayscale);
+     #include <tonemapping_fragment>
+     #include <colorspace_fragment>
+   }`,
+);
+const ImageMaterialElement = extend(ImageMaterialImpl);
+
+type ImageBaseProps = Omit<ImageProps, 'url'> & { texture: THREE.Texture };
+
+function ImageBase({
+	children,
+	color,
+	segments = 1,
+	scale = 1,
+	zoom = 1,
+	grayscale = 0,
+	opacity = 1,
+	radius = 0,
+	texture,
+	toneMapped,
+	transparent,
+	side,
+	ref,
+	...props
+}: ImageBaseProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	const mesh = useRef<THREE.Mesh | null>(null);
+	const size = useThree((state) => state.size);
+	const planeBounds: [number, number] = Array.isArray(scale) ? [scale[0], scale[1]] : [scale, scale];
+	const image = texture.image as { width: number; height: number };
+	const imageBounds: [number, number] = [image.width, image.height];
+	const resolution = Math.max(size.width, size.height);
+	useImperativeHandle((ref ?? null) as any, () => mesh.current!, []);
+	useLayoutEffect(() => {
+		const geometry = mesh.current?.geometry as THREE.BufferGeometry & { parameters?: { width?: number; height?: number } };
+		const material = mesh.current?.material as THREE.ShaderMaterial & { scale: THREE.Vector2 };
+		if (geometry?.parameters) material.scale.set(
+			planeBounds[0] * (geometry.parameters.width ?? 1),
+			planeBounds[1] * (geometry.parameters.height ?? 1),
+		);
+	}, [planeBounds[0], planeBounds[1]]);
+	<mesh ref={mesh} scale={Array.isArray(scale) ? [...scale, 1] : scale} {...props}>
+		<planeGeometry args={[1, 1, segments, segments]} />
+		<ImageMaterialElement
+			color={color}
+			map={texture as any}
+			zoom={zoom}
+			grayscale={grayscale}
+			opacity={opacity}
+			scale={planeBounds}
+			imageBounds={imageBounds}
+			resolution={resolution}
+			radius={radius}
+			toneMapped={toneMapped}
+			transparent={transparent}
+			side={side}
+		/>
+		{children}
+	</mesh>
+}
+
+function ImageWithUrl({ url, ...props }: ImageProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	const texture = useTexture(url!, undefined) as THREE.Texture;
+	<ImageBase {...props as any} texture={texture} />
+}
+
+function ImageWithTexture({ url: _url, ...props }: ImageProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	<ImageBase {...props as any} />
+}
+
+export function Image(props: ImageProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	const component = props.url ? ImageWithUrl : props.texture ? ImageWithTexture : null;
+	if (!component) throw new Error('<Image /> requires a url or texture');
+	<>{universalComponent('three', component as any, props as unknown as Record<string, unknown>)}</>
+}

package/src/core/Instances.three.tsrx

@@ -0,0 +1,332 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import {
+	extend,
+	type ThreeElement,
+	type ThreeElements,
+	type ThreeRef,
+	useFrame,
+	useInstanceHandle,
+} from '@octanejs/three';
+import {
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from '@octanejs/three/renderer';
+import {
+	createContext,
+	type Context,
+	type OctaneNode,
+	useContext,
+} from 'octane';
+import {
+	defineUniversalComponent,
+	universalComponent,
+	universalContext,
+	type UniversalComponent,
+	type UniversalRenderable,
+} from 'octane/universal';
+import * as THREE from 'three';
+import { isOctaneChildrenBlock } from './octane-element.js';
+
+type PositionMeshRef = { current: PositionMesh | null };
+type InstancedMeshRef = { current: THREE.InstancedMesh | null };
+type Api = {
+	getParent: () => InstancedMeshRef;
+	subscribe: <T extends PositionMesh>(ref: { current: T | null }) => () => void;
+};
+
+export type InstancesProps = Omit<ThreeElements['instancedMesh'], 'ref' | 'args'> & {
+	context?: Context<Api | null>;
+	range?: number;
+	limit?: number;
+	frames?: number;
+	children?: OctaneNode | ((Instance: InstanceComponent) => OctaneNode);
+};
+
+export type InstanceProps = Omit<ThreeElement<typeof PositionMesh>, 'ref'> & {
+	context?: Context<Api | null>;
+};
+
+export type InstancedAttributeProps = Omit<ThreeElements['instancedBufferAttribute'], 'ref' | 'args'> & {
+	name: string;
+	defaultValue: any;
+	normalized?: boolean;
+	usage?: number;
+};
+
+type InstanceComponent = UniversalComponent<InstanceProps & { ref?: ThreeRef<PositionMesh> }>;
+
+const instanceLocalMatrix = new THREE.Matrix4();
+const instanceWorldMatrix = new THREE.Matrix4();
+const instanceIntersects: THREE.Intersection[] = [];
+const raycastMesh = new THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>();
+
+export class PositionMesh extends THREE.Group {
+	color = new THREE.Color('white');
+	instance: InstancedMeshRef = { current: null };
+	instanceKey: PositionMeshRef = { current: null };
+
+	get geometry(): THREE.BufferGeometry | undefined {
+		return this.instance.current?.geometry;
+	}
+
+	override raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void {
+		const parent = this.instance.current;
+		if (!parent?.geometry || !parent.material) return;
+		raycastMesh.geometry = parent.geometry;
+		const instanceId = (parent.userData.instances as PositionMeshRef[]).indexOf(this.instanceKey);
+		if (instanceId === -1 || instanceId > parent.count) return;
+		parent.getMatrixAt(instanceId, instanceLocalMatrix);
+		instanceWorldMatrix.multiplyMatrices(parent.matrixWorld, instanceLocalMatrix);
+		raycastMesh.matrixWorld = instanceWorldMatrix;
+		const material = Array.isArray(parent.material) ? parent.material[0] : parent.material;
+		if (material) raycastMesh.material.side = material.side;
+		raycastMesh.raycast(raycaster, instanceIntersects);
+		for (const intersect of instanceIntersects) {
+			intersect.instanceId = instanceId;
+			intersect.object = this;
+			intersects.push(intersect);
+		}
+		instanceIntersects.length = 0;
+	}
+}
+
+const PositionMeshElement = extend(PositionMesh);
+const globalContext = createContext<Api | null>(null);
+const parentMatrix = new THREE.Matrix4();
+const instanceMatrix = new THREE.Matrix4();
+const tempMatrix = new THREE.Matrix4();
+const translation = new THREE.Vector3();
+const rotation = new THREE.Quaternion();
+const scale = new THREE.Vector3();
+
+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 Instance({ context, children, ref, ...props }: InstanceProps & {
+	ref?: ThreeRef<PositionMesh>;
+}) @{
+	const group = useRef<PositionMesh | null>(null);
+	const api = useContext(context ?? globalContext);
+	if (!api) throw new Error('Instance must be used inside Instances component.');
+	const mergedRef = useMemo(
+		() => (value: PositionMesh | null) => {
+			group.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useLayoutEffect(() => api.subscribe(group), [api]);
+	<PositionMeshElement
+		instance={api.getParent()}
+		instanceKey={group}
+		ref={mergedRef}
+		{...props as any}
+	>
+		{children}
+	</PositionMeshElement>
+}
+
+export function Instances({
+	context,
+	children,
+	range,
+	limit = 1000,
+	frames = Infinity,
+	ref,
+	...props
+}: InstancesProps & { ref?: ThreeRef<THREE.InstancedMesh> }) @{
+	const [{ localContext, LocalInstance }] = useState(() => {
+		const local = createContext<Api | null>(null);
+		const BoundInstance = defineUniversalComponent<InstanceProps & { ref?: ThreeRef<PositionMesh> }>(
+			'three',
+			(instanceProps) => universalComponent('three', Instance as any, { ...instanceProps, context: local }),
+		);
+		return { localContext: local, LocalInstance: BoundInstance };
+	});
+	const parentRef = useRef<THREE.InstancedMesh | null>(null);
+	const [instances] = useState<PositionMeshRef[]>([]);
+	const [[matrices, colors]] = useState(() => {
+		const matrixArray = new Float32Array(limit * 16);
+		for (let index = 0; index < limit; index++) tempMatrix.identity().toArray(matrixArray, index * 16);
+		return [matrixArray, Float32Array.from({ length: limit * 3 }, () => 1)];
+	});
+	const mergedRef = useMemo(
+		() => (value: THREE.InstancedMesh | null) => {
+			parentRef.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	const api = useMemo<Api>(() => ({
+		getParent: () => parentRef,
+		subscribe(instanceRef) {
+			instances.push(instanceRef);
+			return () => {
+				const index = instances.findIndex((item) => item.current === instanceRef.current);
+				if (index !== -1) instances.splice(index, 1);
+			};
+		},
+	}), [instances]);
+	const iterations = useRef(0);
+
+	useEffect(() => {
+		if (parentRef.current) parentRef.current.instanceMatrix.needsUpdate = true;
+	});
+	useFrame(() => {
+		const parent = parentRef.current;
+		if (!parent || (frames !== Infinity && iterations.current >= frames)) return;
+		parent.updateMatrix();
+		parent.updateMatrixWorld();
+		parentMatrix.copy(parent.matrixWorld).invert();
+		const count = Math.min(limit, range ?? limit, instances.length);
+		parent.count = count;
+		parent.instanceMatrix.updateRanges[0] = { start: 0, count: count * 16 };
+		if (parent.instanceColor) parent.instanceColor.updateRanges[0] = { start: 0, count: count * 3 };
+		for (let index = 0; index < instances.length; index++) {
+			const instance = instances[index]?.current;
+			if (!instance) continue;
+			instance.matrixWorld.decompose(translation, rotation, scale);
+			instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix);
+			instanceMatrix.toArray(matrices, index * 16);
+			parent.instanceMatrix.needsUpdate = true;
+			instance.color.toArray(colors, index * 3);
+			if (parent.instanceColor) parent.instanceColor.needsUpdate = true;
+		}
+		iterations.current++;
+	});
+	const providedChildren = typeof children === 'function' && !isOctaneChildrenBlock(children)
+		? universalContext(localContext, api, children(LocalInstance) as UniversalRenderable)
+		: universalContext(context ?? globalContext, api, children as UniversalRenderable);
+
+	<instancedMesh
+		userData={{ instances, limit, frames }}
+		matrixAutoUpdate={false}
+		ref={mergedRef}
+		args={[null as any, null as any, 0]}
+		raycast={() => null}
+		{...props as any}
+	>
+		<instancedBufferAttribute attach="instanceMatrix" args={[matrices, 16]} usage={THREE.DynamicDrawUsage} />
+		<instancedBufferAttribute attach="instanceColor" args={[colors, 3]} usage={THREE.DynamicDrawUsage} />
+		{providedChildren}
+	</instancedMesh>
+}
+
+export interface MergedProps extends Omit<InstancesProps, 'children'> {
+	meshes: THREE.Mesh[] | Record<string, THREE.Object3D>;
+	children: (...instances: [InstanceComponent & Record<string, InstanceComponent>, ...InstanceComponent[]]) => OctaneNode;
+}
+
+function renderRecursive(
+	render: (args: unknown[]) => OctaneNode,
+	components: Array<(children: (value: unknown) => UniversalRenderable) => UniversalRenderable>,
+	results: unknown[] = [],
+): UniversalRenderable {
+	if (!components[0]) return render(results) as UniversalRenderable;
+	const nextRender = (value: unknown) => renderRecursive(render, components.slice(1), [...results, value]);
+	return components[0](nextRender);
+}
+
+export function Merged({ meshes, children, ref, ...props }: MergedProps & {
+	ref?: ThreeRef<THREE.Group>;
+}) @{
+	const isArray = Array.isArray(meshes);
+	if (!isArray) {
+		for (const key of Object.keys(meshes)) if (!(meshes[key] as any).isMesh) delete meshes[key];
+	}
+	const meshValues = (isArray ? meshes : Object.values(meshes)) as THREE.Mesh[];
+	const components = meshValues.map(({ geometry, material }) => (
+		(child: (value: unknown) => UniversalRenderable) => universalComponent(
+			'three',
+			Instances as any,
+			{ ...props, geometry, material, children: child },
+			geometry.uuid,
+		)
+	));
+	const render = (args: unknown[]) => isArray
+		? children(...args as [InstanceComponent & Record<string, InstanceComponent>, ...InstanceComponent[]])
+		: children(Object.keys(meshes).filter((key) => (meshes[key] as any).isMesh).reduce(
+			(accumulator, key, index) => ({ ...accumulator, [key]: args[index] }),
+			{},
+		) as InstanceComponent & Record<string, InstanceComponent>);
+	const rendered = typeof children === 'function' && !isOctaneChildrenBlock(children)
+		? renderRecursive(render, components)
+		// A compiled children block is renderer-owned even though Merged's public render-prop
+		// signature makes TypeScript retain the callable branch here.
+		: children as unknown as UniversalRenderable;
+	<group ref={ref}>{rendered}</group>
+}
+
+export function createInstances<T = InstanceProps>() {
+	const context = createContext<Api | null>(null);
+	const BoundInstances = defineUniversalComponent<InstancesProps & { ref?: ThreeRef<THREE.InstancedMesh> }>(
+		'three',
+		(props) => universalComponent('three', Instances as any, { ...props, context }),
+	);
+	const BoundInstance = defineUniversalComponent<T & InstanceProps & { ref?: ThreeRef<PositionMesh & T> }>(
+		'three',
+		(props) => universalComponent('three', Instance as any, { ...props, context }),
+	);
+	return [BoundInstances, BoundInstance] as const;
+}
+
+export function InstancedAttribute({
+	name,
+	defaultValue,
+	normalized,
+	usage = THREE.DynamicDrawUsage,
+	ref,
+	...props
+}: InstancedAttributeProps & { ref?: ThreeRef<THREE.InstancedBufferAttribute> }) @{
+	const attributeRef = useRef<THREE.InstancedBufferAttribute | null>(null);
+	const instance = useInstanceHandle(attributeRef);
+	const mergedRef = useMemo(
+		() => (value: THREE.InstancedBufferAttribute | null) => {
+			attributeRef.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	let iterations = 0;
+	useLayoutEffect(() => {
+		const attribute = attributeRef.current;
+		const parent = instance.current?.parent?.object as THREE.InstancedMesh | undefined;
+		if (!attribute || !parent) return;
+		parent.geometry.attributes[name] = attribute;
+		const value = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+		const array = Array.from({ length: parent.userData.limit }, () => value).flat();
+		attribute.array = new Float32Array(array);
+		attribute.itemSize = value.length;
+		(attribute as any).count = array.length / attribute.itemSize;
+		return () => { delete parent.geometry.attributes[name]; };
+	}, [name]);
+	useFrame(() => {
+		const attribute = attributeRef.current;
+		const parent = instance.current?.parent?.object as THREE.InstancedMesh | undefined;
+		if (!attribute || !parent || (parent.userData.frames !== Infinity && iterations >= parent.userData.frames)) return;
+		for (let index = 0; index < parent.userData.instances.length; index++) {
+			const item = parent.userData.instances[index].current as Record<string, any>;
+			const value = item[name];
+			if (value === undefined) continue;
+			attribute.set(
+				Array.isArray(value) ? value : typeof value.toArray === 'function' ? value.toArray() : [value],
+				index * attribute.itemSize,
+			);
+			attribute.needsUpdate = true;
+		}
+		iterations++;
+	});
+	<instancedBufferAttribute
+		ref={mergedRef}
+		args={[new Float32Array(0), 1]}
+		usage={usage}
+		normalized={normalized}
+		{...props as any}
+	/>
+}

package/src/core/Ktx2.three.tsrx

@@ -0,0 +1,59 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { useLoader, useThree } from '@octanejs/three';
+import { useEffect } from '@octanejs/three/renderer';
+import type { Texture } from 'three';
+import { KTX2Loader } from 'three-stdlib';
+import { slotDefault } from './compiler-slot.js';
+import { IsObject } from './Texture.three.tsrx';
+import { resolveRenderChildren, type RenderChildren } from './octane-children.js';
+
+const cdn = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master';
+
+export function useKTX2<Url extends string[] | string | Record<string, string>>(
+	input: Url,
+	basisPath = `${cdn}/basis/`,
+): Url extends any[] ? Texture[] : Url extends object ? { [key in keyof Url]: Texture } : Texture {
+	basisPath = slotDefault(basisPath, `${cdn}/basis/`);
+	const gl = useThree((state) => state.gl);
+	const textures = useLoader(KTX2Loader, IsObject(input) ? Object.values(input) : input, (
+		loader,
+	) => {
+		loader.detectSupport(gl as unknown as Parameters<KTX2Loader['detectSupport']>[0]);
+		loader.setTranscoderPath(basisPath);
+	});
+
+	useEffect(() => {
+		const array = Array.isArray(textures) ? textures : [textures];
+		for (const texture of array) gl.initTexture(texture);
+	}, [gl, textures]);
+
+	if (!IsObject(input)) return textures as any;
+	const keys = Object.keys(input);
+	const keyed: Record<string, Texture> = {};
+	for (const [index, key] of keys.entries()) {
+		keyed[key] = (textures as unknown as Texture[])[index];
+	}
+	return keyed as any;
+}
+
+useKTX2.preload = (url: string[] | string, basisPath = `${cdn}/basis/`) => useLoader.preload(
+	KTX2Loader,
+	url,
+	(loader) => loader.setTranscoderPath(basisPath),
+);
+useKTX2.clear = (input: string | string[]) => useLoader.clear(KTX2Loader, input);
+
+export function Ktx2({
+	children,
+	input,
+	basisPath,
+}: {
+	children?: RenderChildren<ReturnType<typeof useKTX2>>;
+	input: Parameters<typeof useKTX2>[0];
+	basisPath?: Parameters<typeof useKTX2>[1];
+}) @{
+	const texture = useKTX2(input, basisPath);
+	<>
+		{resolveRenderChildren(children, texture)}
+	</>
+}

package/src/core/Lightformer.three.tsrx

@@ -0,0 +1,75 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { applyProps, type Color, type ThreeElements, type ThreeRef } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+
+export type LightProps = Omit<ThreeElements['mesh'], 'ref' | 'scale' | 'args'> & {
+	args?: any[];
+	map?: THREE.Texture;
+	toneMapped?: boolean;
+	color?: Color;
+	form?: 'circle' | 'ring' | 'rect' | 'plane' | 'box' | any;
+	scale?: number | [number, number, number] | [number, number];
+	intensity?: number;
+	target?: boolean | [number, number, number] | THREE.Vector3;
+	light?: Partial<ThreeElements['pointLight']>;
+};
+
+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 Lightformer({
+	light,
+	args,
+	map,
+	toneMapped = false,
+	color = 'white',
+	form: Form = 'rect',
+	intensity = 1,
+	scale: scaleProp = 1,
+	target = [0, 0, 0],
+	children,
+	ref,
+	...props
+}: LightProps & { ref?: ThreeRef<THREE.Mesh> }) @{
+	const localRef = useRef<THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial> | null>(null);
+	const mergedRef = useMemo(
+		() => (value: THREE.Mesh | null) => {
+			localRef.current = value as THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial> | null;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useLayoutEffect(() => {
+		if (!localRef.current || children || props.material) return;
+		applyProps(localRef.current.material, { color });
+		localRef.current.material.color.multiplyScalar(intensity);
+	}, [color, intensity, children, props.material]);
+	useLayoutEffect(() => {
+		if (!localRef.current) return;
+		if (!props.rotation) localRef.current.quaternion.identity();
+		if (target && !props.rotation) {
+			if (typeof target === 'boolean') localRef.current.lookAt(0, 0, 0);
+			else localRef.current.lookAt(Array.isArray(target) ? new THREE.Vector3(...target) : target);
+		}
+	}, [target, props.rotation]);
+	const scale = Array.isArray(scaleProp) && scaleProp.length === 2
+		? [scaleProp[0], scaleProp[1], 1] as [number, number, number]
+		: scaleProp;
+	<mesh ref={mergedRef} scale={scale} {...props}>
+		{Form === 'circle'
+			? <ringGeometry args={(args ?? [0, 0.5, 64]) as any} />
+			: Form === 'ring'
+				? <ringGeometry args={(args ?? [0.25, 0.5, 64]) as any} />
+				: Form === 'rect' || Form === 'plane'
+					? <planeGeometry args={(args ?? [1, 1]) as any} />
+					: Form === 'box'
+						? <boxGeometry args={(args ?? [1, 1, 1]) as any} />
+						: <Form args={args} />}
+		{children || <meshBasicMaterial toneMapped={toneMapped} map={map} side={THREE.DoubleSide} />}
+		{light && <pointLight castShadow {...light} />}
+	</mesh>
+}