@react-three/drei 8.0.0 → 8.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -53
- package/core/Bounds.cjs.js +1 -1
- package/core/Bounds.js +10 -0
- package/core/Cloud.cjs.js +1 -1
- package/core/Cloud.js +2 -2
- package/core/SpotLight.cjs.js +1 -1
- package/core/SpotLight.d.ts +4 -1
- package/core/SpotLight.js +10 -3
- package/core/index.cjs.js +1 -1
- package/core/index.d.ts +0 -3
- package/core/index.js +0 -6
- package/core/useMatcapTexture.cjs.js +1 -1
- package/core/useMatcapTexture.js +7 -2
- package/core/useNormalTexture.cjs.js +1 -1
- package/core/useNormalTexture.js +8 -3
- package/index.cjs.js +1 -1
- package/index.js +0 -3
- package/materials/SpotLightMaterial.cjs.js +1 -1
- package/materials/SpotLightMaterial.js +6 -2
- package/native/index.cjs.js +1 -1
- package/native/index.js +0 -6
- package/package.json +1 -1
- package/web/Html.cjs.js +1 -1
- package/web/Html.d.ts +1 -0
- package/web/Html.js +4 -0
- package/web/index.cjs.js +1 -1
- package/web/index.js +0 -6
- package/assets/cloud.base64.cjs.js +0 -1
- package/assets/cloud.base64.d.ts +0 -1
- package/assets/cloud.base64.js +0 -3
- package/core/useEdgeSplit.cjs.js +0 -1
- package/core/useEdgeSplit.d.ts +0 -3
- package/core/useEdgeSplit.js +0 -24
- package/core/useSimplification.cjs.js +0 -1
- package/core/useSimplification.d.ts +0 -3
- package/core/useSimplification.js +0 -25
- package/core/useTessellation.cjs.js +0 -1
- package/core/useTessellation.d.ts +0 -3
- package/core/useTessellation.js +0 -26
- package/helpers/matcap-assets.cjs.js +0 -1
- package/helpers/matcap-assets.d.ts +0 -643
- package/helpers/matcap-assets.js +0 -645
- package/helpers/normal-assets.cjs.js +0 -1
- package/helpers/normal-assets.d.ts +0 -78
- package/helpers/normal-assets.js +0 -80
package/README.md
CHANGED
|
@@ -78,9 +78,6 @@ The `native` route of the library **does not** export `Html` or `Loader`. The de
|
|
|
78
78
|
<li><a href="#modifiers">Modifiers</a></li>
|
|
79
79
|
<ul>
|
|
80
80
|
<li><a href="#curvemodifier">CurveModifier</a></li>
|
|
81
|
-
<li><a href="#useedgesplit">useEdgeSplit</a></li>
|
|
82
|
-
<li><a href="#usetessellation">useTessellation</a></li>
|
|
83
|
-
<li><a href="#usesimplification">useSimplification</a></li>
|
|
84
81
|
</ul>
|
|
85
82
|
</ul>
|
|
86
83
|
</td>
|
|
@@ -750,56 +747,6 @@ return (
|
|
|
750
747
|
)
|
|
751
748
|
```
|
|
752
749
|
|
|
753
|
-
#### useEdgeSplit
|
|
754
|
-
|
|
755
|
-
[](https://drei.pmnd.rs/?path=/story/modifiers-useedgesplit)
|
|
756
|
-
|
|
757
|
-
This hook mutates a mesh geometry using [three's Edge Split modifier](https://threejs.org/examples/?q=modifier#webgl_modifier_edgesplit). The first parameter is the cut-off angle, and the second parameter is a `tryKeepNormals` flag (default `true`).
|
|
758
|
-
|
|
759
|
-
```jsx
|
|
760
|
-
const meshRef = useEdgeSplit(Math.PI / 2)
|
|
761
|
-
|
|
762
|
-
return (
|
|
763
|
-
<mesh ref={meshRef}>
|
|
764
|
-
<boxBufferGeometry args={[10, 10]} />
|
|
765
|
-
</mesh>
|
|
766
|
-
)
|
|
767
|
-
```
|
|
768
|
-
|
|
769
|
-
#### useSimplification
|
|
770
|
-
|
|
771
|
-
[](https://drei.pmnd.rs/?path=/story/modifiers-usesimplification)
|
|
772
|
-
|
|
773
|
-
This hook mutates a mesh geometry using [three's Simplification modifier](https://threejs.org/examples/webgl_modifier_simplifier.html).
|
|
774
|
-
|
|
775
|
-
👉 The simplification code is based on [this algorithm](http://www.melax.com/polychop/).
|
|
776
|
-
|
|
777
|
-
```jsx
|
|
778
|
-
const meshRef = useSimplification(0.5)
|
|
779
|
-
|
|
780
|
-
return (
|
|
781
|
-
<mesh ref={meshRef}>
|
|
782
|
-
<octahedronBufferGeometry args={[2, 5]} />
|
|
783
|
-
</mesh>
|
|
784
|
-
)
|
|
785
|
-
```
|
|
786
|
-
|
|
787
|
-
#### useTessellation
|
|
788
|
-
|
|
789
|
-
[](https://drei.pmnd.rs/?path=/story/modifiers-usetessellation)
|
|
790
|
-
|
|
791
|
-
This hook mutates a mesh geometry using [three's Tessellation modifier](https://threejs.org/examples/?q=tess#webgl_modifier_tessellation). It will break-up faces withe edge longer than the maxEdgeLength parameter.
|
|
792
|
-
|
|
793
|
-
```jsx
|
|
794
|
-
const meshRef = useTessellation(2, 8)
|
|
795
|
-
|
|
796
|
-
return (
|
|
797
|
-
<mesh ref={meshRef}>
|
|
798
|
-
<octahedronBufferGeometry args={[2, 2]} />
|
|
799
|
-
</mesh>
|
|
800
|
-
)
|
|
801
|
-
```
|
|
802
|
-
|
|
803
750
|
# Misc
|
|
804
751
|
|
|
805
752
|
#### useContextBridge
|
|
@@ -842,6 +789,7 @@ Allows you to tie HTML content to any object of your scene. It will be projected
|
|
|
842
789
|
```jsx
|
|
843
790
|
<Html
|
|
844
791
|
as='div' // Wrapping element (default: 'div')
|
|
792
|
+
wrapperClass // The className of the wrapping element (default: undefined)
|
|
845
793
|
prepend // Project content behind the canvas (default: false)
|
|
846
794
|
center // Adds a -50%/-50% css transform (default: false) [ignored in transform mode]
|
|
847
795
|
fullscreen // Aligns to the upper-left corner, fills the screen (default:false) [ignored in transform mode]
|
|
@@ -1595,6 +1543,8 @@ Adds a blinking shader-based starfield to your scene.
|
|
|
1595
1543
|
|
|
1596
1544
|
#### Cloud
|
|
1597
1545
|
|
|
1546
|
+
[](https://drei.pmnd.rs/?path=/story/staging-cloud--cloud-st) 
|
|
1547
|
+
|
|
1598
1548
|
Particle based cloud.
|
|
1599
1549
|
|
|
1600
1550
|
```jsx
|
package/core/Bounds.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=o(e),n=o(t);const c=e=>e&&e.isOrthographicCamera,i=a.createContext(null);exports.Bounds=function({children:e,damping:t=6,fit:o,clip:s,margin:m=1.2,eps:u=.01,onFit:f}){const p=a.useRef(null),l=r.useThree((e=>e.camera)),x=r.useThree((e=>e.controls)),h=r.useThree((e=>e.invalidate)),y=a.useRef(f);function z(e,t){return Math.abs(e.x-t.x)<u&&Math.abs(e.y-t.y)<u&&Math.abs(e.z-t.z)<u}function d(e,t,r,o){e.x=n.MathUtils.damp(e.x,t.x,r,o),e.y=n.MathUtils.damp(e.y,t.y,r,o),e.z=n.MathUtils.damp(e.z,t.z,r,o)}y.current=f;const[M]=a.useState((()=>({animating:!1,focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[g]=a.useState((()=>({focus:new n.Vector3,camera:new n.Vector3,zoom:1}))),[b]=a.useState((()=>new n.Box3)),w=a.useMemo((()=>{function e(){const e=b.getSize(new n.Vector3),t=b.getCenter(new n.Vector3),r=Math.max(e.x,e.y,e.z),o=c(l)?4*r:r/(2*Math.atan(Math.PI*l.fov/360)),a=c(l)?4*r:o/l.aspect,i=m*Math.max(o,a);return{box:b,size:e,center:t,distance:i}}return{getSize:e,refresh(t){var r;if((r=t)&&r.isObject3D?b.setFromObject(t):(e=>e&&e.isBox3)(t)?b.copy(t):p.current&&b.setFromObject(p.current),b.isEmpty()){const e=l.position.length()||10;b.setFromCenterAndSize(new n.Vector3,new n.Vector3(e,e,e))}if("OrthographicTrackballControls"===(null==x?void 0:x.constructor.name)){const{distance:t}=e(),r=l.position.clone().sub(x.target).normalize().multiplyScalar(t),o=x.target.clone().add(r);l.position.copy(o)}return this},clip(){const{distance:t}=e();return x&&(x.maxDistance=10*t),l.near=t/100,l.far=100*t,l.updateProjectionMatrix(),x&&x.update(),this},fit(){M.camera.copy(l.position),x&&M.focus.copy(x.target);const{center:r,distance:o}=e(),a=r.clone().sub(l.position).normalize().multiplyScalar(o);if(g.camera.copy(r).sub(a),g.focus.copy(r),c(l)){M.zoom=l.zoom;let e=0,o=0;const a=[new n.Vector3(b.min.x,b.min.y,b.min.z),new n.Vector3(b.min.x,b.max.y,b.min.z),new n.Vector3(b.min.x,b.min.y,b.max.z),new n.Vector3(b.min.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.max.z),new n.Vector3(b.max.x,b.max.y,b.min.z),new n.Vector3(b.max.x,b.min.y,b.max.z),new n.Vector3(b.max.x,b.min.y,b.min.z)];r.applyMatrix4(l.matrixWorldInverse);for(const t of a)t.applyMatrix4(l.matrixWorldInverse),e=Math.max(e,Math.abs(t.y-r.y)),o=Math.max(o,Math.abs(t.x-r.x));e*=2,o*=2;const c=(l.top-l.bottom)/e,i=(l.right-l.left)/o;g.zoom=Math.min(c,i)/m,t||(l.zoom=g.zoom,l.updateProjectionMatrix())}return t?M.animating=!0:(l.position.copy(g.camera),l.lookAt(g.focus),x&&(x.target.copy(g.focus),x.update()),h()),y.current&&y.current(this.getSize()),this}}}),[b,l,x,m,t,h]);return a.useLayoutEffect((()=>{if(w.refresh(),o&&w.fit(),s&&w.clip(),x){const e=()=>M.animating=!1;return x.addEventListener("start",e),()=>x.removeEventListener("start",e)}}),[s,o,x]),r.useFrame(((e,r)=>{if(M.animating){if(d(M.focus,g.focus,t,r),d(M.camera,g.camera,t,r),M.zoom=n.MathUtils.damp(M.zoom,g.zoom,t,r),l.position.copy(M.camera),c(l)&&(l.zoom=M.zoom,l.updateProjectionMatrix()),x?(x.target.copy(M.focus),x.update()):l.lookAt(M.focus),h(),c(l)&&!(Math.abs(M.zoom-g.zoom)<u))return;if(!c(l)&&!z(M.camera,g.camera))return;if(x&&!z(M.focus,g.focus))return;M.animating=!1}})),a.createElement("group",{ref:p},a.createElement(i.Provider,{value:w},e))},exports.useBounds=function(){return a.useContext(i)};
|
package/core/Bounds.js
CHANGED
|
@@ -75,6 +75,16 @@ function Bounds({
|
|
|
75
75
|
box.setFromCenterAndSize(new THREE.Vector3(), new THREE.Vector3(max, max, max));
|
|
76
76
|
}
|
|
77
77
|
|
|
78
|
+
if ((controls == null ? void 0 : controls.constructor.name) === 'OrthographicTrackballControls') {
|
|
79
|
+
// Put camera on a sphere along which it should moves
|
|
80
|
+
const {
|
|
81
|
+
distance
|
|
82
|
+
} = getSize();
|
|
83
|
+
const direction = camera.position.clone().sub(controls.target).normalize().multiplyScalar(distance);
|
|
84
|
+
const newPos = controls.target.clone().add(direction);
|
|
85
|
+
camera.position.copy(newPos);
|
|
86
|
+
}
|
|
87
|
+
|
|
78
88
|
return this;
|
|
79
89
|
},
|
|
80
90
|
|
package/core/Cloud.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("@react-three/fiber"),t=require("./Billboard.cjs.js"),a=require("./shapes.cjs.js"),n=require("./useTexture.cjs.js");function s(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,a.get?a:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}require("@babel/runtime/helpers/extends"),require("react-merge-refs"),require("three");var c=s(e);exports.Cloud=function({opacity:e=.5,speed:s=.4,width:i=10,depth:o=1.5,segments:u=20,...l}){const d=c.useRef(),h=n.useTexture("https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png"),m=c.useMemo((()=>[...new Array(u)].map(((e,r)=>({x:i/2-Math.random()*i,y:i/2-Math.random()*i,scale:.4+Math.sin((r+1)/u*Math.PI)*(10*(.2+Math.random())),density:Math.max(.2,Math.random()),rotation:Math.max(.002,.005*Math.random())*s})))),[i,u,s]);return r.useFrame((e=>{var r;return null==(r=d.current)?void 0:r.children.forEach(((r,t)=>{r.children[0].rotation.z+=m[t].rotation,r.children[0].scale.setScalar(m[t].scale+(1+Math.sin(e.clock.getElapsedTime()/10))/2*t/10)}))})),c.createElement("group",l,c.createElement("group",{position:[0,0,u/2*o],ref:d},m.map((({x:r,y:n,scale:s,density:i},u)=>c.createElement(t.Billboard,{key:u,position:[r,n,-u*o]},c.createElement(a.Plane,{scale:s,rotation:[0,0,0]},c.createElement("meshStandardMaterial",{map:h,transparent:!0,opacity:s/6*i*e,depthTest:!1})))))))};
|
package/core/Cloud.js
CHANGED
|
@@ -3,8 +3,8 @@ import { useFrame } from '@react-three/fiber';
|
|
|
3
3
|
import { Billboard } from './Billboard.js';
|
|
4
4
|
import { Plane } from './shapes.js';
|
|
5
5
|
import { useTexture } from './useTexture.js';
|
|
6
|
-
import { CloudImage } from '../assets/cloud.base64.js';
|
|
7
6
|
|
|
7
|
+
const CLOUD_URL = 'https://rawcdn.githack.com/pmndrs/drei-assets/9225a9f1fbd449d9411125c2f419b843d0308c9f/cloud.png';
|
|
8
8
|
function Cloud({
|
|
9
9
|
opacity = 0.5,
|
|
10
10
|
speed = 0.4,
|
|
@@ -14,7 +14,7 @@ function Cloud({
|
|
|
14
14
|
...props
|
|
15
15
|
}) {
|
|
16
16
|
const group = React.useRef();
|
|
17
|
-
const texture = useTexture(
|
|
17
|
+
const texture = useTexture(CLOUD_URL);
|
|
18
18
|
const clouds = React.useMemo(() => [...new Array(segments)].map((_, index) => ({
|
|
19
19
|
x: width / 2 - Math.random() * width,
|
|
20
20
|
y: width / 2 - Math.random() * width,
|
package/core/SpotLight.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("react"),r=require("three"),a=require("@react-three/fiber"),o=require("../materials/SpotLightMaterial.cjs.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(e),l=n(t);const s=new r.Vector3,c=l.forwardRef((({opacity:e=1,radiusTop:t,radiusBottom:i,depthBuffer:n,color:c="white",distance:f=5,angle:m=.15,attenuation:p=5,anglePower:d=5,...h},v)=>{const g=l.useRef(null),y=a.useThree((e=>e.size)),b=a.useThree((e=>e.camera)),w=a.useThree((e=>e.viewport.dpr)),[j]=l.useState((()=>new o.SpotLightMaterial));t=void 0===t?.1:t,i=void 0===i?7*m:i,a.useFrame((()=>{j.uniforms.spotPosition.value.copy(g.current.getWorldPosition(s)),g.current.lookAt(g.current.parent.target.getWorldPosition(s))}));const M=l.useMemo((()=>{const e=new r.CylinderGeometry(t,i,f,128,64,!0);return e.applyMatrix4((new r.Matrix4).makeTranslation(0,-f/2,0)),e.applyMatrix4((new r.Matrix4).makeRotationX(-Math.PI/2)),e}),[m,f,t,i]);return l.createElement("spotLight",u.default({ref:v,angle:m,color:c,distance:f},h),l.createElement("mesh",{ref:g,geometry:M,raycast:()=>null},l.createElement("primitive",{object:j,attach:"material","uniforms-opacity-value":e,"uniforms-lightColor-value":c,"uniforms-attenuation-value":p,"uniforms-anglePower-value":d,"uniforms-depth-value":n,"uniforms-cameraNear-value":b.near,"uniforms-cameraFar-value":b.far,"uniforms-resolution-value":n?[y.width*w,y.height*w]:[0,0]})))}));exports.SpotLight=c;
|
package/core/SpotLight.d.ts
CHANGED
|
@@ -6,6 +6,9 @@ declare const SpotLight: React.ForwardRefExoticComponent<Pick<Omit<import("@reac
|
|
|
6
6
|
depthBuffer?: DepthTexture | undefined;
|
|
7
7
|
attenuation?: number | undefined;
|
|
8
8
|
anglePower?: number | undefined;
|
|
9
|
+
radiusTop?: number | undefined;
|
|
10
|
+
radiusBottom?: number | undefined;
|
|
11
|
+
opacity?: number | undefined;
|
|
9
12
|
color?: string | number | undefined;
|
|
10
|
-
}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "distance" | "decay" | "target" | "angle" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "depthBuffer" | "penumbra" | "isSpotLight" | "attenuation" | "anglePower"> & React.RefAttributes<SpotLightImpl>>;
|
|
13
|
+
}, "visible" | "attach" | "attachArray" | "attachObject" | "args" | "children" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "quaternion" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "color" | keyof import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers | "distance" | "opacity" | "decay" | "target" | "angle" | "intensity" | "isLight" | "shadow" | "shadowCameraFov" | "shadowCameraLeft" | "shadowCameraRight" | "shadowCameraTop" | "shadowCameraBottom" | "shadowCameraNear" | "shadowCameraFar" | "shadowBias" | "shadowMapWidth" | "shadowMapHeight" | "power" | "depthBuffer" | "penumbra" | "isSpotLight" | "attenuation" | "anglePower" | "radiusTop" | "radiusBottom"> & React.RefAttributes<SpotLightImpl>>;
|
|
11
14
|
export { SpotLight };
|
package/core/SpotLight.js
CHANGED
|
@@ -6,6 +6,9 @@ import { SpotLightMaterial } from '../materials/SpotLightMaterial.js';
|
|
|
6
6
|
|
|
7
7
|
const vec = new Vector3();
|
|
8
8
|
const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
9
|
+
opacity = 1,
|
|
10
|
+
radiusTop,
|
|
11
|
+
radiusBottom,
|
|
9
12
|
depthBuffer,
|
|
10
13
|
color = 'white',
|
|
11
14
|
distance = 5,
|
|
@@ -19,16 +22,18 @@ const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
|
19
22
|
const camera = useThree(state => state.camera);
|
|
20
23
|
const dpr = useThree(state => state.viewport.dpr);
|
|
21
24
|
const [material] = React.useState(() => new SpotLightMaterial());
|
|
25
|
+
radiusTop = radiusTop === undefined ? 0.1 : radiusTop;
|
|
26
|
+
radiusBottom = radiusBottom === undefined ? angle * 7 : radiusBottom;
|
|
22
27
|
useFrame(() => {
|
|
23
28
|
material.uniforms.spotPosition.value.copy(mesh.current.getWorldPosition(vec));
|
|
24
29
|
mesh.current.lookAt(mesh.current.parent.target.getWorldPosition(vec));
|
|
25
30
|
});
|
|
26
31
|
const geom = React.useMemo(() => {
|
|
27
|
-
const geometry = new CylinderGeometry(
|
|
32
|
+
const geometry = new CylinderGeometry(radiusTop, radiusBottom, distance, 128, 64, true);
|
|
28
33
|
geometry.applyMatrix4(new Matrix4().makeTranslation(0, -distance / 2, 0));
|
|
29
34
|
geometry.applyMatrix4(new Matrix4().makeRotationX(-Math.PI / 2));
|
|
30
35
|
return geometry;
|
|
31
|
-
}, [angle, distance]);
|
|
36
|
+
}, [angle, distance, radiusTop, radiusBottom]);
|
|
32
37
|
return /*#__PURE__*/React.createElement("spotLight", _extends({
|
|
33
38
|
ref: ref,
|
|
34
39
|
angle: angle,
|
|
@@ -36,10 +41,12 @@ const SpotLight = /*#__PURE__*/React.forwardRef(({
|
|
|
36
41
|
distance: distance
|
|
37
42
|
}, props), /*#__PURE__*/React.createElement("mesh", {
|
|
38
43
|
ref: mesh,
|
|
39
|
-
geometry: geom
|
|
44
|
+
geometry: geom,
|
|
45
|
+
raycast: () => null
|
|
40
46
|
}, /*#__PURE__*/React.createElement("primitive", {
|
|
41
47
|
object: material,
|
|
42
48
|
attach: "material",
|
|
49
|
+
"uniforms-opacity-value": opacity,
|
|
43
50
|
"uniforms-lightColor-value": color,
|
|
44
51
|
"uniforms-attenuation-value": attenuation,
|
|
45
52
|
"uniforms-anglePower-value": anglePower,
|
package/core/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),c=require("./Image.cjs.js"),j=require("./OrthographicCamera.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./Billboard.cjs.js"),r=require("./QuadraticBezierLine.cjs.js"),s=require("./CubicBezierLine.cjs.js"),t=require("./Line.cjs.js"),o=require("./PositionalAudio.cjs.js"),i=require("./Text.cjs.js"),u=require("./Effects.cjs.js"),a=require("./GradientTexture.cjs.js"),c=require("./Image.cjs.js"),j=require("./OrthographicCamera.cjs.js"),n=require("./PerspectiveCamera.cjs.js"),p=require("./CubeCamera.cjs.js"),l=require("./DeviceOrientationControls.cjs.js"),x=require("./FlyControls.cjs.js"),q=require("./MapControls.cjs.js"),d=require("./OrbitControls.cjs.js"),C=require("./TrackballControls.cjs.js"),h=require("./ArcballControls.cjs.js"),m=require("./TransformControls.cjs.js"),B=require("./PointerLockControls.cjs.js"),b=require("./FirstPersonControls.cjs.js"),M=require("./GizmoHelper.cjs.js"),P=require("./GizmoViewcube.cjs.js"),S=require("./GizmoViewport.cjs.js"),f=require("./useCubeTexture.cjs.js"),T=require("./useFBX.cjs.js"),g=require("./useGLTF.cjs.js"),v=require("./useProgress.cjs.js"),L=require("./useTexture.cjs.js"),A=require("./Stats.cjs.js"),G=require("./useDepthBuffer.cjs.js"),k=require("./useAspect.cjs.js"),D=require("./useCamera.cjs.js"),F=require("./useDetectGPU.cjs.js"),w=require("./useHelper.cjs.js"),z=require("./useBVH.cjs.js"),I=require("./useContextBridge.cjs.js"),O=require("./useAnimations.cjs.js"),E=require("./useFBO.cjs.js"),R=require("./useIntersect.cjs.js"),y=require("./CurveModifier.cjs.js"),H=require("./MeshDistortMaterial.cjs.js"),V=require("./MeshWobbleMaterial.cjs.js"),Q=require("./MeshReflectorMaterial.cjs.js"),W=require("./PointMaterial.cjs.js"),N=require("./shaderMaterial.cjs.js"),U=require("./softShadows.cjs.js"),X=require("./shapes.cjs.js"),K=require("./RoundedBox.cjs.js"),_=require("./ScreenQuad.cjs.js"),J=require("./Center.cjs.js"),Y=require("./Bounds.cjs.js"),Z=require("./CameraShake.cjs.js"),$=require("./Float.cjs.js"),ee=require("./Stage.cjs.js"),re=require("./Backdrop.cjs.js"),se=require("./Shadow.cjs.js"),te=require("./ContactShadows.cjs.js"),oe=require("./Reflector.cjs.js"),ie=require("./SpotLight.cjs.js"),ue=require("./Environment.cjs.js"),ae=require("./Sky.cjs.js"),ce=require("./Stars.cjs.js"),je=require("./Cloud.cjs.js"),ne=require("./useMatcapTexture.cjs.js"),pe=require("./useNormalTexture.cjs.js"),le=require("./Points.cjs.js"),xe=require("./Instances.cjs.js"),qe=require("./Segments.cjs.js"),de=require("./Detailed.cjs.js"),Ce=require("./Preload.cjs.js"),he=require("./BakeShadows.cjs.js"),me=require("./meshBounds.cjs.js"),Be=require("./AdaptiveDpr.cjs.js"),be=require("./AdaptiveEvents.cjs.js");require("@babel/runtime/helpers/extends"),require("react"),require("@react-three/fiber"),require("react-merge-refs"),require("three"),require("three-stdlib"),require("troika-three-text"),require("lodash.omit"),require("lodash.pick"),require("zustand"),require("three/examples/js/libs/stats.min"),require("../helpers/useEffectfulState.cjs.js"),require("detect-gpu"),require("use-asset"),require("three-mesh-bvh"),require("../materials/BlurPass.cjs.js"),require("../materials/ConvolutionMaterial.cjs.js"),require("../materials/MeshReflectorMaterial.cjs.js"),require("../helpers/environment-assets.cjs.js"),require("../materials/SpotLightMaterial.cjs.js"),require("../helpers/Position.cjs.js"),require("react-composer"),exports.Billboard=e.Billboard,exports.QuadraticBezierLine=r.QuadraticBezierLine,exports.CubicBezierLine=s.CubicBezierLine,exports.Line=t.Line,exports.PositionalAudio=o.PositionalAudio,exports.Text=i.Text,exports.Effects=u.Effects,exports.isWebGL2Available=u.isWebGL2Available,exports.GradientTexture=a.GradientTexture,exports.Image=c.Image,exports.OrthographicCamera=j.OrthographicCamera,exports.PerspectiveCamera=n.PerspectiveCamera,exports.CubeCamera=p.CubeCamera,exports.DeviceOrientationControls=l.DeviceOrientationControls,exports.FlyControls=x.FlyControls,exports.MapControls=q.MapControls,exports.OrbitControls=d.OrbitControls,exports.TrackballControls=C.TrackballControls,exports.ArcballControls=h.ArcballControls,exports.TransformControls=m.TransformControls,exports.PointerLockControls=B.PointerLockControls,exports.FirstPersonControls=b.FirstPersonControls,exports.GizmoHelper=M.GizmoHelper,exports.useGizmoContext=M.useGizmoContext,exports.GizmoViewcube=P.GizmoViewcube,exports.GizmoViewport=S.GizmoViewport,exports.useCubeTexture=f.useCubeTexture,exports.useFBX=T.useFBX,exports.useGLTF=g.useGLTF,exports.useProgress=v.useProgress,exports.IsObject=L.IsObject,exports.useTexture=L.useTexture,exports.Stats=A.Stats,exports.useDepthBuffer=G.useDepthBuffer,exports.useAspect=k.useAspect,exports.useCamera=D.useCamera,exports.useDetectGPU=F.useDetectGPU,exports.useHelper=w.useHelper,exports.useBVH=z.useBVH,exports.useContextBridge=I.useContextBridge,exports.useAnimations=O.useAnimations,exports.useFBO=E.useFBO,exports.useIntersect=R.useIntersect,exports.CurveModifier=y.CurveModifier,exports.MeshDistortMaterial=H.MeshDistortMaterial,exports.MeshWobbleMaterial=V.MeshWobbleMaterial,exports.MeshReflectorMaterial=Q.MeshReflectorMaterial,exports.PointMaterial=W.PointMaterial,exports.PointMaterialImpl=W.PointMaterialImpl,exports.shaderMaterial=N.shaderMaterial,exports.softShadows=U.softShadows,exports.Box=X.Box,exports.Circle=X.Circle,exports.Cone=X.Cone,exports.Cylinder=X.Cylinder,exports.Dodecahedron=X.Dodecahedron,exports.Extrude=X.Extrude,exports.Icosahedron=X.Icosahedron,exports.Lathe=X.Lathe,exports.Octahedron=X.Octahedron,exports.Plane=X.Plane,exports.Polyhedron=X.Polyhedron,exports.Ring=X.Ring,exports.Sphere=X.Sphere,exports.Tetrahedron=X.Tetrahedron,exports.Torus=X.Torus,exports.TorusKnot=X.TorusKnot,exports.Tube=X.Tube,exports.RoundedBox=K.RoundedBox,exports.ScreenQuad=_.ScreenQuad,exports.Center=J.Center,exports.Bounds=Y.Bounds,exports.useBounds=Y.useBounds,exports.CameraShake=Z.CameraShake,exports.Float=$.Float,exports.Stage=ee.Stage,exports.Backdrop=re.Backdrop,exports.Shadow=se.Shadow,exports.ContactShadows=te.ContactShadows,exports.Reflector=oe.Reflector,exports.SpotLight=ie.SpotLight,exports.Environment=ue.Environment,exports.Sky=ae.Sky,exports.calcPosFromAngles=ae.calcPosFromAngles,exports.Stars=ce.Stars,exports.Cloud=je.Cloud,exports.useMatcapTexture=ne.useMatcapTexture,exports.useNormalTexture=pe.useNormalTexture,exports.Point=le.Point,exports.Points=le.Points,exports.PointsBuffer=le.PointsBuffer,exports.Instance=xe.Instance,exports.Instances=xe.Instances,exports.Merged=xe.Merged,exports.Segment=qe.Segment,exports.Segments=qe.Segments,exports.Detailed=de.Detailed,exports.Preload=Ce.Preload,exports.BakeShadows=he.BakeShadows,exports.meshBounds=me.meshBounds,exports.AdaptiveDpr=Be.AdaptiveDpr,exports.AdaptiveEvents=be.AdaptiveEvents;
|
package/core/index.d.ts
CHANGED
|
@@ -38,9 +38,6 @@ export * from './useContextBridge';
|
|
|
38
38
|
export * from './useAnimations';
|
|
39
39
|
export * from './useFBO';
|
|
40
40
|
export * from './useIntersect';
|
|
41
|
-
export * from './useSimplification';
|
|
42
|
-
export * from './useTessellation';
|
|
43
|
-
export * from './useEdgeSplit';
|
|
44
41
|
export * from './CurveModifier';
|
|
45
42
|
export * from './MeshDistortMaterial';
|
|
46
43
|
export * from './MeshWobbleMaterial';
|
package/core/index.js
CHANGED
|
@@ -38,9 +38,6 @@ export { useContextBridge } from './useContextBridge.js';
|
|
|
38
38
|
export { useAnimations } from './useAnimations.js';
|
|
39
39
|
export { useFBO } from './useFBO.js';
|
|
40
40
|
export { useIntersect } from './useIntersect.js';
|
|
41
|
-
export { useSimplification } from './useSimplification.js';
|
|
42
|
-
export { useTessellation } from './useTessellation.js';
|
|
43
|
-
export { useEdgeSplit } from './useEdgeSplit.js';
|
|
44
41
|
export { CurveModifier } from './CurveModifier.js';
|
|
45
42
|
export { MeshDistortMaterial } from './MeshDistortMaterial.js';
|
|
46
43
|
export { MeshWobbleMaterial } from './MeshWobbleMaterial.js';
|
|
@@ -96,8 +93,5 @@ import '../materials/ConvolutionMaterial.js';
|
|
|
96
93
|
import '../materials/MeshReflectorMaterial.js';
|
|
97
94
|
import '../helpers/environment-assets.js';
|
|
98
95
|
import '../materials/SpotLightMaterial.js';
|
|
99
|
-
import '../assets/cloud.base64.js';
|
|
100
|
-
import '../helpers/matcap-assets.js';
|
|
101
|
-
import '../helpers/normal-assets.js';
|
|
102
96
|
import '../helpers/Position.js';
|
|
103
97
|
import 'react-composer';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("./useTexture.cjs.js"),r=require("use-asset");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 s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,s.get?s:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}require("three"),require("@react-three/fiber");var u=s(e);exports.useMatcapTexture=function(e=0,s=1024){const a=r.useAsset((()=>new Promise((async e=>{e(await fetch("https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json").then((e=>e.json())))}))),"matcapList"),n=a[0],c=u.useMemo((()=>Object.keys(a).length),[]),i=`https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d/${s}/${`${u.useMemo((()=>"string"==typeof e?e:"number"==typeof e?a[e]:null),[e])||n}${function(e){switch(e){case 64:return"-64px";case 128:return"-128px";case 256:return"-256px";case 512:return"-512px";default:return""}}(s)}.png`}`;return[t.useTexture(i),i,c]};
|
package/core/useMatcapTexture.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useTexture } from './useTexture.js';
|
|
3
|
-
import {
|
|
3
|
+
import { useAsset } from 'use-asset';
|
|
4
4
|
|
|
5
5
|
function getFormatString(format) {
|
|
6
6
|
switch (format) {
|
|
@@ -21,9 +21,14 @@ function getFormatString(format) {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
+
const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
|
|
24
25
|
const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
|
|
25
|
-
const DEFAULT_MATCAP = matcapList[0];
|
|
26
26
|
function useMatcapTexture(id = 0, format = 1024) {
|
|
27
|
+
const matcapList = useAsset(() => new Promise(async resolve => {
|
|
28
|
+
const matcapList = await fetch(LIST_URL).then(res => res.json());
|
|
29
|
+
resolve(matcapList);
|
|
30
|
+
}), 'matcapList');
|
|
31
|
+
const DEFAULT_MATCAP = matcapList[0];
|
|
27
32
|
const numTot = React.useMemo(() => Object.keys(matcapList).length, []);
|
|
28
33
|
const fileHash = React.useMemo(() => {
|
|
29
34
|
if (typeof id === 'string') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./useTexture.cjs.js"),t=require("three"),s=require("
|
|
1
|
+
"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
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useTexture } from './useTexture.js';
|
|
3
3
|
import { RepeatWrapping, Vector2 } from 'three';
|
|
4
|
-
import {
|
|
4
|
+
import { useAsset } from 'use-asset';
|
|
5
5
|
|
|
6
|
-
const NORMAL_ROOT = 'https://rawcdn.githack.com/
|
|
7
|
-
const
|
|
6
|
+
const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
|
|
7
|
+
const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
|
|
8
8
|
function useNormalTexture(id = 0, settings = {}) {
|
|
9
9
|
const {
|
|
10
10
|
repeat = [1, 1],
|
|
11
11
|
anisotropy = 1,
|
|
12
12
|
offset = [0, 0]
|
|
13
13
|
} = settings;
|
|
14
|
+
const normalsList = useAsset(() => new Promise(async resolve => {
|
|
15
|
+
const normalsList = await fetch(LIST_URL).then(res => res.json());
|
|
16
|
+
resolve(normalsList);
|
|
17
|
+
}), 'normalsList');
|
|
14
18
|
const numTot = React.useMemo(() => Object.keys(normalsList).length, []);
|
|
19
|
+
const DEFAULT_NORMAL = normalsList[0];
|
|
15
20
|
const imageName = normalsList[id] || DEFAULT_NORMAL;
|
|
16
21
|
const url = `${NORMAL_ROOT}/normals/${imageName}`;
|
|
17
22
|
const normalTexture = useTexture(url);
|