@react-three/drei 11.0.0-alpha.1 → 11.0.0-alpha.3

package/experimental/index.mjs

@@ -0,0 +1,353 @@
+import * as THREE from 'three';
+import { REVISION, Object3D, Vector2, Vector3 } from 'three';
+import * as React from 'react';
+import { MarchingCubes as MarchingCubes$1 } from 'three/examples/jsm/objects/MarchingCubes';
+import { useFrame, useThree, extend, applyProps, createPortal } from '@react-three/fiber';
+import { toCreasedNormals } from 'three/examples/jsm/utils/BufferGeometryUtils';
+import { Line2 } from 'three/examples/jsm/lines/Line2.js';
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
+
+const globalContext = /* @__PURE__ */ React.createContext(null);
+const MarchingCubes = /* @__PURE__ */ React.forwardRef(
+  ({ resolution = 28, maxPolyCount = 1e4, enableUvs = false, enableColors = false, children, ...props }, ref) => {
+    const marchingCubesRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => marchingCubesRef.current, []);
+    const marchingCubes = React.useMemo(
+      () => new MarchingCubes$1(resolution, null, enableUvs, enableColors, maxPolyCount),
+      [resolution, maxPolyCount, enableUvs, enableColors]
+    );
+    const api = React.useMemo(() => ({ getParent: () => marchingCubesRef }), []);
+    useFrame(() => {
+      marchingCubes.update();
+      marchingCubes.reset();
+    }, -1);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("primitive", { object: marchingCubes, ref: marchingCubesRef, ...props }, /* @__PURE__ */ React.createElement(globalContext.Provider, { value: api }, children)));
+  }
+);
+const MarchingCube = /* @__PURE__ */ React.forwardRef(
+  ({ strength = 0.5, subtract = 12, color, ...props }, ref) => {
+    const { getParent } = React.useContext(globalContext);
+    const parentRef = React.useMemo(() => getParent(), [getParent]);
+    const cubeRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => cubeRef.current, []);
+    const vec = new THREE.Vector3();
+    useFrame((state) => {
+      if (!parentRef.current || !cubeRef.current) return;
+      cubeRef.current.getWorldPosition(vec);
+      parentRef.current.addBall(0.5 + vec.x * 0.5, 0.5 + vec.y * 0.5, 0.5 + vec.z * 0.5, strength, subtract, color);
+    });
+    return /* @__PURE__ */ React.createElement("group", { ref: cubeRef, ...props });
+  }
+);
+const MarchingPlane = /* @__PURE__ */ React.forwardRef(
+  ({ planeType: _planeType = "x", strength = 0.5, subtract = 12, ...props }, ref) => {
+    const { getParent } = React.useContext(globalContext);
+    const parentRef = React.useMemo(() => getParent(), [getParent]);
+    const wallRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => wallRef.current, []);
+    const planeType = React.useMemo(
+      () => _planeType === "x" ? "addPlaneX" : _planeType === "y" ? "addPlaneY" : "addPlaneZ",
+      [_planeType]
+    );
+    useFrame(() => {
+      if (!parentRef.current || !wallRef.current) return;
+      parentRef.current[planeType](strength, subtract);
+    });
+    return /* @__PURE__ */ React.createElement("group", { ref: wallRef, ...props });
+  }
+);
+
+function shaderMaterial(uniforms, vertexShader, fragmentShader, onInit) {
+  return class extends THREE.ShaderMaterial {
+    static key = THREE.MathUtils.generateUUID();
+    constructor(parameters) {
+      super({ vertexShader, fragmentShader, ...parameters });
+      for (const key in uniforms) {
+        this.uniforms[key] = new THREE.Uniform(uniforms[key]);
+        Object.defineProperty(this, key, {
+          get() {
+            return this.uniforms[key].value;
+          },
+          set(value) {
+            this.uniforms[key].value = value;
+          }
+        });
+      }
+      this.uniforms = THREE.UniformsUtils.clone(this.uniforms);
+    }
+  };
+}
+
+const getVersion = () => parseInt(REVISION.replace(/\D+/g, ""));
+const version = /* @__PURE__ */ getVersion();
+
+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) {
+        oldAngle.current = angle;
+        oldGeometry.current = parent.geometry;
+        let mesh = 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 () => {
+      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", { ref, ...props });
+}
+
+const defaults = {
+  width: 0.2,
+  length: 1,
+  decay: 1,
+  local: false,
+  stride: 0,
+  interval: 1
+};
+const shiftLeft = (collection, steps = 1) => {
+  const lastX = collection[collection.length - 3];
+  const lastY = collection[collection.length - 2];
+  const lastZ = collection[collection.length - 1];
+  collection.set(collection.subarray(steps));
+  const fillStart = collection.length - steps;
+  for (let i = fillStart; i < collection.length; i += 3) {
+    collection[i] = lastX;
+    collection[i + 1] = lastY;
+    collection[i + 2] = lastZ;
+  }
+  return collection;
+};
+function useTrail(target, settings, pointCount) {
+  const { local, decay, interval, stride } = { ...defaults, ...settings };
+  const points = React.useRef(null);
+  const [worldPosition] = React.useState(() => new Vector3());
+  React.useLayoutEffect(() => {
+    if (target) {
+      const pos = target.position;
+      points.current = Float32Array.from({ length: pointCount * 3 }, (_, i) => pos.getComponent(i % 3));
+    }
+  }, [pointCount, target]);
+  const prevPosition = React.useRef(new Vector3());
+  const frameCount = React.useRef(0);
+  useFrame(() => {
+    if (!target) return;
+    if (!points.current) return;
+    if (frameCount.current === 0) {
+      let newPosition;
+      if (local) newPosition = target.position;
+      else {
+        target.getWorldPosition(worldPosition);
+        newPosition = worldPosition;
+      }
+      const steps = 1 * decay;
+      for (let i = 0; i < steps; i++) {
+        if (newPosition.distanceTo(prevPosition.current) < stride) continue;
+        shiftLeft(points.current, 3);
+        points.current.set(newPosition.toArray(), points.current.length - 3);
+      }
+      prevPosition.current.copy(newPosition);
+    }
+    frameCount.current++;
+    frameCount.current = frameCount.current % interval;
+  });
+  return points;
+}
+const Trail = /* @__PURE__ */ React.forwardRef((props, forwardRef) => {
+  const { children } = props;
+  const { width, length, decay, local, stride, interval } = { ...defaults, ...props };
+  const { color = "hotpink", attenuation, target } = props;
+  const size = useThree((s) => s.size);
+  const scene = useThree((s) => s.scene);
+  const ref = React.useRef(null);
+  const [anchor, setAnchor] = React.useState(null);
+  const pointCount = length * 10;
+  const points = useTrail(anchor, { decay, local, stride, interval }, pointCount);
+  React.useEffect(() => {
+    const t = target?.current || ref.current.children.find((o) => o instanceof Object3D);
+    if (t) setAnchor(t);
+  }, [points, target]);
+  const line = React.useMemo(() => new Line2(), []);
+  const geo = React.useMemo(() => {
+    const geometry = new LineGeometry();
+    const initialPositions = new Float32Array(pointCount * 3).fill(0);
+    const initialColors = new Float32Array(pointCount * 3).fill(1);
+    geometry.setPositions(initialPositions);
+    geometry.setColors(initialColors);
+    return geometry;
+  }, [pointCount]);
+  const [resolution] = React.useState(() => new Vector2(size.width, size.height));
+  const colorsRef = React.useRef(new Float32Array(pointCount * 3));
+  const baseColor = React.useMemo(() => new THREE.Color(color), [color]);
+  const mat = React.useMemo(
+    () => new LineMaterial({
+      color: 16777215,
+      linewidth: width,
+      vertexColors: true,
+      resolution: new Vector2(size.width, size.height),
+      transparent: true,
+      alphaToCoverage: true
+    }),
+    [width, size]
+  );
+  React.useEffect(() => {
+    resolution.set(size.width, size.height);
+    mat.resolution.set(size.width, size.height);
+  }, [size, mat, resolution]);
+  useFrame(() => {
+    if (!points.current) return;
+    const count = points.current.length / 3;
+    const colors = colorsRef.current;
+    for (let i = 0; i < count; i++) {
+      const t = i / (count - 1);
+      const alpha = attenuation ? attenuation(t) : t;
+      colors[i * 3 + 0] = baseColor.r * alpha;
+      colors[i * 3 + 1] = baseColor.g * alpha;
+      colors[i * 3 + 2] = baseColor.b * alpha;
+    }
+    geo.setPositions(points.current);
+    geo.setColors(colors);
+    line.computeLineDistances();
+  });
+  React.useLayoutEffect(() => {
+    line.geometry = geo;
+    line.material = mat;
+  }, [line, geo, mat]);
+  return /* @__PURE__ */ React.createElement("group", null, createPortal(/* @__PURE__ */ React.createElement("primitive", { object: line, ref: forwardRef }), scene), /* @__PURE__ */ React.createElement("group", { ref }, children));
+});
+
+export { MarchingCube, MarchingCubes, MarchingPlane, Outlines, Trail, useTrail };