@react-three/drei 9.93.1 → 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/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>>;