@octanejs/drei 0.0.1

package/src/core/basic-controls.three.tsrx

@@ -0,0 +1,353 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import {
+	type RootState,
+	type ThreeElement,
+	type ThreeRef,
+	useFrame,
+	useThree,
+} from '@octanejs/three';
+import { useEffect, useMemo, useState } from '@octanejs/three/renderer';
+import type * as THREE from 'three';
+import {
+	ArcballControls as ArcballControlsImpl,
+	DeviceOrientationControls as DeviceOrientationControlsImpl,
+	FirstPersonControls as FirstPersonControlsImpl,
+	FlyControls as FlyControlsImpl,
+	MapControls as MapControlsImpl,
+	OrbitControls as OrbitControlsImpl,
+	TrackballControls as TrackballControlsImpl,
+} from 'three-stdlib';
+
+type ControlCallbacks = {
+	onChange?: (event?: THREE.Event) => void;
+	onStart?: (event?: THREE.Event) => void;
+	onEnd?: (event?: THREE.Event) => void;
+};
+
+type SharedControlProps =
+	ControlCallbacks & {
+		camera?: THREE.Camera;
+		domElement?: HTMLElement;
+		makeDefault?: boolean;
+		regress?: boolean;
+	};
+
+function controlElement(state: RootState, domElement?: HTMLElement): HTMLElement {
+	return (domElement || state.events.connected || state.gl.domElement) as HTMLElement;
+}
+
+function installDefaultControl(
+	makeDefault: boolean | undefined,
+	controls: unknown,
+	get: () => any,
+	set: (value: any) => void,
+) {
+	if (!makeDefault) return;
+	const old = get().controls;
+	set({ controls });
+	return () => set({ controls: old });
+}
+
+export type OrbitControlsChangeEvent =
+	Parameters<Parameters<OrbitControlsImpl['addEventListener']>[1]>[0];
+export type OrbitControlsProps =
+	Omit<ThreeElement<typeof OrbitControlsImpl>, 'ref' | 'args'> & SharedControlProps & {
+		enableDamping?: boolean;
+		keyEvents?: boolean | HTMLElement;
+		target?: THREE.Vector3 | [number, number, number];
+	};
+
+export function OrbitControls({
+	makeDefault,
+	camera,
+	regress,
+	domElement,
+	enableDamping = true,
+	keyEvents = false,
+	onChange,
+	onStart,
+	onEnd,
+	ref,
+	...rest
+}: OrbitControlsProps & { ref?: ThreeRef<OrbitControlsImpl> }) @{
+	const state = useThree();
+	const explicitCamera = camera || state.camera;
+	const explicitElement = controlElement(state, domElement);
+	const controls = useMemo(() => new OrbitControlsImpl(explicitCamera as any), [explicitCamera]);
+	useFrame(() => {
+		if (controls.enabled) controls.update();
+	}, -1);
+	useEffect(() => {
+		if (keyEvents) controls.connect(keyEvents === true ? explicitElement : keyEvents);
+		controls.connect(explicitElement);
+		return () => void controls.dispose();
+	}, [keyEvents, explicitElement, regress, controls, state.invalidate]);
+	useEffect(() => {
+		const change = (event: any) => {
+			state.invalidate();
+			if (regress) state.performance.regress();
+			onChange?.(event);
+		};
+		const start = (event: any) => onStart?.(event);
+		const end = (event: any) => onEnd?.(event);
+		controls.addEventListener('change', change);
+		controls.addEventListener('start', start);
+		controls.addEventListener('end', end);
+		return () => {
+			controls.removeEventListener('start', start);
+			controls.removeEventListener('end', end);
+			controls.removeEventListener('change', change);
+		};
+	}, [onChange, onStart, onEnd, controls, state.invalidate, state.setEvents]);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	<primitive ref={ref as any} object={controls} enableDamping={enableDamping} {...rest as any} />
+}
+
+export type MapControlsProps =
+	Omit<ThreeElement<typeof MapControlsImpl>, 'ref' | 'args'> & SharedControlProps & {
+		target?: THREE.Vector3 | [number, number, number];
+	};
+
+export function MapControls({
+	domElement,
+	camera,
+	makeDefault,
+	onChange,
+	onStart,
+	onEnd,
+	ref,
+	enableDamping = true,
+	...rest
+}: MapControlsProps & { ref?: ThreeRef<MapControlsImpl> }) @{
+	const state = useThree();
+	const explicitCamera = camera || state.camera;
+	const explicitElement = controlElement(state, domElement);
+	const controls = useMemo(() => new MapControlsImpl(explicitCamera as any), [explicitCamera]);
+	useEffect(() => {
+		controls.connect(explicitElement);
+		const change = (event: any) => {
+			state.invalidate();
+			onChange?.(event);
+		};
+		controls.addEventListener('change', change);
+		if (onStart) controls.addEventListener('start', onStart as any);
+		if (onEnd) controls.addEventListener('end', onEnd as any);
+		return () => {
+			controls.dispose();
+			controls.removeEventListener('change', change);
+			if (onStart) controls.removeEventListener('start', onStart as any);
+			if (onEnd) controls.removeEventListener('end', onEnd as any);
+		};
+	}, [onChange, onStart, onEnd, controls, state.invalidate, explicitElement]);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	useFrame(() => controls.update(), -1);
+	<primitive ref={ref as any} object={controls} enableDamping={enableDamping} {...rest as any} />
+}
+
+export type TrackballControlsProps =
+	Omit<ThreeElement<typeof TrackballControlsImpl>, 'ref' | 'args'> & SharedControlProps & {
+		target?: THREE.Vector3 | [number, number, number];
+	};
+
+export function TrackballControls({
+	makeDefault,
+	camera,
+	domElement,
+	regress,
+	onChange,
+	onStart,
+	onEnd,
+	ref,
+	...rest
+}: TrackballControlsProps & { ref?: ThreeRef<TrackballControlsImpl> }) @{
+	const state = useThree();
+	const explicitCamera = camera || state.camera;
+	const explicitElement = controlElement(state, domElement);
+	const controls = useMemo(() => new TrackballControlsImpl(explicitCamera as any), [
+		explicitCamera,
+	]);
+	useFrame(() => {
+		if (controls.enabled) controls.update();
+	}, -1);
+	useEffect(() => {
+		controls.connect(explicitElement);
+		return () => void controls.dispose();
+	}, [explicitElement, regress, controls, state.invalidate]);
+	useEffect(() => {
+		const change = (event: any) => {
+			state.invalidate();
+			if (regress) state.performance.regress();
+			onChange?.(event);
+		};
+		controls.addEventListener('change', change);
+		if (onStart) controls.addEventListener('start', onStart as any);
+		if (onEnd) controls.addEventListener('end', onEnd as any);
+		return () => {
+			if (onStart) controls.removeEventListener('start', onStart as any);
+			if (onEnd) controls.removeEventListener('end', onEnd as any);
+			controls.removeEventListener('change', change);
+		};
+	}, [onChange, onStart, onEnd, controls, state.invalidate]);
+	useEffect(() => controls.handleResize(), [state.viewport]);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	<primitive ref={ref as any} object={controls} {...rest as any} />
+}
+
+export type ArcballControlsProps =
+	Omit<ThreeElement<typeof ArcballControlsImpl>, 'ref' | 'args'> & SharedControlProps & {
+		target?: THREE.Vector3 | [number, number, number];
+	};
+
+export function ArcballControls({
+	camera,
+	makeDefault,
+	regress,
+	domElement,
+	onChange,
+	onStart,
+	onEnd,
+	ref,
+	...rest
+}: ArcballControlsProps & { ref?: ThreeRef<ArcballControlsImpl> }) @{
+	const state = useThree();
+	const explicitCamera = camera || state.camera;
+	const explicitElement = controlElement(state, domElement);
+	const controls = useMemo(() => new ArcballControlsImpl(explicitCamera as any), [explicitCamera]);
+	useFrame(() => {
+		if (controls.enabled) controls.update();
+	}, -1);
+	useEffect(() => {
+		controls.connect(explicitElement);
+		return () => void controls.dispose();
+	}, [explicitElement, regress, controls, state.invalidate]);
+	useEffect(() => {
+		const change = (event: any) => {
+			state.invalidate();
+			if (regress) state.performance.regress();
+			onChange?.(event);
+		};
+		controls.addEventListener('change', change);
+		if (onStart) controls.addEventListener('start', onStart as any);
+		if (onEnd) controls.addEventListener('end', onEnd as any);
+		return () => {
+			controls.removeEventListener('change', change);
+			if (onStart) controls.removeEventListener('start', onStart as any);
+			if (onEnd) controls.removeEventListener('end', onEnd as any);
+		};
+	}, [onChange, onStart, onEnd]);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	<primitive ref={ref as any} object={controls} {...rest as any} />
+}
+
+export type FlyControlsProps =
+	Omit<ThreeElement<typeof FlyControlsImpl>, 'ref' | 'args'> & {
+		onChange?: (event?: THREE.Event) => void;
+		domElement?: HTMLElement;
+		makeDefault?: boolean;
+	};
+
+export function FlyControls({
+	domElement,
+	onChange,
+	makeDefault,
+	ref,
+	...rest
+}: FlyControlsProps & { ref?: ThreeRef<FlyControlsImpl> }) @{
+	const state = useThree();
+	const explicitElement = controlElement(state, domElement);
+	const controls = useMemo(() => new FlyControlsImpl(state.camera as any), [state.camera]);
+	useEffect(() => {
+		controls.connect(explicitElement);
+		return () => void controls.dispose();
+	}, [explicitElement, controls, state.invalidate]);
+	useEffect(() => {
+		const change = (event: any) => {
+			state.invalidate();
+			onChange?.(event);
+		};
+		controls.addEventListener?.('change', change);
+		return () => controls.removeEventListener?.('change', change);
+	}, [onChange, state.invalidate]);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	useFrame((_, delta) => controls.update(delta));
+	<primitive ref={ref as any} object={controls} {...rest as any} />
+}
+
+export type FirstPersonControlsProps =
+	Omit<ThreeElement<typeof FirstPersonControlsImpl>, 'ref' | 'args'> & {
+		domElement?: HTMLElement;
+		makeDefault?: boolean;
+	};
+
+export function FirstPersonControls({
+	domElement,
+	makeDefault,
+	ref,
+	...props
+}: FirstPersonControlsProps & { ref?: ThreeRef<FirstPersonControlsImpl> }) @{
+	const state = useThree();
+	const explicitElement = controlElement(state, domElement);
+	const [controls] = useState(
+		() => new FirstPersonControlsImpl(state.camera as any, explicitElement),
+	);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	useFrame((_, delta) => controls.update(delta), -1);
+	<primitive ref={ref as any} object={controls} {...props as any} />
+}
+
+export type DeviceOrientationControlsProps =
+	Omit<ThreeElement<typeof DeviceOrientationControlsImpl>, 'ref' | 'args'> & {
+		camera?: THREE.Camera;
+		onChange?: (event?: THREE.Event) => void;
+		makeDefault?: boolean;
+	};
+
+export function DeviceOrientationControls({
+	camera,
+	onChange,
+	makeDefault,
+	ref,
+	...rest
+}: DeviceOrientationControlsProps & { ref?: ThreeRef<DeviceOrientationControlsImpl> }) @{
+	const state = useThree();
+	const explicitCamera = camera || state.camera;
+	const controls = useMemo(() => new DeviceOrientationControlsImpl(explicitCamera as any), [
+		explicitCamera,
+	]);
+	useEffect(() => {
+		const change = (event: any) => {
+			state.invalidate();
+			onChange?.(event);
+		};
+		controls.addEventListener?.('change', change);
+		return () => controls.removeEventListener?.('change', change);
+	}, [onChange, controls, state.invalidate]);
+	useFrame(() => controls.update(), -1);
+	useEffect(() => {
+		controls.connect();
+		return () => controls.dispose();
+	}, [controls]);
+	useEffect(() => installDefaultControl(makeDefault, controls, state.get, state.set), [
+		makeDefault,
+		controls,
+	]);
+	<primitive ref={ref as any} object={controls} {...rest as any} />
+}

package/src/core/calculateScaleFactor.ts

@@ -0,0 +1,42 @@
+import type { Size } from '@octanejs/three';
+import * as THREE from 'three';
+
+const tV0 = /* @__PURE__ */ new THREE.Vector3();
+const tV1 = /* @__PURE__ */ new THREE.Vector3();
+const tV2 = /* @__PURE__ */ new THREE.Vector3();
+
+const getPoint2 = (point3: THREE.Vector3, camera: THREE.Camera, size: Size) => {
+	const widthHalf = size.width / 2;
+	const heightHalf = size.height / 2;
+	camera.updateMatrixWorld(false);
+	const vector = point3.project(camera);
+	vector.x = vector.x * widthHalf + widthHalf;
+	vector.y = -(vector.y * heightHalf) + heightHalf;
+	return vector;
+};
+
+const getPoint3 = (point2: THREE.Vector3, camera: THREE.Camera, size: Size, zValue: number = 1) => {
+	const vector = tV0.set(
+		(point2.x / size.width) * 2 - 1,
+		-(point2.y / size.height) * 2 + 1,
+		zValue,
+	);
+	vector.unproject(camera);
+	return vector;
+};
+
+export const calculateScaleFactor = (
+	point3: THREE.Vector3,
+	radiusPx: number,
+	camera: THREE.Camera,
+	size: Size,
+) => {
+	const point2 = getPoint2(tV2.copy(point3), camera, size);
+	let scale = 0;
+	for (let i = 0; i < 2; ++i) {
+		const point2off = tV1.copy(point2).setComponent(i, point2.getComponent(i) + radiusPx);
+		const point3off = getPoint3(point2off, camera, size, point2off.z);
+		scale = Math.max(scale, point3.distanceTo(point3off));
+	}
+	return scale;
+};

package/src/core/cameras.three.tsrx

@@ -0,0 +1,230 @@
+/** @jsxImportSource @octanejs/three/intrinsics */
+import { type ThreeElements, type ThreeRef, useFrame, useThree } from '@octanejs/three';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import { slotDefault } from './compiler-slot.js';
+import { useFBO } from './Fbo.three.tsrx';
+import {
+	isRenderFunction,
+	resolveRenderChildren,
+	type RenderChildren,
+} from './octane-children.js';
+
+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;
+}
+
+type CameraChildren = RenderChildren<THREE.Texture>;
+
+export type PerspectiveCameraProps =
+	Omit<ThreeElements['perspectiveCamera'], 'ref' | 'children'> & {
+		makeDefault?: boolean;
+		manual?: boolean;
+		children?: CameraChildren;
+		frames?: number;
+		resolution?: number;
+		envMap?: THREE.Texture;
+	};
+
+export function PerspectiveCamera({
+	envMap,
+	resolution = 256,
+	frames = Infinity,
+	makeDefault,
+	children,
+	ref,
+	...props
+}: PerspectiveCameraProps & { ref?: ThreeRef<THREE.PerspectiveCamera> }) @{
+	const set = useThree((state) => state.set);
+	const camera = useThree((state) => state.camera);
+	const size = useThree((state) => state.size);
+	const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
+	const groupRef = useRef<THREE.Group | null>(null);
+	const fbo = useFBO(resolution);
+	const mergedRef = useMemo(
+		() => (value: THREE.PerspectiveCamera | null) => {
+			cameraRef.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useLayoutEffect(() => {
+		if (!props.manual && cameraRef.current) cameraRef.current.aspect = size.width / size.height;
+	}, [size, props]);
+	useLayoutEffect(() => cameraRef.current?.updateProjectionMatrix());
+	let count = 0;
+	let oldEnvironment: THREE.Color | THREE.Texture | null = null;
+	const functional = isRenderFunction(children);
+	useFrame((state) => {
+		if (
+			functional && cameraRef.current && groupRef.current && (frames === Infinity || count < frames)
+		) {
+			groupRef.current.visible = false;
+			state.gl.setRenderTarget?.(fbo);
+			oldEnvironment = state.scene.background;
+			if (envMap) state.scene.background = envMap;
+			state.gl.render(state.scene, cameraRef.current);
+			state.scene.background = oldEnvironment;
+			state.gl.setRenderTarget?.(null);
+			groupRef.current.visible = true;
+			count++;
+		}
+	});
+	useLayoutEffect(() => {
+		if (makeDefault && cameraRef.current) {
+			const oldCamera = camera;
+			set(() => ({ camera: cameraRef.current! }));
+			return () => set(() => ({ camera: oldCamera }));
+		}
+	}, [cameraRef, makeDefault, set]);
+	<>
+		<perspectiveCamera ref={mergedRef} {...props as any}>
+			{!functional && children}
+		</perspectiveCamera>
+		<group ref={groupRef}>{functional && children(fbo.texture)}</group>
+	</>
+}
+
+export type OrthographicCameraProps =
+	Omit<ThreeElements['orthographicCamera'], 'ref' | 'children'> & {
+		makeDefault?: boolean;
+		manual?: boolean;
+		children?: CameraChildren;
+		frames?: number;
+		resolution?: number;
+		envMap?: THREE.Texture;
+	};
+
+export function OrthographicCamera({
+	envMap,
+	resolution = 256,
+	frames = Infinity,
+	children,
+	makeDefault,
+	ref,
+	...props
+}: OrthographicCameraProps & { ref?: ThreeRef<THREE.OrthographicCamera> }) @{
+	const set = useThree((state) => state.set);
+	const camera = useThree((state) => state.camera);
+	const size = useThree((state) => state.size);
+	const cameraRef = useRef<THREE.OrthographicCamera | null>(null);
+	const groupRef = useRef<THREE.Group | null>(null);
+	const fbo = useFBO(resolution);
+	const mergedRef = useMemo(
+		() => (value: THREE.OrthographicCamera | null) => {
+			cameraRef.current = value;
+			assignRef(ref, value);
+		},
+		[ref],
+	);
+	useLayoutEffect(() => {
+		if (!props.manual) cameraRef.current?.updateProjectionMatrix();
+	}, [size, props]);
+	useLayoutEffect(() => cameraRef.current?.updateProjectionMatrix());
+	useLayoutEffect(() => {
+		if (makeDefault && cameraRef.current) {
+			const oldCamera = camera;
+			set(() => ({ camera: cameraRef.current! }));
+			return () => set(() => ({ camera: oldCamera }));
+		}
+	}, [cameraRef, makeDefault, set]);
+	let count = 0;
+	let oldEnvironment: THREE.Color | THREE.Texture | null = null;
+	const functional = isRenderFunction(children);
+	useFrame((state) => {
+		if (
+			functional && cameraRef.current && groupRef.current && (frames === Infinity || count < frames)
+		) {
+			groupRef.current.visible = false;
+			state.gl.setRenderTarget?.(fbo);
+			oldEnvironment = state.scene.background;
+			if (envMap) state.scene.background = envMap;
+			state.gl.render(state.scene, cameraRef.current);
+			state.scene.background = oldEnvironment;
+			state.gl.setRenderTarget?.(null);
+			groupRef.current.visible = true;
+			count++;
+		}
+	});
+	<>
+		<orthographicCamera
+			left={size.width / -2}
+			right={size.width / 2}
+			top={size.height / 2}
+			bottom={size.height / -2}
+			ref={mergedRef}
+			{...props as any}
+		>
+			{!functional && children}
+		</orthographicCamera>
+		<group ref={groupRef}>{functional && children(fbo.texture)}</group>
+	</>
+}
+
+export type CubeCameraOptions = {
+	resolution?: number;
+	near?: number;
+	far?: number;
+	envMap?: THREE.Texture;
+	fog?: THREE.Fog | THREE.FogExp2;
+};
+
+export function useCubeCamera(options: CubeCameraOptions = {}) {
+	const { resolution = 256, near = 0.1, far = 1000, envMap, fog } = slotDefault(options, {});
+	const gl = useThree((state) => state.gl);
+	const scene = useThree((state) => state.scene);
+	const fbo = useMemo(() => {
+		const value = new THREE.WebGLCubeRenderTarget(resolution);
+		value.texture.type = THREE.HalfFloatType;
+		return value;
+	}, [resolution]);
+	useEffect(() => () => fbo.dispose(), [fbo]);
+	const camera = useMemo(() => new THREE.CubeCamera(near, far, fbo), [near, far, fbo]);
+	let originalFog: THREE.Fog | THREE.FogExp2 | null;
+	let originalBackground: THREE.Color | THREE.Texture | null;
+	const update = useCallback(() => {
+		originalFog = scene.fog;
+		originalBackground = scene.background;
+		scene.background = envMap || originalBackground;
+		scene.fog = fog || originalFog;
+		camera.update(gl as unknown as THREE.WebGLRenderer, scene);
+		scene.fog = originalFog;
+		scene.background = originalBackground;
+	}, [gl, scene, camera]);
+	return { fbo, camera, update };
+}
+
+export type CubeCameraProps =
+	Omit<ThreeElements['group'], 'children'> & CubeCameraOptions & {
+		children?: CameraChildren;
+		frames?: number;
+	};
+
+export function CubeCamera({
+	children,
+	frames = Infinity,
+	resolution,
+	near,
+	far,
+	envMap,
+	fog,
+	...props
+}: CubeCameraProps) @{
+	const ref = useRef<THREE.Group | null>(null);
+	const { fbo, camera, update } = useCubeCamera({ resolution, near, far, envMap, fog });
+	let count = 0;
+	useFrame(() => {
+		if (ref.current && (frames === Infinity || count < frames)) {
+			ref.current.visible = false;
+			update();
+			ref.current.visible = true;
+			count++;
+		}
+	});
+	<group {...props}>
+		<primitive object={camera} />
+		<group ref={ref}>{resolveRenderChildren(children, fbo.texture)}</group>
+	</group>
+}

package/src/core/catalog-resource.ts

@@ -0,0 +1,12 @@
+export const MATCAP_LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
+export const MATCAP_ROOT =
+	'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
+export const NORMAL_ROOT =
+	'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
+export const NORMAL_LIST_URL =
+	'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
+
+export async function loadCatalogList(url: string): Promise<Record<string, string>> {
+	const response = await fetch(url);
+	return response.json() as Promise<Record<string, string>>;
+}