abstract-3d 2.3.3 → 2.3.4
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-material.d.ts","sourceRoot":"","sources":["../../../src/renderers/react/react-material.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"react-material.d.ts","sourceRoot":"","sources":["../../../src/renderers/react/react-material.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAazC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,oBAAY,kBAAkB;IAC5B,OAAO,OAAO;IACd,MAAM,OAAO;IACb,YAAY,OAAO;CACpB;AAED,oBAAY,mBAAmB;IAC7B,OAAO,OAAO;IACd,MAAM,OAAO;CACd;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,GAAG,EAAE,kBAAkB,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,mBAAmB,CAAC;CACnC,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAC3D,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,EAAO,EACP,WAAW,EACX,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,YAAY,GACb,EAAE;IACD,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IAC3D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtD,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4EpB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect } from "react";
|
|
3
3
|
import { suspend } from "suspend-react";
|
|
4
|
-
import { BackSide, DoubleSide, FrontSide, SRGBColorSpace, TextureLoader, } from "three";
|
|
4
|
+
import { BackSide, CanvasTexture, DoubleSide, FrontSide, SRGBColorSpace, TextureLoader, } from "three";
|
|
5
5
|
import { shade } from "../../utils.js";
|
|
6
6
|
const decreasedOpacity = 0.125;
|
|
7
7
|
export var MinificationFilter;
|
|
@@ -63,16 +63,7 @@ function TextureMaterial({ url, color, material, useAlphaTest = true, filter = {
|
|
|
63
63
|
min: MinificationFilter.LinearMipmap,
|
|
64
64
|
mag: MagnificationFilter.Linear
|
|
65
65
|
}, }) {
|
|
66
|
-
const texture = suspend(
|
|
67
|
-
data.colorSpace = SRGBColorSpace;
|
|
68
|
-
data.minFilter = filter.min;
|
|
69
|
-
data.magFilter = filter.mag;
|
|
70
|
-
if (filter.min === MinificationFilter.LinearMipmap) {
|
|
71
|
-
data.generateMipmaps = true;
|
|
72
|
-
}
|
|
73
|
-
data.anisotropy = 4;
|
|
74
|
-
res(data);
|
|
75
|
-
}, undefined, () => res(null))), [url]);
|
|
66
|
+
const texture = suspend(urlIsSvg(url) ? loadSvg(url, filter) : loadNormal(url, filter), [url]);
|
|
76
67
|
useEffect(() => {
|
|
77
68
|
return () => {
|
|
78
69
|
if (texture) {
|
|
@@ -82,6 +73,50 @@ function TextureMaterial({ url, color, material, useAlphaTest = true, filter = {
|
|
|
82
73
|
}, [texture]);
|
|
83
74
|
return (_jsx("meshBasicMaterial", { color: color, side: DoubleSide, alphaTest: useAlphaTest ? 0.8 : undefined, map: texture, ...(material.opacity !== undefined && material.opacity < 1 ? { opacity: material.opacity } : materialDefaults), transparent: true }));
|
|
84
75
|
}
|
|
76
|
+
function urlIsSvg(url) {
|
|
77
|
+
return url.startsWith("data:image/svg+xml") || url.endsWith(".svg") || url.includes(".svg?");
|
|
78
|
+
}
|
|
79
|
+
function loadSvg(url, filter) {
|
|
80
|
+
const maxSize = 4096;
|
|
81
|
+
return new Promise((res) => {
|
|
82
|
+
const img = new Image();
|
|
83
|
+
// eslint-disable-next-line consistent-return
|
|
84
|
+
img.onload = (() => {
|
|
85
|
+
const canvas = document.createElement("canvas");
|
|
86
|
+
const imgW = img.naturalWidth;
|
|
87
|
+
const imgH = img.naturalHeight;
|
|
88
|
+
const width = imgW >= imgH ? maxSize : (maxSize * (imgW / imgH));
|
|
89
|
+
const height = imgH >= imgW ? maxSize : (maxSize * (imgH / imgW));
|
|
90
|
+
canvas.width = width;
|
|
91
|
+
canvas.height = height;
|
|
92
|
+
const ctx = canvas.getContext("2d");
|
|
93
|
+
if (!ctx) {
|
|
94
|
+
return res(null);
|
|
95
|
+
}
|
|
96
|
+
ctx.drawImage(img, 0, 0, width, height);
|
|
97
|
+
const texture = new CanvasTexture(canvas);
|
|
98
|
+
texture.colorSpace = SRGBColorSpace;
|
|
99
|
+
texture.minFilter = filter.min;
|
|
100
|
+
texture.magFilter = filter.mag;
|
|
101
|
+
texture.generateMipmaps = filter.min === MinificationFilter.LinearMipmap;
|
|
102
|
+
texture.anisotropy = 4;
|
|
103
|
+
texture.needsUpdate = true;
|
|
104
|
+
res(texture);
|
|
105
|
+
});
|
|
106
|
+
img.onerror = () => res(null);
|
|
107
|
+
img.src = url;
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
function loadNormal(url, filter) {
|
|
111
|
+
return new Promise((res) => textureLoader.load(url, (data) => {
|
|
112
|
+
data.colorSpace = SRGBColorSpace;
|
|
113
|
+
data.minFilter = filter.min;
|
|
114
|
+
data.magFilter = filter.mag;
|
|
115
|
+
data.generateMipmaps = filter.min === MinificationFilter.LinearMipmap;
|
|
116
|
+
data.anisotropy = 4;
|
|
117
|
+
res(data);
|
|
118
|
+
}, undefined, () => res(null)));
|
|
119
|
+
}
|
|
85
120
|
const textureLoader = new TextureLoader();
|
|
86
121
|
const acceptMat = { normal: "rgb(0,148,91)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
|
|
87
122
|
const selectMat = { normal: "rgb(14,82,184)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-material.js","sourceRoot":"","sources":["../../../src/renderers/react/react-material.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EACL,QAAQ,
|
|
1
|
+
{"version":3,"file":"react-material.js","sourceRoot":"","sources":["../../../src/renderers/react/react-material.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EACL,QAAQ,EACR,aAAa,EAEb,UAAU,EACV,SAAS,EAET,cAAc,EAEd,aAAa,GACd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,oEAAc,CAAA;IACd,kEAAa,CAAA;IACb,8EAAmB,CAAA;AACrB,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAAA,CAAC;AAEF,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,sEAAc,CAAA;IACd,oEAAa,CAAA;AACf,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAQD,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,EAAE,GAAG,EAAE,EACP,WAAW,EACX,SAAS,EACT,QAAQ,EACR,mBAAmB,EACnB,KAAK,EACL,MAAM,EACN,SAAS,EACT,YAAY,EACZ,YAAY,GAab;IACC,MAAM,GAAG,GACP,CAAC,KAAK,IAAI,QAAQ,CAAC,QAAQ,KAAK,UAAU;QACxC,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,KAAK,KAAK,QAAQ;YACpB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAK,KAAK,OAAO;gBACnB,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,UAAU,CAAC;IACjB,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;QAC7B,CAAC,CAAC,SAAS,KAAK,EAAE;YAChB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,MAAM,CAAC;YAC/B,CAAC,CAAC,SAAS,CAAC,MAAM;QACpB,CAAC,CAAC,SAAS,KAAK,EAAE;YAClB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC;YACzB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;IACf,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC,EAAE,CAAC;QACjC,CAAC,CAAC,SAAS,KAAK,EAAE;YAChB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,aAAa,CAAC,MAAM,CAAC;YACnC,CAAC,CAAC,aAAa,CAAC,MAAM;QACxB,CAAC,CAAC,SAAS,KAAK,EAAE;YAClB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC;YACzB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;IACf,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAQ,CAAC;IAC9F,IAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC;QACtB,OAAO,CACL,KAAC,eAAe,IACd,GAAG,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,EAAE,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EACtG,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,GAAG,EACb,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,EAAE,GAAG,EAAE,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,kBAAkB,CAAC,YAAY,EAAE,GACjF,CACH,CAAC;IACJ,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,OAAO,CACL,4BAEE,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,SAAS,EACf,WAAW,WACP,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAJ7C,qBAAqB,CAK1B,CACH,CAAC;IACJ,CAAC;IACD,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,4BAEE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EACnD,SAAS,EAAE,IAAI,EACf,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,KAAK,EAClB,OAAO,EAAE,GAAG,IANR,uBAAuB,CAO3B,CACH,CAAC;IACJ,CAAC;IACD,OAAO,CACL,+BAEE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,IAAI,EAAE,UAAU,KACZ,CAAC,OAAO,GAAG,CAAC,IAAI,QAAQ;YAC1B,CAAC,CAAC;gBACE,WAAW,EAAE,IAAI;gBACjB,UAAU,EAAE,KAAK;gBACjB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,OAAO;gBACxD,SAAS,EAAE,IAAI;aAChB;YACH,CAAC,CAAC,gBAAgB,CAAC,IAZhB,0BAA0B,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,SAAS,IAAI,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,SAAS,EAAE,CAa5F,CACH,CAAC;AACJ,CAAC;AACD,MAAM,gBAAgB,GAAuB,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC;AAErH,SAAS,eAAe,CAAC,EACvB,GAAG,EACH,KAAK,EACL,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,MAAM,GAAG;IACP,GAAG,EAAE,kBAAkB,CAAC,YAAY;IACpC,GAAG,EAAE,mBAAmB,CAAC,MAAM;CAChC,GAOF;IACC,MAAM,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,CAAmB,CAAC;IACjH,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,4BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACzC,GAAG,EAAE,OAAO,KACR,CAAC,QAAQ,CAAC,OAAO,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAC/G,WAAW,SACX,CACH,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,GAAW;IAC3B,OAAO,GAAG,CAAC,UAAU,CAAC,oBAAoB,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC/F,CAAC;AAED,SAAS,OAAO,CAAC,GAAW,EAAE,MAAqB;IACjD,MAAM,OAAO,GAAG,IAAI,CAAC;IAErB,OAAO,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACzB,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;QAExB,6CAA6C;QAC7C,GAAG,CAAC,MAAM,GAAG,CAAC,GAAS,EAAE;YACvB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC;YAC9B,MAAM,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC;YAC/B,MAAM,KAAK,GAAG,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;YACjE,MAAM,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;YAElE,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;YAEvB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACpC,IAAI,CAAC,GAAG,EAAE,CAAC;gBACT,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;YAED,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;YAExC,MAAM,OAAO,GAAG,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC;YAC1C,OAAO,CAAC,UAAU,GAAG,cAAc,CAAC;YACpC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;YAC/B,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;YAC/B,OAAO,CAAC,eAAe,GAAG,MAAM,CAAC,GAAG,KAAK,kBAAkB,CAAC,YAAY,CAAC;YACzE,OAAO,CAAC,UAAU,GAAG,CAAC,CAAC;YACvB,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;YAE3B,GAAG,CAAC,OAAO,CAAC,CAAC;QACf,CAAC,CAAC,CAAC;QAEH,GAAG,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9B,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;IAChB,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,UAAU,CAAC,GAAW,EAAE,MAAqB;IACpD,OAAO,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CACzB,aAAa,CAAC,IAAI,CAChB,GAAG,EACH,CAAC,IAAI,EAAE,EAAE;QACP,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC;QACjC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;QAC5B,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,GAAG,KAAK,kBAAkB,CAAC,YAAY,CAAC;QACtE,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACpB,GAAG,CAAC,IAAI,CAAC,CAAC;IACZ,CAAC,EACD,SAAS,EACT,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAChB,CACF,CAAC;AACJ,CAAC;AAED,MAAM,aAAa,GAAG,IAAI,aAAa,EAAE,CAAC;AAE1C,MAAM,SAAS,GAAa,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AACtG,MAAM,SAAS,GAAa,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AACvG,MAAM,aAAa,GAAa,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAC3G,MAAM,QAAQ,GAAa,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAC/F,MAAM,UAAU,GAAa,EAAE,MAAM,EAAE,mBAAmB,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "abstract-3d",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.4",
|
|
4
4
|
"description": "Abstract 3D",
|
|
5
5
|
"author": "Divid AB <info@divid.se>",
|
|
6
6
|
"repository": "https://github.com/dividab/abstract-visuals/tree/master/packages/abstract-3d",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"@types/three": "^0.180.0",
|
|
66
66
|
"react": "^19.2.6"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "11ecc40a7b0beea6a4a85a28a9ee208d08d896f8"
|
|
69
69
|
}
|
|
@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
|
|
|
2
2
|
import { suspend } from "suspend-react";
|
|
3
3
|
import {
|
|
4
4
|
BackSide,
|
|
5
|
+
CanvasTexture,
|
|
5
6
|
type Color,
|
|
6
7
|
DoubleSide,
|
|
7
8
|
FrontSide,
|
|
@@ -12,6 +13,7 @@ import {
|
|
|
12
13
|
} from "three";
|
|
13
14
|
import { Material } from "../../abstract-3d.js";
|
|
14
15
|
import { shade } from "../../utils.js";
|
|
16
|
+
import { mx_gradient_float } from "three/src/nodes/materialx/lib/mx_noise.js";
|
|
15
17
|
|
|
16
18
|
const decreasedOpacity = 0.125;
|
|
17
19
|
|
|
@@ -153,27 +155,7 @@ function TextureMaterial({
|
|
|
153
155
|
readonly useAlphaTest?: boolean;
|
|
154
156
|
readonly filter?: TextureFilter;
|
|
155
157
|
}): React.JSX.Element {
|
|
156
|
-
const texture = suspend(
|
|
157
|
-
new Promise((res) =>
|
|
158
|
-
textureLoader.load(
|
|
159
|
-
url,
|
|
160
|
-
(data) => {
|
|
161
|
-
data.colorSpace = SRGBColorSpace;
|
|
162
|
-
data.minFilter = filter.min;
|
|
163
|
-
data.magFilter = filter.mag;
|
|
164
|
-
if(filter.min === MinificationFilter.LinearMipmap) {
|
|
165
|
-
data.generateMipmaps = true;
|
|
166
|
-
}
|
|
167
|
-
data.anisotropy = 4;
|
|
168
|
-
res(data);
|
|
169
|
-
},
|
|
170
|
-
undefined,
|
|
171
|
-
() => res(null)
|
|
172
|
-
)
|
|
173
|
-
),
|
|
174
|
-
[url]
|
|
175
|
-
) as Texture | null;
|
|
176
|
-
|
|
158
|
+
const texture = suspend(urlIsSvg(url) ? loadSvg(url, filter) : loadNormal(url, filter), [url]) as Texture | null;
|
|
177
159
|
useEffect(() => {
|
|
178
160
|
return () => {
|
|
179
161
|
if (texture) {
|
|
@@ -194,6 +176,68 @@ function TextureMaterial({
|
|
|
194
176
|
);
|
|
195
177
|
}
|
|
196
178
|
|
|
179
|
+
function urlIsSvg(url: string): boolean {
|
|
180
|
+
return url.startsWith("data:image/svg+xml") || url.endsWith(".svg") || url.includes(".svg?");
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
function loadSvg(url: string, filter: TextureFilter): Promise<Texture | null> {
|
|
184
|
+
const maxSize = 4096;
|
|
185
|
+
|
|
186
|
+
return new Promise((res) => {
|
|
187
|
+
const img = new Image();
|
|
188
|
+
|
|
189
|
+
// eslint-disable-next-line consistent-return
|
|
190
|
+
img.onload = ((): void => {
|
|
191
|
+
const canvas = document.createElement("canvas");
|
|
192
|
+
const imgW = img.naturalWidth;
|
|
193
|
+
const imgH = img.naturalHeight;
|
|
194
|
+
const width = imgW >= imgH ? maxSize : (maxSize * (imgW / imgH));
|
|
195
|
+
const height = imgH >= imgW ? maxSize : (maxSize * (imgH / imgW));
|
|
196
|
+
|
|
197
|
+
canvas.width = width;
|
|
198
|
+
canvas.height = height;
|
|
199
|
+
|
|
200
|
+
const ctx = canvas.getContext("2d");
|
|
201
|
+
if (!ctx) {
|
|
202
|
+
return res(null);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
ctx.drawImage(img, 0, 0, width, height);
|
|
206
|
+
|
|
207
|
+
const texture = new CanvasTexture(canvas);
|
|
208
|
+
texture.colorSpace = SRGBColorSpace;
|
|
209
|
+
texture.minFilter = filter.min;
|
|
210
|
+
texture.magFilter = filter.mag;
|
|
211
|
+
texture.generateMipmaps = filter.min === MinificationFilter.LinearMipmap;
|
|
212
|
+
texture.anisotropy = 4;
|
|
213
|
+
texture.needsUpdate = true;
|
|
214
|
+
|
|
215
|
+
res(texture);
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
img.onerror = () => res(null);
|
|
219
|
+
img.src = url;
|
|
220
|
+
});
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
function loadNormal(url: string, filter: TextureFilter): Promise<Texture | null> {
|
|
224
|
+
return new Promise((res) =>
|
|
225
|
+
textureLoader.load(
|
|
226
|
+
url,
|
|
227
|
+
(data) => {
|
|
228
|
+
data.colorSpace = SRGBColorSpace;
|
|
229
|
+
data.minFilter = filter.min;
|
|
230
|
+
data.magFilter = filter.mag;
|
|
231
|
+
data.generateMipmaps = filter.min === MinificationFilter.LinearMipmap;
|
|
232
|
+
data.anisotropy = 4;
|
|
233
|
+
res(data);
|
|
234
|
+
},
|
|
235
|
+
undefined,
|
|
236
|
+
() => res(null)
|
|
237
|
+
)
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
|
|
197
241
|
const textureLoader = new TextureLoader();
|
|
198
242
|
|
|
199
243
|
const acceptMat: Material = { normal: "rgb(0,148,91)", opacity: 1.0, metalness: 0.5, roughness: 0.5 };
|