@react-three/drei 9.93.0 → 9.94.0

package/README.md

@@ -3638,30 +3638,53 @@ integrations into your view.
 > versions of `@react-three/fiber`.
 
 ```tsx
-<View
-  /** The tracking element, the view will be cut according to its whereabouts */
-  track: React.MutableRefObject<HTMLElement>
+export type ViewProps = {
+  /** Root element type, default: div */
+  as?: string
+  /** CSS id prop */
+  id?: string
+  /** CSS classname prop */
+  className?: string
+  /** CSS style prop */
+  style?: React.CSSProperties
+  /** If the view is visible or not, default: true */
+  visible?: boolean
   /** Views take over the render loop, optional render index (1 by default) */
   index?: number
-  /** If you know your view is always at the same place set this to 1 to avoid needless getBoundingClientRect overhead. The default is Infinity, which is best for css animations */
+  /** If you know your view is always at the same place set this to 1 to avoid needless getBoundingClientRect overhead */
   frames?: number
   /** The scene to render, if you leave this undefined it will render the default scene */
   children?: React.ReactNode
-/>
+  /** The tracking element, the view will be cut according to its whereabouts
+   * @deprecated
+   */
+  track: React.MutableRefObject<HTMLElement>
+}
+
+export type ViewportProps = { Port: () => React.ReactNode } & React.ForwardRefExoticComponent<
+  ViewProps & React.RefAttributes<HTMLElement | THREE.Group>
+>
 ```
 
+You can define as many views as you like, directly mix them into your dom graph, right where you want them to appear. `View` is an unstyled HTML DOM element (by default a div, and it takes the same properties as one). Use `View.Port` inside the canvas to output them. The canvas should ideally fill the entire screen with absolute positioning, underneath HTML or on top of it, as you prefer.
+
 ```jsx
-const container = useRef()
-const tracking = useRef()
 return (
   <main ref={container}>
     <h1>Html content here</h1>
-    <div ref={tracking} style={{ width: 200, height: 200 }} />
+    <View style={{ width: 200, height: 200 }}>
+      <mesh geometry={foo} />
+      <OrbitControls />
+    </View>
+    <View className="canvas-view">
+      <mesh geometry={bar} />
+      <CameraControls />
+    </View>
     <Canvas eventSource={container}>
-      <View track={tracking}>
-        <mesh />
-        <OrbitControls />
-      </View>
+      <View.Port />
+    </Canvas>
+  </main>
+)
 ```
 
 #### RenderTexture

package/core/Instances.d.ts

@@ -33,27 +33,7 @@ declare class PositionMesh extends THREE.Group {
     get geometry(): THREE.BufferGeometry | undefined;
     raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
 }
-export declare const Instance: React.ForwardRefExoticComponent<Omit<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<PositionMesh>, ReactThreeFiber.NodeProps<PositionMesh, typeof PositionMesh>>>, ReactThreeFiber.NonFunctionKeys<{
-    position?: ReactThreeFiber.Vector3 | undefined;
-    up?: ReactThreeFiber.Vector3 | undefined;
-    scale?: ReactThreeFiber.Vector3 | undefined;
-    rotation?: ReactThreeFiber.Euler | undefined;
-    matrix?: ReactThreeFiber.Matrix4 | undefined;
-    quaternion?: ReactThreeFiber.Quaternion | undefined;
-    layers?: ReactThreeFiber.Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-}>> & {
-    position?: ReactThreeFiber.Vector3 | undefined;
-    up?: ReactThreeFiber.Vector3 | undefined;
-    scale?: ReactThreeFiber.Vector3 | undefined;
-    rotation?: ReactThreeFiber.Euler | undefined;
-    matrix?: ReactThreeFiber.Matrix4 | undefined;
-    quaternion?: ReactThreeFiber.Quaternion | undefined;
-    layers?: ReactThreeFiber.Layers | undefined;
-    dispose?: (() => void) | null | undefined;
-} & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers & {
-    context?: React.Context<Api> | undefined;
-}, "ref"> & React.RefAttributes<unknown>>;
+export declare const Instance: React.ForwardRefExoticComponent<Omit<InstanceProps, "ref"> & React.RefAttributes<unknown>>;
 export declare const Instances: ForwardRefComponent<InstancesProps, InstancedMesh>;
 export interface MergedProps extends InstancesProps {
     meshes: THREE.Mesh[];

package/core/Instances.js

@@ -6,6 +6,9 @@ import mergeRefs from 'react-merge-refs';
 import Composer from 'react-composer';
 import { setUpdateRange } from '../helpers/deprecated.js';
 
+function isFunctionChild(value) {
+  return typeof value === 'function';
+}
 const _instanceLocalMatrix = /* @__PURE__ */new THREE.Matrix4();
 const _instanceWorldMatrix = /* @__PURE__ */new THREE.Matrix4();
 const _instanceIntersects = [];
@@ -173,7 +176,7 @@ const Instances = /* @__PURE__ */React.forwardRef(({
     array: colors,
     itemSize: 3,
     usage: THREE.DynamicDrawUsage
-  }), typeof children === 'function' ? /*#__PURE__*/React.createElement(context.Provider, {
+  }), isFunctionChild(children) ? /*#__PURE__*/React.createElement(context.Provider, {
     value: api
   }, children(instance)) : /*#__PURE__*/React.createElement(globalContext.Provider, {
     value: api

package/core/Line.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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=o(e),c=s(t);const u=c.forwardRef((function({points:e,color:t="black",vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){const h=n.useThree((e=>e.size)),p=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[b]=c.useState((()=>new i.LineMaterial)),y=c.useMemo((()=>{const t=l?new i.LineSegmentsGeometry:new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(t.setPositions(n.flat()),o){const e=o.map((e=>e instanceof r.Color?e.toArray():e));t.setColors(e.flat())}return t}),[e,l,o]);return c.useLayoutEffect((()=>{p.computeLineDistances()}),[e,p]),c.useLayoutEffect((()=>{f?b.defines.USE_DASH="":delete b.defines.USE_DASH,b.needsUpdate=!0}),[f,b]),c.useEffect((()=>()=>y.dispose()),[y]),c.createElement("primitive",a.default({object:p,ref:m},d),c.createElement("primitive",{object:y,attach:"geometry"}),c.createElement("primitive",a.default({object:b,attach:"material",color:t,vertexColors:Boolean(o),resolution:[h.width,h.height],linewidth:null!=s?s:u,dashed:f},d)))}));exports.Line=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),n=require("@react-three/fiber"),i=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(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=o(e),c=s(t);const u=c.forwardRef((function({points:e,color:t="black",vertexColors:o,linewidth:s,lineWidth:u,segments:l,dashed:f,...d},m){const h=n.useThree((e=>e.size)),p=c.useMemo((()=>l?new i.LineSegments2:new i.Line2),[l]),[b]=c.useState((()=>new i.LineMaterial)),y=c.useMemo((()=>{const t=l?new i.LineSegmentsGeometry:new i.LineGeometry,n=e.map((e=>{const t=Array.isArray(e);return e instanceof r.Vector3||e instanceof r.Vector4?[e.x,e.y,e.z]:e instanceof r.Vector2?[e.x,e.y,0]:t&&3===e.length?[e[0],e[1],e[2]]:t&&2===e.length?[e[0],e[1],0]:e}));if(t.setPositions(n.flat()),o){const e=o.map((e=>e instanceof r.Color?e.toArray():e));t.setColors(e.flat())}return t}),[e,l,o]);return c.useLayoutEffect((()=>{p.computeLineDistances()}),[e,p]),c.useLayoutEffect((()=>{f?b.defines.USE_DASH="":delete b.defines.USE_DASH,b.needsUpdate=!0}),[f,b]),c.useEffect((()=>()=>y.dispose()),[y]),c.createElement("primitive",a.default({object:p,ref:m},d),c.createElement("primitive",{object:y,attach:"geometry"}),c.createElement("primitive",a.default({object:b,attach:"material",color:t,vertexColors:Boolean(o),resolution:[h.width,h.height],linewidth:null!=s?s:u,dashed:f},d)))}));exports.Line=u;

package/core/Line.js

@@ -1,6 +1,6 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
-import { Vector3, Vector2, Color } from 'three';
+import { Vector3, Vector4, Vector2, Color } from 'three';
 import { useThree } from '@react-three/fiber';
 import { LineSegments2, Line2, LineMaterial, LineSegmentsGeometry, LineGeometry } from 'three-stdlib';
 
@@ -21,7 +21,7 @@ const Line = /* @__PURE__ */React.forwardRef(function Line({
     const geom = segments ? new LineSegmentsGeometry() : new LineGeometry();
     const pValues = points.map(p => {
       const isArray = Array.isArray(p);
-      return p instanceof Vector3 ? [p.x, p.y, p.z] : p instanceof Vector2 ? [p.x, p.y, 0] : isArray && p.length === 3 ? [p[0], p[1], p[2]] : isArray && p.length === 2 ? [p[0], p[1], 0] : p;
+      return p instanceof Vector3 || p instanceof Vector4 ? [p.x, p.y, p.z] : p instanceof Vector2 ? [p.x, p.y, 0] : isArray && p.length === 3 ? [p[0], p[1], p[2]] : isArray && p.length === 2 ? [p[0], p[1], 0] : p;
     });
     geom.setPositions(pValues.flat());
     if (vertexColors) {

package/core/MeshPortalMaterial.d.ts

@@ -25,12 +25,4 @@ export type PortalProps = JSX.IntrinsicElements['shaderMaterial'] & {
     renderPriority?: number;
     events?: boolean;
 };
-export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Omit<ReactThreeFiber.ExtendedColors<ReactThreeFiber.Overwrite<Partial<THREE.ShaderMaterial>, ReactThreeFiber.NodeProps<THREE.ShaderMaterial, [THREE.ShaderMaterialParameters]>>> & {
-    blend?: number | undefined;
-    blur?: number | undefined;
-    resolution?: number | undefined;
-    worldUnits?: boolean | undefined;
-    eventPriority?: number | undefined;
-    renderPriority?: number | undefined;
-    events?: boolean | undefined;
-}, "ref"> & React.RefAttributes<PortalMaterialType>>;
+export declare const MeshPortalMaterial: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<PortalMaterialType>>;