@react-three/drei 9.77.0 → 9.77.1

package/core/Grid.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),i=require("three"),o=require("@react-three/fiber"),r=require("./shaderMaterial.cjs.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var o=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(n,i,o.get?o:{enumerable:!0,get:function(){return e[i]}})}})),n.default=e,Object.freeze(n)}var a=t(e),c=l(n),s=l(i);const f=r.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new s.Color,sectionColor:new s.Color,infiniteGrid:!1,followCamera:!1},"\n    varying vec3 worldPosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      worldPosition = position.xzy;\n      if (infiniteGrid) worldPosition *= 1.0 + fadeDistance;\n      if (followCamera) worldPosition.xz +=cameraPosition.xz;\n\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPosition, 1.0);\n    }\n  ","\n    varying vec3 worldPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = worldPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1. - thickness;\n      return 1.0 - min(line, 1.);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / fadeDistance, 1.);\n      vec3 color = mix(cellColor, sectionColor, min(1.,sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d,fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <encodings_fragment>\n    }\n  "),d=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:i="#2080ff",cellSize:r=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:d=!1,fadeDistance:u=100,fadeStrength:g=1,cellThickness:m=.5,sectionThickness:h=1,side:C=s.BackSide,...v},w)=>{o.extend({GridMaterial:f});const z={cellSize:r,sectionSize:t,cellColor:n,sectionColor:i,cellThickness:m,sectionThickness:h},x={fadeDistance:u,fadeStrength:g,infiniteGrid:d,followCamera:l};return c.createElement("mesh",a.default({ref:w,frustumCulled:!1},v),c.createElement("gridMaterial",a.default({transparent:!0,"extensions-derivatives":!0,side:C},z,x)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("react"),o=require("three"),i=require("react-merge-refs"),r=require("@react-three/fiber"),t=require("./shaderMaterial.cjs.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function a(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(o){if("default"!==o){var i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,i.get?i:{enumerable:!0,get:function(){return e[o]}})}})),n.default=e,Object.freeze(n)}var s=l(e),c=a(n),f=a(o),d=l(i);const u=t.shaderMaterial({cellSize:.5,sectionSize:1,fadeDistance:100,fadeStrength:1,cellThickness:.5,sectionThickness:1,cellColor:new f.Color,sectionColor:new f.Color,infiniteGrid:!1,followCamera:!1,worldCamProjPosition:new f.Vector3,worldPlanePosition:new f.Vector3},"\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform vec3 worldPlanePosition;\n    uniform float fadeDistance;\n    uniform bool infiniteGrid;\n    uniform bool followCamera;\n\n    void main() {\n      localPosition = position.xzy;\n      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;\n      \n      worldPosition = modelMatrix * vec4(localPosition, 1.0);\n      if (followCamera) {\n        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);\n        localPosition = (inverse(modelMatrix) * worldPosition).xyz;\n      }\n\n      gl_Position = projectionMatrix * viewMatrix * worldPosition;\n    }\n  ","\n    varying vec3 localPosition;\n    varying vec4 worldPosition;\n\n    uniform vec3 worldCamProjPosition;\n    uniform float cellSize;\n    uniform float sectionSize;\n    uniform vec3 cellColor;\n    uniform vec3 sectionColor;\n    uniform float fadeDistance;\n    uniform float fadeStrength;\n    uniform float cellThickness;\n    uniform float sectionThickness;\n\n    float getGrid(float size, float thickness) {\n      vec2 r = localPosition.xz / size;\n      vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);\n      float line = min(grid.x, grid.y) + 1.0 - thickness;\n      return 1.0 - min(line, 1.0);\n    }\n\n    void main() {\n      float g1 = getGrid(cellSize, cellThickness);\n      float g2 = getGrid(sectionSize, sectionThickness);\n\n      float dist = distance(worldCamProjPosition, worldPosition.xyz);\n      float d = 1.0 - min(dist / fadeDistance, 1.0);\n      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));\n\n      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));\n      gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);\n      if (gl_FragColor.a <= 0.0) discard;\n\n      #include <tonemapping_fragment>\n      #include <encodings_fragment>\n    }\n  "),m=c.forwardRef((({args:e,cellColor:n="#000000",sectionColor:o="#2080ff",cellSize:i=.5,sectionSize:t=1,followCamera:l=!1,infiniteGrid:a=!1,fadeDistance:m=100,fadeStrength:g=1,cellThickness:P=.5,sectionThickness:w=1,side:v=f.BackSide,...C},h)=>{r.extend({GridMaterial:u});const p=c.useRef(null);r.useFrame((e=>{const n=(new f.Plane).setFromNormalAndCoplanarPoint(new f.Vector3(0,1,0),new f.Vector3(0,0,0)).applyMatrix4(p.current.matrixWorld),o=p.current.material,i=o.uniforms.worldCamProjPosition,r=o.uniforms.worldPlanePosition;n.projectPoint(e.camera.position,i.value),r.value.set(0,0,0).applyMatrix4(p.current.matrixWorld)}));const x={cellSize:i,sectionSize:t,cellColor:n,sectionColor:o,cellThickness:P,sectionThickness:w},z={fadeDistance:m,fadeStrength:g,infiniteGrid:a,followCamera:l};return c.createElement("mesh",s.default({ref:d.default([p,h]),frustumCulled:!1},C),c.createElement("gridMaterial",s.default({transparent:!0,"extensions-derivatives":!0,side:v},x,z)),c.createElement("planeGeometry",{args:e}))}));exports.Grid=m;

package/core/Grid.js

@@ -1,7 +1,8 @@
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
-import { extend } from '@react-three/fiber';
+import mergeRefs from 'react-merge-refs';
+import { extend, useFrame } from '@react-three/fiber';
 import { shaderMaterial } from './shaderMaterial.js';
 
 const GridMaterial = shaderMaterial({
@@ -14,26 +15,40 @@ const GridMaterial = shaderMaterial({
   cellColor: new THREE.Color(),
   sectionColor: new THREE.Color(),
   infiniteGrid: false,
-  followCamera: false
+  followCamera: false,
+  worldCamProjPosition: new THREE.Vector3(),
+  worldPlanePosition: new THREE.Vector3()
 },
 /* glsl */
 `
-    varying vec3 worldPosition;
+    varying vec3 localPosition;
+    varying vec4 worldPosition;
+
+    uniform vec3 worldCamProjPosition;
+    uniform vec3 worldPlanePosition;
     uniform float fadeDistance;
     uniform bool infiniteGrid;
     uniform bool followCamera;
 
     void main() {
-      worldPosition = position.xzy;
-      if (infiniteGrid) worldPosition *= 1.0 + fadeDistance;
-      if (followCamera) worldPosition.xz +=cameraPosition.xz;
+      localPosition = position.xzy;
+      if (infiniteGrid) localPosition *= 1.0 + fadeDistance;
+      
+      worldPosition = modelMatrix * vec4(localPosition, 1.0);
+      if (followCamera) {
+        worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);
+        localPosition = (inverse(modelMatrix) * worldPosition).xyz;
+      }
 
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(worldPosition, 1.0);
+      gl_Position = projectionMatrix * viewMatrix * worldPosition;
     }
   `,
 /* glsl */
 `
-    varying vec3 worldPosition;
+    varying vec3 localPosition;
+    varying vec4 worldPosition;
+
+    uniform vec3 worldCamProjPosition;
     uniform float cellSize;
     uniform float sectionSize;
     uniform vec3 cellColor;
@@ -44,20 +59,21 @@ const GridMaterial = shaderMaterial({
     uniform float sectionThickness;
 
     float getGrid(float size, float thickness) {
-      vec2 r = worldPosition.xz / size;
+      vec2 r = localPosition.xz / size;
       vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
-      float line = min(grid.x, grid.y) + 1. - thickness;
-      return 1.0 - min(line, 1.);
+      float line = min(grid.x, grid.y) + 1.0 - thickness;
+      return 1.0 - min(line, 1.0);
     }
 
     void main() {
       float g1 = getGrid(cellSize, cellThickness);
       float g2 = getGrid(sectionSize, sectionThickness);
 
-      float d = 1.0 - min(distance(cameraPosition.xz, worldPosition.xz) / fadeDistance, 1.);
-      vec3 color = mix(cellColor, sectionColor, min(1.,sectionThickness * g2));
+      float dist = distance(worldCamProjPosition, worldPosition.xyz);
+      float d = 1.0 - min(dist / fadeDistance, 1.0);
+      vec3 color = mix(cellColor, sectionColor, min(1.0, sectionThickness * g2));
 
-      gl_FragColor = vec4(color, (g1 + g2) * pow(d,fadeStrength));
+      gl_FragColor = vec4(color, (g1 + g2) * pow(d, fadeStrength));
       gl_FragColor.a = mix(0.75 * gl_FragColor.a, gl_FragColor.a, g2);
       if (gl_FragColor.a <= 0.0) discard;
 
@@ -83,6 +99,15 @@ const Grid = /*#__PURE__*/React.forwardRef(({
   extend({
     GridMaterial
   });
+  const ref = React.useRef(null);
+  useFrame(state => {
+    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 0)).applyMatrix4(ref.current.matrixWorld);
+    const gridMaterial = ref.current.material;
+    const worldCamProjPosition = gridMaterial.uniforms.worldCamProjPosition;
+    const worldPlanePosition = gridMaterial.uniforms.worldPlanePosition;
+    plane.projectPoint(state.camera.position, worldCamProjPosition.value);
+    worldPlanePosition.value.set(0, 0, 0).applyMatrix4(ref.current.matrixWorld);
+  });
   const uniforms1 = {
     cellSize,
     sectionSize,
@@ -98,7 +123,7 @@ const Grid = /*#__PURE__*/React.forwardRef(({
     followCamera
   };
   return /*#__PURE__*/React.createElement("mesh", _extends({
-    ref: fRef,
+    ref: mergeRefs([ref, fRef]),
     frustumCulled: false
   }, props), /*#__PURE__*/React.createElement("gridMaterial", _extends({
     transparent: true,