@threlte/core
Version:
A 3D framework for the web, built on top of Svelte and Three.js
58 lines (57 loc) • 1.42 kB
JavaScript
/* eslint-disable @typescript-eslint/no-empty-object-type */
import * as THREE from 'three';
import TComp from './T.svelte';
import { setIs } from './utils/useIs';
const catalogue = {};
/**
* Extends the default THREE namespace and allows using custom Three.js objects with `<T>`.
*
* @example
* ```svelte
* <script>
* import { extend, T } from 'threlte'
* import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
*
* extend({ OrbitControls })
* </script>
*
* <T.OrbitControls />
* ```
*/
export const extend = (extensions) => {
Object.assign(catalogue, extensions);
};
/**
* ## `<T>`
*
* Threlte's `<T>` component is a wrapper around Three.js objects. It is a generic component that can be used to create any Three.js object.
*
* @example
*
* ```svelte
* <script>
* import { T } from 'threlte'
* </script>
*
* <T.PerspectiveCamera makeDefault />
*
* <T.Mesh>
* <T.BoxGeometry />
* <T.MeshBasicMaterial color="red" />
* </T.Mesh>
* ```
*/
export const T = new Proxy(TComp, {
get(_target, is) {
// Handle snippets
if (typeof is !== 'string') {
return TComp;
}
const module = catalogue[is] || THREE[is];
if (module === undefined) {
throw new Error(`No Three.js module found for ${is}. Did you forget to extend the catalogue?`);
}
setIs(module);
return TComp;
}
});