@ohos-ports/react-three-drei 10.7.7-beta.0

package/core/MotionPathControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var s=c(e),a=u(t),i=u(r);const f=i.createContext(null);function l(){const e=i.useContext(f);if(!e)throw new Error("useMotion hook must be used in a MotionPathControls component.");return e}function m({points:e=50,color:t="black"}){const{path:r}=l(),[n,o]=i.useState([]),c=i.useMemo((()=>new a.MeshBasicMaterial({color:t})),[t]),u=i.useMemo((()=>new a.SphereGeometry(.025,16,16)),[]),s=i.useRef([]);return i.useEffect((()=>{r.curves!==s.current&&(o(r.getPoints(e)),s.current=r.curves)})),n.map(((e,t)=>i.createElement("mesh",{key:t,material:c,geometry:u,position:[e.x,e.y,e.z]})))}const p=i.forwardRef((({children:e,curves:t=[],debug:r=!1,debugColor:c="black",object:u,focus:l,loop:p=!0,offset:d,smooth:g=!1,eps:b=1e-5,damping:h=.1,focusDamping:v=.1,maxSpeed:j=1/0,...y},M)=>{const{camera:w}=n.useThree(),P=i.useRef(null),O=i.useRef(null!=d?d:0),x=i.useMemo((()=>new a.CurvePath),[]),C=i.useMemo((()=>({focus:l,object:(null==u?void 0:u.current)instanceof a.Object3D?u:{current:w},path:x,current:O.current,offset:O.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,u]),E=n.useInstanceHandle(P);i.useLayoutEffect((()=>{const e=E.current;x.curves=[];const r=t.length>0?t:e.children.map((e=>e.object));for(let e=0;e<r.length;e++)x.add(r[e]);if(g){const e=x.getPoints("number"==typeof g?g:1),t=new a.CatmullRomCurve3(e);x.curves=[t]}x.updateArcLengths()})),i.useImperativeHandle(M,(()=>Object.assign(P.current,{motion:C})),[C]),i.useLayoutEffect((()=>{O.current=o.misc.repeat(O.current,1)}),[d]);const k=i.useMemo((()=>new a.Vector3),[]);return n.useFrame(((e,t)=>{const r=C.offset;if(o.easing.damp(O,"current",void 0!==d?d:C.current,h,t,j,void 0,b),C.offset=p?o.misc.repeat(O.current,1):o.misc.clamp(O.current,0,1),x.getCurveLengths().length>0){x.getPointAt(C.offset,C.point),x.getTangentAt(C.offset,C.tangent).normalize(),x.getPointAt(o.misc.repeat(O.current-(r-C.offset),1),C.next);const e=(null==u?void 0:u.current)instanceof a.Object3D?u.current:w;e.position.copy(C.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(k):l,v,t,j,void 0,b)}})),i.createElement("group",s.default({ref:P},y),i.createElement(f.Provider,{value:C},e,r&&i.createElement(m,{color:c})))}));exports.MotionPathControls=p,exports.useMotion=l;

package/core/MotionPathControls.d.ts

@@ -0,0 +1,33 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ThreeElements } from '@react-three/fiber';
+export type MotionPathProps = ThreeElements['group'] & {
+    curves?: THREE.Curve<THREE.Vector3>[];
+    debug?: boolean;
+    debugColor?: THREE.ColorRepresentation;
+    object?: React.RefObject<THREE.Object3D>;
+    focus?: [x: number, y: number, z: number] | React.RefObject<THREE.Object3D>;
+    loop?: boolean;
+    offset?: number;
+    smooth?: boolean | number;
+    eps?: number;
+    damping?: number;
+    focusDamping?: number;
+    maxSpeed?: number;
+};
+type MotionState = {
+    current: number;
+    path: THREE.CurvePath<THREE.Vector3>;
+    focus: React.RefObject<THREE.Object3D> | [x: number, y: number, z: number] | undefined;
+    object: React.RefObject<THREE.Object3D>;
+    offset: number;
+    point: THREE.Vector3;
+    tangent: THREE.Vector3;
+    next: THREE.Vector3;
+};
+export type MotionPathRef = THREE.Group & {
+    motion: MotionState;
+};
+export declare function useMotion(): MotionState;
+export declare const MotionPathControls: React.ForwardRefExoticComponent<Omit<MotionPathProps, "ref"> & React.RefAttributes<MotionPathRef>>;
+export {};

package/core/MotionPathControls.js

@@ -0,0 +1,121 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { useThree, useInstanceHandle, useFrame } from '@react-three/fiber';
+import { misc, easing } from 'maath';
+
+const isObject3DRef = ref => (ref == null ? void 0 : ref.current) instanceof THREE.Object3D;
+const MotionContext = /* @__PURE__ */React.createContext(null);
+function useMotion() {
+  const context = React.useContext(MotionContext);
+  if (!context) throw new Error('useMotion hook must be used in a MotionPathControls component.');
+  return context;
+}
+function Debug({
+  points = 50,
+  color = 'black'
+}) {
+  const {
+    path
+  } = useMotion();
+  const [dots, setDots] = React.useState([]);
+  const material = React.useMemo(() => new THREE.MeshBasicMaterial({
+    color: color
+  }), [color]);
+  const geometry = React.useMemo(() => new THREE.SphereGeometry(0.025, 16, 16), []);
+  const last = React.useRef([]);
+  React.useEffect(() => {
+    if (path.curves !== last.current) {
+      setDots(path.getPoints(points));
+      last.current = path.curves;
+    }
+  });
+  return dots.map((item, index) => /*#__PURE__*/React.createElement("mesh", {
+    key: index,
+    material: material,
+    geometry: geometry,
+    position: [item.x, item.y, item.z]
+  }));
+}
+const MotionPathControls = /* @__PURE__ */React.forwardRef(({
+  children,
+  curves = [],
+  debug = false,
+  debugColor = 'black',
+  object,
+  focus,
+  loop = true,
+  offset = undefined,
+  smooth = false,
+  eps = 0.00001,
+  damping = 0.1,
+  focusDamping = 0.1,
+  maxSpeed = Infinity,
+  ...props
+}, fref) => {
+  const {
+    camera
+  } = useThree();
+  const ref = React.useRef(null);
+  const pos = React.useRef(offset !== null && offset !== void 0 ? offset : 0);
+  const path = React.useMemo(() => new THREE.CurvePath(), []);
+  const state = React.useMemo(() => ({
+    focus,
+    object: (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object : {
+      current: camera
+    },
+    path,
+    current: pos.current,
+    offset: pos.current,
+    point: new THREE.Vector3(),
+    tangent: new THREE.Vector3(),
+    next: new THREE.Vector3()
+  }), [focus, object]);
+  const instanceRef = useInstanceHandle(ref);
+  React.useLayoutEffect(() => {
+    const instance = instanceRef.current;
+    path.curves = [];
+    const _curves = curves.length > 0 ? curves : instance.children.map(instance => instance.object);
+    for (let i = 0; i < _curves.length; i++) path.add(_curves[i]);
+
+    // Smoothen curve
+    if (smooth) {
+      const points = path.getPoints(typeof smooth === 'number' ? smooth : 1);
+      const catmull = new THREE.CatmullRomCurve3(points);
+      path.curves = [catmull];
+    }
+    path.updateArcLengths();
+  });
+  React.useImperativeHandle(fref, () => Object.assign(ref.current, {
+    motion: state
+  }), [state]);
+  React.useLayoutEffect(() => {
+    // When offset changes, normalise pos to avoid overshoot spinning
+    pos.current = misc.repeat(pos.current, 1);
+  }, [offset]);
+  const vec = React.useMemo(() => new THREE.Vector3(), []);
+  useFrame((_state, delta) => {
+    const lastOffset = state.offset;
+    easing.damp(pos, 'current', offset !== undefined ? offset : state.current, damping, delta, maxSpeed, undefined, eps);
+    state.offset = loop ? misc.repeat(pos.current, 1) : misc.clamp(pos.current, 0, 1);
+    if (path.getCurveLengths().length > 0) {
+      path.getPointAt(state.offset, state.point);
+      path.getTangentAt(state.offset, state.tangent).normalize();
+      path.getPointAt(misc.repeat(pos.current - (lastOffset - state.offset), 1), state.next);
+      const target = (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object.current : camera;
+      target.position.copy(state.point);
+      if (focus) {
+        easing.dampLookAt(target, isObject3DRef(focus) ? focus.current.getWorldPosition(vec) : focus, focusDamping, delta, maxSpeed, undefined, eps);
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement(MotionContext.Provider, {
+    value: state
+  }, children, debug && /*#__PURE__*/React.createElement(Debug, {
+    color: debugColor
+  })));
+});
+
+export { MotionPathControls, useMotion };

package/core/MultiMaterial.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function u(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var n=t(e),a=u(r);exports.MultiMaterial=function(e){const r=a.useRef(null);return a.useLayoutEffect((()=>{const e=r.current.parent,t=null==e?void 0:e.geometry;if(t){const u=e.material;e.material=r.current.__r3f.children.map((e=>e.object));const n=[...t.groups];return t.clearGroups(),e.material.forEach(((r,u)=>{u<e.material.length-1&&(r.depthWrite=!1),t.addGroup(0,1/0,u)})),()=>{e.material=u,t.groups=n}}})),a.createElement("group",n.default({ref:r},e))};

package/core/MultiMaterial.d.ts

@@ -0,0 +1,4 @@
+import { ThreeElements } from '@react-three/fiber';
+import * as React from 'react';
+export type MultiMaterialProps = Omit<ThreeElements['group'], 'ref'>;
+export declare function MultiMaterial(props: MultiMaterialProps): React.JSX.Element;

package/core/MultiMaterial.js

@@ -0,0 +1,29 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+
+function MultiMaterial(props) {
+  const group = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const parent = group.current.parent;
+    const geometry = parent == null ? void 0 : parent.geometry;
+    if (geometry) {
+      const oldMaterial = parent.material;
+      parent.material = group.current.__r3f.children.map(instance => instance.object);
+      const oldGroups = [...geometry.groups];
+      geometry.clearGroups();
+      parent.material.forEach((material, index) => {
+        if (index < parent.material.length - 1) material.depthWrite = false;
+        geometry.addGroup(0, Infinity, index);
+      });
+      return () => {
+        parent.material = oldMaterial;
+        geometry.groups = oldGroups;
+      };
+    }
+  });
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: group
+  }, props));
+}
+
+export { MultiMaterial };

package/core/NormalTexture.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./Texture.cjs.js"),t=require("three"),n=require("suspend-react");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@react-three/fiber");var o=s(e);function a(e=0,s={},a){const{repeat:u=[1,1],anisotropy:c=1,offset:i=[0,0]}=s,f=n.suspend((()=>fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json").then((e=>e.json()))),["normalsList"]),l=o.useMemo((()=>Object.keys(f).length),[]),p=f[0],d=`https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb/normals/${f[e]||p}`,m=r.useTexture(d,a);return o.useLayoutEffect((()=>{m&&(m.wrapS=m.wrapT=t.RepeatWrapping,m.repeat=new t.Vector2(u[0],u[1]),m.offset=new t.Vector2(i[0],i[1]),m.anisotropy=c)}),[m,c,u,i]),[m,d,l]}exports.NormalTexture=({children:e,id:r,onLoad:t,...n})=>{const s=a(r,n,t);return o.createElement(o.Fragment,null,null==e?void 0:e(s))},exports.useNormalTexture=a;

package/core/NormalTexture.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Texture } from 'three';
+type Settings = {
+    repeat?: number[];
+    anisotropy?: number;
+    offset?: number[];
+};
+export declare function useNormalTexture(id?: number, settings?: Settings, onLoad?: (texture: Texture | Texture[]) => void): [Texture, string, number];
+export declare const NormalTexture: ({ children, id, onLoad, ...settings }: {
+    children?: (texture: ReturnType<typeof useNormalTexture>) => React.ReactNode;
+    id?: Parameters<typeof useNormalTexture>[0];
+    onLoad?: Parameters<typeof useNormalTexture>[2];
+} & Settings) => React.JSX.Element;
+export {};

package/core/NormalTexture.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useTexture } from './Texture.js';
+import { RepeatWrapping, Vector2 } from 'three';
+import { suspend } from 'suspend-react';
+
+const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
+const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
+function useNormalTexture(id = 0, settings = {}, onLoad) {
+  const {
+    repeat = [1, 1],
+    anisotropy = 1,
+    offset = [0, 0]
+  } = settings;
+  const normalsList = suspend(() => fetch(LIST_URL).then(res => res.json()), ['normalsList']);
+  const numTot = React.useMemo(() => Object.keys(normalsList).length, []);
+  const DEFAULT_NORMAL = normalsList[0];
+  const imageName = normalsList[id] || DEFAULT_NORMAL;
+  const url = `${NORMAL_ROOT}/normals/${imageName}`;
+  const normalTexture = useTexture(url, onLoad);
+  React.useLayoutEffect(() => {
+    if (!normalTexture) return;
+    normalTexture.wrapS = normalTexture.wrapT = RepeatWrapping;
+    normalTexture.repeat = new Vector2(repeat[0], repeat[1]);
+    normalTexture.offset = new Vector2(offset[0], offset[1]);
+    normalTexture.anisotropy = anisotropy;
+  }, [normalTexture, anisotropy, repeat, offset]);
+  return [normalTexture, url, numTot];
+}
+
+//
+
+const NormalTexture = ({
+  children,
+  id,
+  onLoad,
+  ...settings
+}) => {
+  const ret = useNormalTexture(id, settings, onLoad);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children == null ? void 0 : children(ret));
+};
+
+export { NormalTexture, useNormalTexture };

package/core/OrbitControls.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=s(e),u=o(r);const c=u.forwardRef((({makeDefault:e,camera:r,regress:s,domElement:o,enableDamping:c=!0,keyEvents:i=!1,onChange:f,onStart:d,onEnd:l,...m},v)=>{const b=t.useThree((e=>e.invalidate)),E=t.useThree((e=>e.camera)),h=t.useThree((e=>e.gl)),p=t.useThree((e=>e.events)),g=t.useThree((e=>e.setEvents)),O=t.useThree((e=>e.set)),j=t.useThree((e=>e.get)),T=t.useThree((e=>e.performance)),y=r||E,L=o||p.connected||h.domElement,q=u.useMemo((()=>new n.OrbitControls(y)),[y]);return t.useFrame((()=>{q.enabled&&q.update()}),-1),u.useEffect((()=>(i&&q.connect(!0===i?L:i),q.connect(L),()=>{q.dispose()})),[i,L,s,q,b]),u.useEffect((()=>{const e=e=>{b(),s&&T.regress(),f&&f(e)},t=e=>{d&&d(e)},r=e=>{l&&l(e)};return q.addEventListener("change",e),q.addEventListener("start",t),q.addEventListener("end",r),()=>{q.removeEventListener("start",t),q.removeEventListener("end",r),q.removeEventListener("change",e)}}),[f,d,l,q,b,g]),u.useEffect((()=>{if(e){const e=j().controls;return O({controls:q}),()=>O({controls:e})}}),[e,q]),u.createElement("primitive",a.default({ref:v,object:q,enableDamping:c},m))}));exports.OrbitControls=c;

package/core/OrbitControls.d.ts

@@ -0,0 +1,22 @@
+import { ReactThreeFiber, ThreeElement } from '@react-three/fiber';
+import { Camera, Event } from 'three';
+import { OrbitControls as OrbitControlsImpl } from 'three-stdlib';
+import { ForwardRefComponent, Overwrite } from '../helpers/ts-utils';
+type ExtractCallback<T, E extends string> = T extends {
+    addEventListener(event: E, callback: infer C): void;
+} ? C : never;
+export type OrbitControlsChangeEvent = Parameters<ExtractCallback<OrbitControlsImpl, 'change'>>[0];
+export type OrbitControlsProps = Omit<Overwrite<ThreeElement<typeof OrbitControlsImpl>, {
+    camera?: Camera;
+    domElement?: HTMLElement;
+    enableDamping?: boolean;
+    makeDefault?: boolean;
+    onChange?: (e?: OrbitControlsChangeEvent) => void;
+    onEnd?: (e?: Event) => void;
+    onStart?: (e?: Event) => void;
+    regress?: boolean;
+    target?: ReactThreeFiber.Vector3;
+    keyEvents?: boolean | HTMLElement;
+}>, 'ref' | 'args'>;
+export declare const OrbitControls: ForwardRefComponent<OrbitControlsProps, OrbitControlsImpl>;
+export {};

package/core/OrbitControls.js

@@ -0,0 +1,79 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import { useThree, useFrame } from '@react-three/fiber';
+import * as React from 'react';
+import { OrbitControls as OrbitControls$1 } from 'three-stdlib';
+
+const OrbitControls = /* @__PURE__ */React.forwardRef(({
+  makeDefault,
+  camera,
+  regress,
+  domElement,
+  enableDamping = true,
+  keyEvents = false,
+  onChange,
+  onStart,
+  onEnd,
+  ...restProps
+}, ref) => {
+  const invalidate = useThree(state => state.invalidate);
+  const defaultCamera = useThree(state => state.camera);
+  const gl = useThree(state => state.gl);
+  const events = useThree(state => state.events);
+  const setEvents = useThree(state => state.setEvents);
+  const set = useThree(state => state.set);
+  const get = useThree(state => state.get);
+  const performance = useThree(state => state.performance);
+  const explCamera = camera || defaultCamera;
+  const explDomElement = domElement || events.connected || gl.domElement;
+  const controls = React.useMemo(() => new OrbitControls$1(explCamera), [explCamera]);
+  useFrame(() => {
+    if (controls.enabled) controls.update();
+  }, -1);
+  React.useEffect(() => {
+    if (keyEvents) {
+      controls.connect(keyEvents === true ? explDomElement : keyEvents);
+    }
+    controls.connect(explDomElement);
+    return () => void controls.dispose();
+  }, [keyEvents, explDomElement, regress, controls, invalidate]);
+  React.useEffect(() => {
+    const callback = e => {
+      invalidate();
+      if (regress) performance.regress();
+      if (onChange) onChange(e);
+    };
+    const onStartCb = e => {
+      if (onStart) onStart(e);
+    };
+    const onEndCb = e => {
+      if (onEnd) onEnd(e);
+    };
+    controls.addEventListener('change', callback);
+    controls.addEventListener('start', onStartCb);
+    controls.addEventListener('end', onEndCb);
+    return () => {
+      controls.removeEventListener('start', onStartCb);
+      controls.removeEventListener('end', onEndCb);
+      controls.removeEventListener('change', callback);
+    };
+  }, [onChange, onStart, onEnd, controls, invalidate, setEvents]);
+  React.useEffect(() => {
+    if (makeDefault) {
+      const old = get().controls;
+      // @ts-ignore https://github.com/three-types/three-ts-types/pull/1398
+      set({
+        controls
+      });
+      return () => set({
+        controls: old
+      });
+    }
+  }, [makeDefault, controls]);
+  return /*#__PURE__*/React.createElement("primitive", _extends({
+    ref: ref,
+    object: controls,
+    enableDamping: enableDamping
+  }, restProps));
+});
+
+export { OrbitControls };

package/core/OrthographicCamera.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("react"),t=require("@react-three/fiber"),u=require("./Fbo.cjs.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var u=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,u.get?u:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("three");var c=n(e),o=a(r);const s=o.forwardRef((({envMap:e,resolution:r=256,frames:n=1/0,children:a,makeDefault:s,...i},l)=>{const f=t.useThree((({set:e})=>e)),d=t.useThree((({camera:e})=>e)),h=t.useThree((({size:e})=>e)),b=o.useRef(null);o.useImperativeHandle(l,(()=>b.current),[]);const g=o.useRef(null),m=u.useFBO(r);o.useLayoutEffect((()=>{i.manual||b.current.updateProjectionMatrix()}),[h,i]),o.useLayoutEffect((()=>{b.current.updateProjectionMatrix()})),o.useLayoutEffect((()=>{if(s){const e=d;return f((()=>({camera:b.current}))),()=>f((()=>({camera:e})))}}),[b,s,f]);let p=0,j=null;const v="function"==typeof a;return t.useFrame((r=>{v&&(n===1/0||p<n)&&(g.current.visible=!1,r.gl.setRenderTarget(m),j=r.scene.background,e&&(r.scene.background=e),r.gl.render(r.scene,b.current),r.scene.background=j,r.gl.setRenderTarget(null),g.current.visible=!0,p++)})),o.createElement(o.Fragment,null,o.createElement("orthographicCamera",c.default({left:h.width/-2,right:h.width/2,top:h.height/2,bottom:h.height/-2,ref:b},i),!v&&a),o.createElement("group",{ref:g},v&&a(m.texture)))}));exports.OrthographicCamera=s;

package/core/OrthographicCamera.d.ts

@@ -0,0 +1,14 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { OrthographicCamera as OrthographicCameraImpl } from 'three';
+import { ThreeElements } from '@react-three/fiber';
+import { ForwardRefComponent } from '../helpers/ts-utils';
+export type OrthographicCameraProps = Omit<ThreeElements['orthographicCamera'], 'ref' | 'children'> & {
+    makeDefault?: boolean;
+    manual?: boolean;
+    children?: React.ReactNode | ((texture: THREE.Texture) => React.ReactNode);
+    frames?: number;
+    resolution?: number;
+    envMap?: THREE.Texture;
+};
+export declare const OrthographicCamera: ForwardRefComponent<OrthographicCameraProps, OrthographicCameraImpl>;

package/core/OrthographicCamera.js

@@ -0,0 +1,76 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { useFBO } from './Fbo.js';
+
+const isFunction = node => typeof node === 'function';
+const OrthographicCamera = /* @__PURE__ */React.forwardRef(({
+  envMap,
+  resolution = 256,
+  frames = Infinity,
+  children,
+  makeDefault,
+  ...props
+}, ref) => {
+  const set = useThree(({
+    set
+  }) => set);
+  const camera = useThree(({
+    camera
+  }) => camera);
+  const size = useThree(({
+    size
+  }) => size);
+  const cameraRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => cameraRef.current, []);
+  const groupRef = React.useRef(null);
+  const fbo = useFBO(resolution);
+  React.useLayoutEffect(() => {
+    if (!props.manual) {
+      cameraRef.current.updateProjectionMatrix();
+    }
+  }, [size, props]);
+  React.useLayoutEffect(() => {
+    cameraRef.current.updateProjectionMatrix();
+  });
+  React.useLayoutEffect(() => {
+    if (makeDefault) {
+      const oldCam = camera;
+      set(() => ({
+        camera: cameraRef.current
+      }));
+      return () => set(() => ({
+        camera: oldCam
+      }));
+    }
+    // The camera should not be part of the dependency list because this components camera is a stable reference
+    // that must exchange the default, and clean up after itself on unmount.
+  }, [cameraRef, makeDefault, set]);
+  let count = 0;
+  let oldEnvMap = null;
+  const functional = isFunction(children);
+  useFrame(state => {
+    if (functional && (frames === Infinity || count < frames)) {
+      groupRef.current.visible = false;
+      state.gl.setRenderTarget(fbo);
+      oldEnvMap = state.scene.background;
+      if (envMap) state.scene.background = envMap;
+      state.gl.render(state.scene, cameraRef.current);
+      state.scene.background = oldEnvMap;
+      state.gl.setRenderTarget(null);
+      groupRef.current.visible = true;
+      count++;
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("orthographicCamera", _extends({
+    left: size.width / -2,
+    right: size.width / 2,
+    top: size.height / 2,
+    bottom: size.height / -2,
+    ref: cameraRef
+  }, props), !functional && children), /*#__PURE__*/React.createElement("group", {
+    ref: groupRef
+  }, functional && children(fbo.texture)));
+});
+
+export { OrthographicCamera };

package/core/Outlines.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),r=require("react"),t=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var l=a(e),p=s(n),u=s(r);const f=t.shaderMaterial({screenspace:!1,color:new p.Color("black"),opacity:1,thickness:.05,size:new p.Vector2},"#include <common>\n   #include <morphtarget_pars_vertex>\n   #include <skinning_pars_vertex>\n   #include <clipping_planes_pars_vertex>\n   uniform float thickness;\n   uniform bool screenspace;\n   uniform vec2 size;\n   void main() {\n     #if defined (USE_SKINNING)\n\t     #include <beginnormal_vertex>\n       #include <morphnormal_vertex>\n       #include <skinbase_vertex>\n       #include <skinnormal_vertex>\n       #include <defaultnormal_vertex>\n     #endif\n     #include <begin_vertex>\n\t   #include <morphtarget_vertex>\n\t   #include <skinning_vertex>\n     #include <project_vertex>\n     #include <clipping_planes_vertex>\n     vec4 tNormal = vec4(normal, 0.0);\n     vec4 tPosition = vec4(transformed, 1.0);\n     #ifdef USE_INSTANCING\n       tNormal = instanceMatrix * tNormal;\n       tPosition = instanceMatrix * tPosition;\n     #endif\n     if (screenspace) {\n       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n     } else {\n       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n       clipPosition.xy += offset;\n       gl_Position = clipPosition;\n     }\n   }",`uniform vec3 color;\n   uniform float opacity;\n   #include <clipping_planes_pars_fragment>\n   void main(){\n     #include <clipping_planes_fragment>\n     gl_FragColor = vec4(color, opacity);\n     #include <tonemapping_fragment>\n     #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n   }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:r=!1,screenspace:t=!1,toneMapped:c=!0,polygonOffset:a=!1,polygonOffsetFactor:s=0,renderOrder:d=0,thickness:m=.05,angle:g=Math.PI,clippingPlanes:v,...h}){const y=u.useRef(null),[_]=u.useState((()=>new f({side:p.BackSide}))),{gl:x}=i.useThree(),M=x.getDrawingBufferSize(new p.Vector2);u.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const P=u.useRef(0),b=u.useRef(null);return u.useLayoutEffect((()=>{const e=y.current;if(!e)return;const n=e.parent;if(n&&n.geometry&&(P.current!==g||b.current!==n.geometry)){var r;P.current=g,b.current=n.geometry;let t=null==(r=e.children)?void 0:r[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new p.SkinnedMesh,t.material=_,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new p.InstancedMesh(n.geometry,_,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new p.Mesh,t.material=_,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry,t.morphTargetInfluences=n.morphTargetInfluences,t.morphTargetDictionary=n.morphTargetDictionary}})),u.useLayoutEffect((()=>{const o=y.current;if(!o)return;const l=o.children[0];if(l){l.renderOrder=d;const p=o.parent;i.applyProps(l,{morphTargetInfluences:p.morphTargetInfluences,morphTargetDictionary:p.morphTargetDictionary}),i.applyProps(l.material,{transparent:r,thickness:m,color:e,opacity:n,size:M,screenspace:t,toneMapped:c,polygonOffset:a,polygonOffsetFactor:s,clippingPlanes:v,clipping:v&&v.length>0})}})),u.useEffect((()=>()=>{const e=y.current;if(!e)return;const n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),u.createElement("group",l.default({ref:y},h))};

package/core/Outlines.d.ts

@@ -0,0 +1,17 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { ReactThreeFiber, ThreeElements } from '@react-three/fiber';
+export type OutlinesProps = Omit<ThreeElements['group'], 'ref'> & {
+    color?: ReactThreeFiber.Color;
+    screenspace?: boolean;
+    opacity?: number;
+    transparent?: boolean;
+    thickness?: number;
+    angle?: number;
+    clippingPlanes?: THREE.Plane[];
+    toneMapped?: boolean;
+    polygonOffset?: boolean;
+    polygonOffsetFactor?: number;
+    renderOrder?: number;
+};
+export declare function Outlines({ color, opacity, transparent, screenspace, toneMapped, polygonOffset, polygonOffsetFactor, renderOrder, thickness, angle, clippingPlanes, ...props }: OutlinesProps): React.JSX.Element;

package/core/Outlines.js

@@ -0,0 +1,166 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
+import * as THREE from 'three';
+import * as React from 'react';
+import { shaderMaterial } from './shaderMaterial.js';
+import { useThree, extend, applyProps } from '@react-three/fiber';
+import { toCreasedNormals } from 'three-stdlib';
+import { version } from '../helpers/constants.js';
+
+const OutlinesMaterial = /* @__PURE__ */shaderMaterial({
+  screenspace: false,
+  color: /* @__PURE__ */new THREE.Color('black'),
+  opacity: 1,
+  thickness: 0.05,
+  size: /* @__PURE__ */new THREE.Vector2()
+}, `#include <common>
+   #include <morphtarget_pars_vertex>
+   #include <skinning_pars_vertex>
+   #include <clipping_planes_pars_vertex>
+   uniform float thickness;
+   uniform bool screenspace;
+   uniform vec2 size;
+   void main() {
+     #if defined (USE_SKINNING)
+	     #include <beginnormal_vertex>
+       #include <morphnormal_vertex>
+       #include <skinbase_vertex>
+       #include <skinnormal_vertex>
+       #include <defaultnormal_vertex>
+     #endif
+     #include <begin_vertex>
+	   #include <morphtarget_vertex>
+	   #include <skinning_vertex>
+     #include <project_vertex>
+     #include <clipping_planes_vertex>
+     vec4 tNormal = vec4(normal, 0.0);
+     vec4 tPosition = vec4(transformed, 1.0);
+     #ifdef USE_INSTANCING
+       tNormal = instanceMatrix * tNormal;
+       tPosition = instanceMatrix * tPosition;
+     #endif
+     if (screenspace) {
+       vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;
+       gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); 
+     } else {
+       vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;
+       vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;
+       vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;
+       clipPosition.xy += offset;
+       gl_Position = clipPosition;
+     }
+   }`, `uniform vec3 color;
+   uniform float opacity;
+   #include <clipping_planes_pars_fragment>
+   void main(){
+     #include <clipping_planes_fragment>
+     gl_FragColor = vec4(color, opacity);
+     #include <tonemapping_fragment>
+     #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+   }`);
+function Outlines({
+  color = 'black',
+  opacity = 1,
+  transparent = false,
+  screenspace = false,
+  toneMapped = true,
+  polygonOffset = false,
+  polygonOffsetFactor = 0,
+  renderOrder = 0,
+  thickness = 0.05,
+  angle = Math.PI,
+  clippingPlanes,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  const [material] = React.useState(() => new OutlinesMaterial({
+    side: THREE.BackSide
+  }));
+  const {
+    gl
+  } = useThree();
+  const contextSize = gl.getDrawingBufferSize(new THREE.Vector2());
+  React.useMemo(() => extend({
+    OutlinesMaterial
+  }), []);
+  const oldAngle = React.useRef(0);
+  const oldGeometry = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const group = ref.current;
+    if (!group) return;
+    const parent = group.parent;
+    if (parent && parent.geometry) {
+      if (oldAngle.current !== angle || oldGeometry.current !== parent.geometry) {
+        var _group$children;
+        oldAngle.current = angle;
+        oldGeometry.current = parent.geometry;
+
+        // Remove old mesh
+        let mesh = (_group$children = group.children) == null ? void 0 : _group$children[0];
+        if (mesh) {
+          if (angle) mesh.geometry.dispose();
+          group.remove(mesh);
+        }
+        if (parent.skeleton) {
+          mesh = new THREE.SkinnedMesh();
+          mesh.material = material;
+          mesh.bind(parent.skeleton, parent.bindMatrix);
+          group.add(mesh);
+        } else if (parent.isInstancedMesh) {
+          mesh = new THREE.InstancedMesh(parent.geometry, material, parent.count);
+          mesh.instanceMatrix = parent.instanceMatrix;
+          group.add(mesh);
+        } else {
+          mesh = new THREE.Mesh();
+          mesh.material = material;
+          group.add(mesh);
+        }
+        mesh.geometry = angle ? toCreasedNormals(parent.geometry, angle) : parent.geometry;
+        mesh.morphTargetInfluences = parent.morphTargetInfluences;
+        mesh.morphTargetDictionary = parent.morphTargetDictionary;
+      }
+    }
+  });
+  React.useLayoutEffect(() => {
+    const group = ref.current;
+    if (!group) return;
+    const mesh = group.children[0];
+    if (mesh) {
+      mesh.renderOrder = renderOrder;
+      const parent = group.parent;
+      applyProps(mesh, {
+        morphTargetInfluences: parent.morphTargetInfluences,
+        morphTargetDictionary: parent.morphTargetDictionary
+      });
+      applyProps(mesh.material, {
+        transparent,
+        thickness,
+        color,
+        opacity,
+        size: contextSize,
+        screenspace,
+        toneMapped,
+        polygonOffset,
+        polygonOffsetFactor,
+        clippingPlanes,
+        clipping: clippingPlanes && clippingPlanes.length > 0
+      });
+    }
+  });
+  React.useEffect(() => {
+    return () => {
+      // Dispose everything on unmount
+      const group = ref.current;
+      if (!group) return;
+      const mesh = group.children[0];
+      if (mesh) {
+        if (angle) mesh.geometry.dispose();
+        group.remove(mesh);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: ref
+  }, props));
+}
+
+export { Outlines };