@react-three/drei 8.2.1 → 8.5.0

package/core/useMatcapTexture.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTexture } from './useTexture.js';
-import { matcapList } from '../helpers/matcap-assets.js';
+import { useAsset } from 'use-asset';
 
 function getFormatString(format) {
   switch (format) {
@@ -21,9 +21,14 @@ function getFormatString(format) {
   }
 }
 
+const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
 const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
-const DEFAULT_MATCAP = matcapList[0];
 function useMatcapTexture(id = 0, format = 1024) {
+  const matcapList = useAsset(() => new Promise(async resolve => {
+    const matcapList = await fetch(LIST_URL).then(res => res.json());
+    resolve(matcapList);
+  }), 'matcapList');
+  const DEFAULT_MATCAP = matcapList[0];
   const numTot = React.useMemo(() => Object.keys(matcapList).length, []);
   const fileHash = React.useMemo(() => {
     if (typeof id === 'string') {

package/core/useNormalTexture.cjs.js

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

package/core/useNormalTexture.js

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import { useTexture } from './useTexture.js';
 import { RepeatWrapping, Vector2 } from 'three';
-import { normalsList } from '../helpers/normal-assets.js';
+import { useAsset } from 'use-asset';
 
-const NORMAL_ROOT = 'https://rawcdn.githack.com/emmelleppi/normal-maps/f24c810fc1d86b5b1e5dfea914b668f70b5f2923';
-const DEFAULT_NORMAL = normalsList[0];
+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 = {}) {
   const {
     repeat = [1, 1],
     anisotropy = 1,
     offset = [0, 0]
   } = settings;
+  const normalsList = useAsset(() => new Promise(async resolve => {
+    const normalsList = await fetch(LIST_URL).then(res => res.json());
+    resolve(normalsList);
+  }), '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);

package/helpers/Position.cjs.js

@@ -1 +1 @@
-"use strict";function e(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}Object.defineProperty(exports,"__esModule",{value:!0});var r=e(require("three"));class t extends r.Group{constructor(){super(),this.color=new r.Color("white")}}exports.Position=t;
+"use strict";function e(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)}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("three"));const r=new t.Matrix4,n=new t.Matrix4,i=[],s=new t.Mesh;class o extends t.Group{constructor(){super(),this.color=new t.Color("white"),this.instance={current:void 0},this.instanceKey={current:void 0}}get geometry(){var e;return null==(e=this.instance.current)?void 0:e.geometry}raycast(e,t){const o=this.instance.current;if(!o)return;if(!o.geometry||!o.material)return;s.geometry=o.geometry;const c=o.matrixWorld;let a=o.userData.instances.indexOf(this.instanceKey);if(-1!==a){o.getMatrixAt(a,r),n.multiplyMatrices(c,r),s.matrixWorld=n,s.raycast(e,i);for(let e=0,r=i.length;e<r;e++){const r=i[e];r.instanceId=a,r.object=this,t.push(r)}i.length=0}}}exports.Position=o;

package/helpers/Position.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import * as THREE from 'three';
 import { ReactThreeFiber } from '@react-three/fiber';
 declare global {
@@ -9,5 +10,9 @@ declare global {
 }
 export declare class Position extends THREE.Group {
     color: THREE.Color;
+    instance: React.MutableRefObject<THREE.InstancedMesh | undefined>;
+    instanceKey: React.MutableRefObject<JSX.IntrinsicElements['position'] | undefined>;
     constructor();
+    get geometry(): THREE.BufferGeometry | undefined;
+    raycast(raycaster: any, intersects: any): void;
 }

package/helpers/Position.js

@@ -1,9 +1,60 @@
 import * as THREE from 'three';
 
+const _instanceLocalMatrix = /*@__PURE__*/new THREE.Matrix4();
+
+const _instanceWorldMatrix = /*@__PURE__*/new THREE.Matrix4();
+
+const _instanceIntersects = [];
+
+const _mesh = /*@__PURE__*/new THREE.Mesh();
+
 class Position extends THREE.Group {
   constructor() {
     super();
     this.color = new THREE.Color('white');
+    this.instance = {
+      current: undefined
+    };
+    this.instanceKey = {
+      current: undefined
+    };
+  } // This will allow the virtual instance have bounds
+
+
+  get geometry() {
+    var _this$instance$curren;
+
+    return (_this$instance$curren = this.instance.current) == null ? void 0 : _this$instance$curren.geometry;
+  } // And this will allow the virtual instance to receive events
+
+
+  raycast(raycaster, intersects) {
+    const parent = this.instance.current;
+    if (!parent) return;
+    if (!parent.geometry || !parent.material) return;
+    _mesh.geometry = parent.geometry;
+    const matrixWorld = parent.matrixWorld;
+    let instanceId = parent.userData.instances.indexOf(this.instanceKey);
+    if (instanceId === -1) return; // calculate the world matrix for each instance
+
+    parent.getMatrixAt(instanceId, _instanceLocalMatrix);
+
+    _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix); // the mesh represents this single instance
+
+
+    _mesh.matrixWorld = _instanceWorldMatrix;
+
+    _mesh.raycast(raycaster, _instanceIntersects); // process the result of raycast
+
+
+    for (let i = 0, l = _instanceIntersects.length; i < l; i++) {
+      const intersect = _instanceIntersects[i];
+      intersect.instanceId = instanceId;
+      intersect.object = this;
+      intersects.push(intersect);
+    }
+
+    _instanceIntersects.length = 0;
   }
 
 }