@octanejs/drei 0.0.1

package/src/core/CameraShake.three.tsrx

@@ -0,0 +1,104 @@
+import { type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import {
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	useState,
+} from '@octanejs/three/renderer';
+import { Euler, Vector3 } from 'three';
+import { SimplexNoise } from 'three-stdlib';
+
+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 interface ShakeController {
+	getIntensity: () => number;
+	setIntensity: (value: number) => void;
+}
+
+type ControlsProto = {
+	update(): void;
+	target: Vector3;
+	addEventListener(event: string, callback: (event: any) => void): void;
+	removeEventListener(event: string, callback: (event: any) => void): void;
+};
+
+export interface CameraShakeProps {
+	intensity?: number;
+	decay?: boolean;
+	decayRate?: number;
+	maxYaw?: number;
+	maxPitch?: number;
+	maxRoll?: number;
+	yawFrequency?: number;
+	pitchFrequency?: number;
+	rollFrequency?: number;
+}
+
+export function CameraShake({
+	intensity = 1,
+	decay,
+	decayRate = 0.65,
+	maxYaw = 0.1,
+	maxPitch = 0.1,
+	maxRoll = 0.1,
+	yawFrequency = 0.1,
+	pitchFrequency = 0.1,
+	rollFrequency = 0.1,
+	ref,
+}: CameraShakeProps & { ref?: ThreeRef<ShakeController | undefined> }) @{
+	const camera = useThree((state) => state.camera);
+	const defaultControls = useThree((state) => state.controls) as unknown as ControlsProto;
+	const intensityRef = useRef(intensity);
+	const initialRotation = useRef<Euler>(camera.rotation.clone());
+	const [yawNoise] = useState(() => new SimplexNoise());
+	const [pitchNoise] = useState(() => new SimplexNoise());
+	const [rollNoise] = useState(() => new SimplexNoise());
+	const imperativeRef = useMemo(
+		() => (value: ShakeController | null | undefined) => assignRef(ref, value ?? null),
+		[ref],
+	);
+	const constrainIntensity = () => {
+		if (intensityRef.current < 0 || intensityRef.current > 1) intensityRef.current =
+			intensityRef.current < 0 ? 0 : 1;
+	};
+	useImperativeHandle(
+		imperativeRef,
+		() => ({
+			getIntensity: () => intensityRef.current,
+			setIntensity: (value: number) => {
+				intensityRef.current = value;
+				constrainIntensity();
+			},
+		}),
+		[],
+	);
+	useEffect(() => {
+		if (defaultControls) {
+			const callback = () => void (initialRotation.current = camera.rotation.clone());
+			defaultControls.addEventListener('change', callback);
+			callback();
+			return () => void defaultControls.removeEventListener('change', callback);
+		}
+	}, [camera, defaultControls]);
+	useFrame((state, delta) => {
+		const shake = Math.pow(intensityRef.current, 2);
+		const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1);
+		const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1);
+		const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1);
+		camera.rotation.set(
+			initialRotation.current.x + pitch,
+			initialRotation.current.y + yaw,
+			initialRotation.current.z + roll,
+		);
+		if (decay && intensityRef.current > 0) {
+			intensityRef.current -= decayRate * delta;
+			constrainIntensity();
+		}
+	});
+	null;
+}

package/src/core/Caustics.three.tsrx

@@ -0,0 +1,107 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { extend, type ThreeElements, type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import { useImperativeHandle, useLayoutEffect, useRef, useState, type RefObject } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { FullScreenQuad } from 'three-stdlib';
+import { CausticsMaterial, type CausticsMaterialType, CausticsProjectionMaterial, type CausticsProjectionMaterialType, createNormalMaterial } from '../materials/CausticsMaterials.js';
+import { useFBO } from './Fbo.three.tsrx';
+import { useHelper } from './Helper.three.tsrx';
+import { Edges } from './lines.three.tsrx';
+
+export type CausticsProps = Omit<ThreeElements['group'], 'ref'> & {
+	frames?: number; debug?: boolean; causticsOnly: boolean; backside: boolean; ior?: number; backsideIOR?: number;
+	worldRadius?: number; intensity?: number; color?: THREE.ColorRepresentation; resolution?: number;
+	lightSource?: [x: number, y: number, z: number] | RefObject<THREE.Object3D>; children?: OctaneNode;
+};
+
+const CausticsProjectionMaterialElement = extend(CausticsProjectionMaterial);
+const NORMALPROPS = { depth: true, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, type: THREE.UnsignedByteType };
+const CAUSTICPROPS = { minFilter: THREE.LinearMipmapLinearFilter, magFilter: THREE.LinearFilter, type: THREE.FloatType, generateMipmaps: true };
+
+export function Caustics({
+	debug, children, frames = 1, ior = 1.1, color = 'white', causticsOnly = false, backside = false,
+	backsideIOR = 1.1, worldRadius = 0.3125, intensity = 0.05, resolution = 2024,
+	lightSource = [5, 5, 5], ref: forwardedRef, ...props
+}: CausticsProps & { ref?: ThreeRef<THREE.Group> }) @{
+	const ref = useRef<THREE.Group | null>(null);
+	const camera = useRef<THREE.OrthographicCamera | null>(null);
+	const scene = useRef<THREE.Scene | null>(null);
+	const plane = useRef<THREE.Mesh<THREE.PlaneGeometry, CausticsProjectionMaterialType> | null>(null);
+	const gl = useThree((state) => state.gl);
+	const helper = useHelper((debug && camera) as any, THREE.CameraHelper);
+	const normalTarget = useFBO(resolution, resolution, NORMALPROPS);
+	const normalTargetB = useFBO(resolution, resolution, NORMALPROPS);
+	const causticsTarget = useFBO(resolution, resolution, CAUSTICPROPS);
+	const causticsTargetB = useFBO(resolution, resolution, CAUSTICPROPS);
+	const [normalMat] = useState(() => createNormalMaterial());
+	const [normalMatB] = useState(() => createNormalMaterial(THREE.BackSide));
+	const [causticsMaterial] = useState(() => new CausticsMaterial() as CausticsMaterialType);
+	const [causticsQuad] = useState(() => new FullScreenQuad(causticsMaterial as any));
+	useLayoutEffect(() => { ref.current!.updateWorldMatrix(false, true); });
+	let count = 0;
+	const v = new THREE.Vector3(); const lpF = new THREE.Frustum(); const lpM = new THREE.Matrix4(); const lpP = new THREE.Plane();
+	const lightDir = new THREE.Vector3(); const lightDirInv = new THREE.Vector3(); const bounds = new THREE.Box3(); const focusPos = new THREE.Vector3();
+	const boundsVertices: THREE.Vector3[] = []; const worldVerts: THREE.Vector3[] = []; const projectedVerts: THREE.Vector3[] = []; const lightDirs: THREE.Vector3[] = [];
+	const cameraPos = new THREE.Vector3();
+	for (let index = 0; index < 8; index++) { boundsVertices.push(new THREE.Vector3()); worldVerts.push(new THREE.Vector3()); projectedVerts.push(new THREE.Vector3()); lightDirs.push(new THREE.Vector3()); }
+	useFrame(() => {
+		if (frames !== Infinity && count++ >= frames) return;
+		if (Array.isArray(lightSource)) lightDir.fromArray(lightSource).normalize();
+		else lightDir.copy(ref.current!.worldToLocal(lightSource.current!.getWorldPosition(v)).normalize());
+		lightDirInv.copy(lightDir).multiplyScalar(-1);
+		scene.current!.parent?.matrixWorld.identity();
+		bounds.setFromObject(scene.current!, true);
+		boundsVertices[0].set(bounds.min.x, bounds.min.y, bounds.min.z); boundsVertices[1].set(bounds.min.x, bounds.min.y, bounds.max.z);
+		boundsVertices[2].set(bounds.min.x, bounds.max.y, bounds.min.z); boundsVertices[3].set(bounds.min.x, bounds.max.y, bounds.max.z);
+		boundsVertices[4].set(bounds.max.x, bounds.min.y, bounds.min.z); boundsVertices[5].set(bounds.max.x, bounds.min.y, bounds.max.z);
+		boundsVertices[6].set(bounds.max.x, bounds.max.y, bounds.min.z); boundsVertices[7].set(bounds.max.x, bounds.max.y, bounds.max.z);
+		for (let index = 0; index < 8; index++) worldVerts[index].copy(boundsVertices[index]);
+		bounds.getCenter(focusPos); boundsVertices.forEach((point) => point.sub(focusPos));
+		const lightPlane = lpP.set(lightDirInv, 0);
+		boundsVertices.map((point, index) => lightPlane.projectPoint(point, projectedVerts[index]));
+		const centralVert = projectedVerts.reduce((a, b) => a.add(b), v.set(0, 0, 0)).divideScalar(projectedVerts.length);
+		const radius = projectedVerts.map((point) => point.distanceTo(centralVert)).reduce((a, b) => Math.max(a, b));
+		const dirLength = boundsVertices.map((point) => point.dot(lightDir)).reduce((a, b) => Math.max(a, b));
+		camera.current!.position.copy(cameraPos.copy(lightDir).multiplyScalar(dirLength).add(focusPos));
+		camera.current!.lookAt(scene.current!.localToWorld(focusPos));
+		const dirMatrix = lpM.lookAt(camera.current!.position, focusPos, v.set(0, 1, 0));
+		camera.current!.left = -radius; camera.current!.right = radius; camera.current!.top = radius; camera.current!.bottom = -radius;
+		const yOffset = v.set(0, radius, 0).applyMatrix4(dirMatrix); const yTime = (camera.current!.position.y + yOffset.y) / lightDir.y;
+		camera.current!.near = 0.1; camera.current!.far = yTime; camera.current!.updateProjectionMatrix(); camera.current!.updateMatrixWorld();
+		const groundProjectedCoords = worldVerts.map((point, index) => point.add(lightDirs[index].copy(lightDir).multiplyScalar(-point.y / lightDir.y)));
+		const centerPos = groundProjectedCoords.reduce((a, b) => a.add(b), v.set(0, 0, 0)).divideScalar(groundProjectedCoords.length);
+		const maxSize = 2 * groundProjectedCoords.map((point) => Math.hypot(point.x - centerPos.x, point.z - centerPos.z)).reduce((a, b) => Math.max(a, b));
+		plane.current!.scale.setScalar(maxSize); plane.current!.position.copy(centerPos);
+		if (debug) (helper.current as THREE.CameraHelper | null)?.update?.();
+		normalMatB.viewMatrix.value = normalMat.viewMatrix.value = camera.current!.matrixWorldInverse;
+		const dirLightNearPlane = lpF.setFromProjectionMatrix(lpM.multiplyMatrices(camera.current!.projectionMatrix, camera.current!.matrixWorldInverse)).planes[4];
+		causticsMaterial.cameraMatrixWorld = camera.current!.matrixWorld; causticsMaterial.cameraProjectionMatrixInv = camera.current!.projectionMatrixInverse;
+		causticsMaterial.lightDir = lightDirInv; causticsMaterial.lightPlaneNormal = dirLightNearPlane.normal; causticsMaterial.lightPlaneConstant = dirLightNearPlane.constant;
+		causticsMaterial.near = camera.current!.near; causticsMaterial.far = camera.current!.far; causticsMaterial.resolution = resolution;
+		causticsMaterial.size = radius; causticsMaterial.intensity = intensity; causticsMaterial.worldRadius = worldRadius;
+		scene.current!.visible = true;
+		gl.setRenderTarget(normalTarget); gl.clear(); scene.current!.overrideMaterial = normalMat; gl.render(scene.current!, camera.current!);
+		gl.setRenderTarget(normalTargetB); gl.clear();
+		if (backside) { scene.current!.overrideMaterial = normalMatB; gl.render(scene.current!, camera.current!); }
+		scene.current!.overrideMaterial = null;
+		causticsMaterial.ior = ior; plane.current!.material.lightProjMatrix = camera.current!.projectionMatrix; plane.current!.material.lightViewMatrix = camera.current!.matrixWorldInverse;
+		causticsMaterial.normalTexture = normalTarget.texture; causticsMaterial.depthTexture = normalTarget.depthTexture;
+		gl.setRenderTarget(causticsTarget); gl.clear(); causticsQuad.render(gl as any);
+		causticsMaterial.ior = backsideIOR; causticsMaterial.normalTexture = normalTargetB.texture; causticsMaterial.depthTexture = normalTargetB.depthTexture;
+		gl.setRenderTarget(causticsTargetB); gl.clear(); if (backside) causticsQuad.render(gl as any);
+		gl.setRenderTarget(null); if (causticsOnly) scene.current!.visible = false;
+	});
+	useImperativeHandle((forwardedRef ?? null) as any, () => ref.current!, []);
+	<group ref={ref} {...props}>
+		<scene ref={scene}>
+			<orthographicCamera ref={camera} up={[0, 1, 0]} />
+			{children}
+		</scene>
+		<mesh renderOrder={2} ref={plane} rotation-x={-Math.PI / 2}>
+			<planeGeometry />
+			<CausticsProjectionMaterialElement transparent color={color} causticsTexture={causticsTarget.texture as any} causticsTextureB={causticsTargetB.texture as any} blending={THREE.CustomBlending} blendSrc={THREE.OneFactor} blendDst={THREE.SrcAlphaFactor} depthWrite={false} />
+			@if (debug) { <Edges><lineBasicMaterial color="#ffff00" toneMapped={false} /></Edges> }
+		</mesh>
+	</group>
+}

package/src/core/Center.three.tsrx

@@ -0,0 +1,145 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef } from '@octanejs/three';
+import { useLayoutEffect, useMemo, useRef, useState } from '@octanejs/three/renderer';
+import { Box3, Group, type Object3D, Sphere, Vector3 } from 'three';
+
+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 type OnCenterCallbackProps = {
+	parent: Object3D;
+	container: Object3D;
+	width: number;
+	height: number;
+	depth: number;
+	boundingBox: Box3;
+	boundingSphere: Sphere;
+	center: Vector3;
+	verticalAlignment: number;
+	horizontalAlignment: number;
+	depthAlignment: number;
+};
+
+export type CenterProps =
+	Omit<ThreeElements['group'], 'ref'> & {
+		top?: boolean;
+		right?: boolean;
+		bottom?: boolean;
+		left?: boolean;
+		front?: boolean;
+		back?: boolean;
+		disable?: boolean;
+		disableX?: boolean;
+		disableY?: boolean;
+		disableZ?: boolean;
+		object?: Object3D | null;
+		precise?: boolean;
+		onCentered?: (props: OnCenterCallbackProps) => void;
+		cacheKey?: any;
+	};
+
+export function Center({
+	children,
+	object,
+	disable,
+	disableX,
+	disableY,
+	disableZ,
+	left,
+	right,
+	top,
+	bottom,
+	front,
+	back,
+	onCentered,
+	precise = true,
+	cacheKey = 0,
+	ref,
+	...props
+}: CenterProps & { ref?: ThreeRef<Group> }) @{
+	const container = useRef<Group | null>(null);
+	const outer = useRef<Group | null>(null);
+	const inner = useRef<Group | null>(null);
+	const [box] = useState(() => new Box3());
+	const [center] = useState(() => new Vector3());
+	const [sphere] = useState(() => new Sphere());
+	const mergedRef = useMemo(
+		() => (value: Group | null) => {
+			container.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useLayoutEffect(() => {
+		if (!outer.current || !inner.current || !container.current) return;
+		outer.current.matrixWorld.identity();
+		box.setFromObject(object ?? inner.current, precise);
+		const width = box.max.x - box.min.x;
+		const height = box.max.y - box.min.y;
+		const depth = box.max.z - box.min.z;
+		box.getCenter(center);
+		box.getBoundingSphere(sphere);
+		const verticalAlignment =
+			top
+				? height / 2
+				: bottom
+					? -height / 2
+					: 0;
+		const horizontalAlignment =
+			left
+				? -width / 2
+				: right
+					? width / 2
+					: 0;
+		const depthAlignment =
+			front
+				? depth / 2
+				: back
+					? -depth / 2
+					: 0;
+		outer.current.position.set(
+			disable || disableX ? 0 : -center.x + horizontalAlignment,
+			disable || disableY ? 0 : -center.y + verticalAlignment,
+			disable || disableZ ? 0 : -center.z + depthAlignment,
+		);
+		onCentered?.({
+			parent: container.current.parent!,
+			container: container.current,
+			width,
+			height,
+			depth,
+			boundingBox: box,
+			boundingSphere: sphere,
+			center,
+			verticalAlignment,
+			horizontalAlignment,
+			depthAlignment,
+		});
+	}, [
+		cacheKey,
+		onCentered,
+		top,
+		left,
+		front,
+		disable,
+		disableX,
+		disableY,
+		disableZ,
+		object,
+		precise,
+		right,
+		bottom,
+		back,
+		box,
+		center,
+		sphere,
+	]);
+	<group ref={mergedRef} {...props}>
+		<group ref={outer}>
+			<group ref={inner}>{children}</group>
+		</group>
+	</group>
+}

package/src/core/Clone.three.tsrx

@@ -0,0 +1,167 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import type { ThreeElements, ThreeRef } from '@octanejs/three';
+import { useMemo } from '@octanejs/three/renderer';
+import type { OctaneNode } from 'octane';
+import * as THREE from 'three';
+import { SkeletonUtils } from 'three-stdlib';
+import { isOctaneElement } from './octane-element.js';
+
+export type CloneProps =
+	Omit<ThreeElements['group'], 'ref' | 'children'> & {
+		object: THREE.Object3D | THREE.Object3D[];
+		children?: OctaneNode;
+		deep?: boolean | 'materialsOnly' | 'geometriesOnly';
+		keys?: string[];
+		inject?: ThreeElements['mesh'] | OctaneNode | ((object: THREE.Object3D) => OctaneNode);
+		castShadow?: boolean;
+		receiveShadow?: boolean;
+		isChild?: boolean;
+	};
+
+interface CloneConfig {
+	deep?: CloneProps['deep'];
+	keys?: string[];
+	inject?: CloneProps['inject'];
+	castShadow?: boolean;
+	receiveShadow?: boolean;
+}
+
+const defaultKeys = [
+	'near',
+	'far',
+	'color',
+	'distance',
+	'decay',
+	'penumbra',
+	'angle',
+	'intensity',
+	'skeleton',
+	'visible',
+	'castShadow',
+	'receiveShadow',
+	'morphTargetDictionary',
+	'morphTargetInfluences',
+	'name',
+	'geometry',
+	'material',
+	'position',
+	'rotation',
+	'scale',
+	'up',
+	'userData',
+	'bindMode',
+	'bindMatrix',
+	'bindMatrixInverse',
+	'skeleton',
+];
+
+function createSpread(child: THREE.Object3D, config: CloneConfig) {
+	const keys = config.keys ?? defaultKeys;
+	let spread: Record<string, any> = {};
+	for (const key of keys) spread[key] = (child as any)[key];
+	if (config.deep) {
+		if (spread.geometry && config.deep !== 'materialsOnly') spread.geometry =
+			spread.geometry.clone();
+		if (spread.material && config.deep !== 'geometriesOnly') spread.material =
+			spread.material.clone();
+	}
+	let injectChildren: OctaneNode;
+	if (config.inject) {
+		if (typeof config.inject === 'function') injectChildren = config.inject(child);
+		else if (isOctaneElement(config.inject)) injectChildren = config.inject;
+		else spread = { ...spread, ...config.inject };
+	}
+	if (child instanceof THREE.Mesh) {
+		if (config.castShadow) spread.castShadow = true;
+		if (config.receiveShadow) spread.receiveShadow = true;
+	}
+	return { spread, injectChildren };
+}
+
+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 !== undefined && 'current' in ref) ref.current = value;
+}
+
+interface CloneNodeProps extends CloneConfig {
+	object: THREE.Object3D;
+	children?: OctaneNode;
+	ref?: ThreeRef<THREE.Object3D>;
+	rootProps?: Record<string, unknown>;
+}
+
+function createShell(object: THREE.Object3D): THREE.Object3D {
+	const Constructor = object.constructor as new () => THREE.Object3D;
+	return new Constructor();
+}
+
+function CloneNode({ object, children, ref, rootProps, ...config }: CloneNodeProps) @{
+	const shell = useMemo(() => createShell(object), [object]);
+	const { spread, injectChildren } = useMemo(() => createSpread(object, config), [
+		object,
+		config.keys,
+		config.deep,
+		config.inject,
+		config.castShadow,
+		config.receiveShadow,
+	]);
+	const objectRef = useMemo(() => (value: THREE.Object3D | null) => assignRef(ref, value), [ref]);
+
+	<primitive object={shell} {...spread} {...rootProps} ref={objectRef}>
+		@for (const child of object.children; key child.uuid) {
+			@if (child.type === 'Bone') {
+				<primitive object={child} />
+			} @else {
+				<CloneNode object={child} {...config} />
+			}
+		}
+		{children}
+		{injectChildren}
+	</primitive>
+}
+
+export function Clone({
+	isChild = false,
+	object,
+	children,
+	deep,
+	castShadow,
+	receiveShadow,
+	inject,
+	keys,
+	ref,
+	...props
+}: CloneProps & { ref?: ThreeRef<THREE.Group> }) @{
+	const resolvedObject = useMemo(() => {
+		if (isChild || Array.isArray(object)) return object;
+		let isSkinned = false;
+		object.traverse((child) => {
+			if ((child as THREE.SkinnedMesh).isSkinnedMesh) isSkinned = true;
+		});
+		return isSkinned
+			? SkeletonUtils.clone(
+					object as unknown as Parameters<typeof SkeletonUtils.clone>[0],
+				) as unknown as THREE.Object3D
+			: object;
+	}, [object, isChild]);
+	const config = { deep, castShadow, receiveShadow, inject, keys };
+	const groupRef = useMemo(() => (value: THREE.Group | null) => assignRef(ref, value), [ref]);
+
+	@if (Array.isArray(resolvedObject)) {
+		<group {...props} ref={groupRef}>
+			@for (const child of resolvedObject; key child.uuid) {
+				<CloneNode object={child} {...config} />
+			}
+			{children}
+		</group>
+	} @else {
+		<CloneNode
+			object={resolvedObject}
+			children={children}
+			ref={ref as ThreeRef<THREE.Object3D> | undefined}
+			rootProps={props}
+			{...config}
+		/>
+	}
+}