@react-three/drei 9.88.5 → 9.88.7
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.
|
@@ -3,8 +3,8 @@ import * as React from 'react';
|
|
|
3
3
|
type MotionState = {
|
|
4
4
|
current: number;
|
|
5
5
|
path: THREE.CurvePath<THREE.Vector3>;
|
|
6
|
-
focus: React.MutableRefObject<THREE.Object3D
|
|
7
|
-
object: React.MutableRefObject<THREE.Object3D
|
|
6
|
+
focus: React.MutableRefObject<THREE.Object3D> | [x: number, y: number, z: number] | undefined;
|
|
7
|
+
object: React.MutableRefObject<THREE.Object3D>;
|
|
8
8
|
offset: number;
|
|
9
9
|
point: THREE.Vector3;
|
|
10
10
|
tangent: THREE.Vector3;
|
package/core/Outlines.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),n=require("three"),t=require("react"),r=require("./shaderMaterial.cjs.js"),i=require("@react-three/fiber"),o=require("three-stdlib"),c=require("../helpers/constants.cjs.js");function s(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(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var l=s(e),u=a(n),d=a(t);const f=r.shaderMaterial({screenspace:!1,color:new u.Color("black"),opacity:1,thickness:.05,size:new u.Vector2},"#include <common>\n #include <morphtarget_pars_vertex>\n #include <skinning_pars_vertex>\n uniform float thickness;\n uniform float screenspace;\n uniform vec2 size;\n void main() {\n #if defined (USE_SKINNING)\n\t #include <beginnormal_vertex>\n #include <morphnormal_vertex>\n #include <skinbase_vertex>\n #include <skinnormal_vertex>\n #include <defaultnormal_vertex>\n #endif\n #include <begin_vertex>\n\t #include <morphtarget_vertex>\n\t #include <skinning_vertex>\n #include <project_vertex>\n vec4 tNormal = vec4(normal, 0.0);\n vec4 tPosition = vec4(transformed, 1.0);\n #ifdef USE_INSTANCING\n tNormal = instanceMatrix * tNormal;\n tPosition = instanceMatrix * tPosition;\n #endif\n if (screenspace == 0.0) {\n vec3 newPosition = tPosition.xyz + tNormal.xyz * thickness;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); \n } else {\n vec4 clipPosition = projectionMatrix * modelViewMatrix * tPosition;\n vec4 clipNormal = projectionMatrix * modelViewMatrix * tNormal;\n vec2 offset = normalize(clipNormal.xy) * thickness / size * clipPosition.w * 2.0;\n clipPosition.xy += offset;\n gl_Position = clipPosition;\n }\n }",`uniform vec3 color;\n uniform float opacity;\n void main(){\n gl_FragColor = vec4(color, opacity);\n #include <tonemapping_fragment>\n #include <${c.version>=154?"colorspace_fragment":"encodings_fragment"}>\n }`);exports.Outlines=function({color:e="black",opacity:n=1,transparent:t=!1,screenspace:r=!1,toneMapped:c=!0,polygonOffset:s=!1,polygonOffsetFactor:a=0,renderOrder:p=0,thickness:m=.05,angle:g=Math.PI,...v}){const x=d.useRef(null),[y]=d.useState((()=>new f({side:u.BackSide}))),{gl:h}=i.useThree(),_=h.getDrawingBufferSize(new u.Vector2);d.useMemo((()=>i.extend({OutlinesMaterial:f})),[]);const M=d.useRef(0),b=d.useRef(null);return d.useLayoutEffect((()=>{const e=x.current,n=e.parent;if(n&&n.geometry&&(M.current!==g||b.current!==n.geometry)){M.current=g,b.current=n.geometry;let t=e.children[0];t&&(g&&t.geometry.dispose(),e.remove(t)),n.skeleton?(t=new u.SkinnedMesh,t.material=y,t.bind(n.skeleton,n.bindMatrix),e.add(t)):n.isInstancedMesh?(t=new u.InstancedMesh(n.geometry,y,n.count),t.instanceMatrix=n.instanceMatrix,e.add(t)):(t=new u.Mesh,t.material=y,e.add(t)),t.geometry=g?o.toCreasedNormals(n.geometry,g):n.geometry}})),d.useLayoutEffect((()=>{const o=x.current.children[0];o&&(o.renderOrder=p,i.applyProps(o.material,{transparent:t,thickness:m,color:e,opacity:n,size:_,screenspace:r,toneMapped:c,polygonOffset:s,polygonOffsetFactor:a}))})),d.useEffect((()=>()=>{const e=x.current;let n=e.children[0];n&&(g&&n.geometry.dispose(),e.remove(n))}),[]),d.createElement("group",l.default({ref:x},v))};
|
package/core/Outlines.js
CHANGED
|
@@ -66,7 +66,6 @@ function Outlines({
|
|
|
66
66
|
angle = Math.PI,
|
|
67
67
|
...props
|
|
68
68
|
}) {
|
|
69
|
-
var _ref$current;
|
|
70
69
|
const ref = React.useRef(null);
|
|
71
70
|
const [material] = React.useState(() => new OutlinesMaterial({
|
|
72
71
|
side: THREE.BackSide
|
|
@@ -78,32 +77,40 @@ function Outlines({
|
|
|
78
77
|
React.useMemo(() => extend({
|
|
79
78
|
OutlinesMaterial
|
|
80
79
|
}), []);
|
|
80
|
+
const oldAngle = React.useRef(0);
|
|
81
|
+
const oldGeometry = React.useRef(null);
|
|
81
82
|
React.useLayoutEffect(() => {
|
|
82
83
|
const group = ref.current;
|
|
83
84
|
const parent = group.parent;
|
|
84
85
|
if (parent && parent.geometry) {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
mesh
|
|
90
|
-
group.
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
86
|
+
if (oldAngle.current !== angle || oldGeometry.current !== parent.geometry) {
|
|
87
|
+
oldAngle.current = angle;
|
|
88
|
+
oldGeometry.current = parent.geometry;
|
|
89
|
+
|
|
90
|
+
// Remove old mesh
|
|
91
|
+
let mesh = group.children[0];
|
|
92
|
+
if (mesh) {
|
|
93
|
+
if (angle) mesh.geometry.dispose();
|
|
94
|
+
group.remove(mesh);
|
|
95
|
+
}
|
|
96
|
+
if (parent.skeleton) {
|
|
97
|
+
mesh = new THREE.SkinnedMesh();
|
|
98
|
+
mesh.material = material;
|
|
99
|
+
mesh.bind(parent.skeleton, parent.bindMatrix);
|
|
100
|
+
group.add(mesh);
|
|
101
|
+
} else if (parent.isInstancedMesh) {
|
|
102
|
+
mesh = new THREE.InstancedMesh(parent.geometry, material, parent.count);
|
|
103
|
+
mesh.instanceMatrix = parent.instanceMatrix;
|
|
104
|
+
group.add(mesh);
|
|
105
|
+
} else {
|
|
106
|
+
mesh = new THREE.Mesh();
|
|
107
|
+
mesh.material = material;
|
|
108
|
+
group.add(mesh);
|
|
109
|
+
}
|
|
110
|
+
mesh.geometry = angle ? toCreasedNormals(parent.geometry, angle) : parent.geometry;
|
|
99
111
|
}
|
|
100
|
-
mesh.geometry = angle ? toCreasedNormals(parent.geometry, angle) : parent.geometry;
|
|
101
|
-
return () => {
|
|
102
|
-
if (angle) mesh.geometry.dispose();
|
|
103
|
-
group.remove(mesh);
|
|
104
|
-
};
|
|
105
112
|
}
|
|
106
|
-
}
|
|
113
|
+
});
|
|
107
114
|
React.useLayoutEffect(() => {
|
|
108
115
|
const group = ref.current;
|
|
109
116
|
const mesh = group.children[0];
|
|
@@ -121,7 +128,18 @@ function Outlines({
|
|
|
121
128
|
polygonOffsetFactor
|
|
122
129
|
});
|
|
123
130
|
}
|
|
124
|
-
}
|
|
131
|
+
});
|
|
132
|
+
React.useEffect(() => {
|
|
133
|
+
return () => {
|
|
134
|
+
// Dispose everything on unmount
|
|
135
|
+
const group = ref.current;
|
|
136
|
+
let mesh = group.children[0];
|
|
137
|
+
if (mesh) {
|
|
138
|
+
if (angle) mesh.geometry.dispose();
|
|
139
|
+
group.remove(mesh);
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
}, []);
|
|
125
143
|
return /*#__PURE__*/React.createElement("group", _extends({
|
|
126
144
|
ref: ref
|
|
127
145
|
}, props));
|