abstract-3d 0.5.13 → 0.6.1
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/lib/abstract-3d.d.ts +0 -4
- package/lib/abstract-3d.d.ts.map +1 -1
- package/lib/abstract-3d.js +8 -10
- package/lib/abstract-3d.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/renderers/dxf/color.d.ts +1 -3
- package/lib/renderers/dxf/color.d.ts.map +1 -1
- package/lib/renderers/dxf/color.js +1 -299
- package/lib/renderers/dxf/color.js.map +1 -1
- package/lib/renderers/dxf/dxf-encoding.d.ts +4 -12
- package/lib/renderers/dxf/dxf-encoding.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-encoding.js +215 -18315
- package/lib/renderers/dxf/dxf-encoding.js.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-box.d.ts +1 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-box.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-box.js +7 -7
- package/lib/renderers/dxf/dxf-geometries/dxf-box.js.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-cone.d.ts +1 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-cone.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-cone.js +2 -2
- package/lib/renderers/dxf/dxf-geometries/dxf-cone.js.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-cylinder.d.ts +1 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-cylinder.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-cylinder.js +3 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-cylinder.js.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-plane.d.ts +1 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-plane.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-plane.js +2 -2
- package/lib/renderers/dxf/dxf-geometries/dxf-plane.js.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-polygon.d.ts +1 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-polygon.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-polygon.js +5 -5
- package/lib/renderers/dxf/dxf-geometries/dxf-polygon.js.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-shape.d.ts +1 -3
- package/lib/renderers/dxf/dxf-geometries/dxf-shape.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf-geometries/dxf-shape.js +5 -5
- package/lib/renderers/dxf/dxf-geometries/dxf-shape.js.map +1 -1
- package/lib/renderers/dxf/dxf.d.ts.map +1 -1
- package/lib/renderers/dxf/dxf.js +14 -22
- package/lib/renderers/dxf/dxf.js.map +1 -1
- package/lib/renderers/react/react-camera.d.ts.map +1 -1
- package/lib/renderers/react/react-camera.js +24 -24
- package/lib/renderers/react/react-camera.js.map +1 -1
- package/lib/renderers/react/react-hotspot.js +1 -1
- package/lib/renderers/react/react-hotspot.js.map +1 -1
- package/lib/renderers/react/react-material.d.ts +1 -2
- package/lib/renderers/react/react-material.d.ts.map +1 -1
- package/lib/renderers/react/react-material.js +3 -10
- package/lib/renderers/react/react-material.js.map +1 -1
- package/lib/renderers/react/react-scene.d.ts.map +1 -1
- package/lib/renderers/react/react-scene.js +2 -1
- package/lib/renderers/react/react-scene.js.map +1 -1
- package/lib/renderers/step/step-encoding.d.ts.map +1 -1
- package/lib/renderers/step/step.d.ts.map +1 -1
- package/lib/renderers/stl/stl-encoding.d.ts.map +1 -1
- package/lib/renderers/stl/stl.d.ts.map +1 -1
- package/lib/renderers/svg/svg-encoding.d.ts.map +1 -1
- package/lib/renderers/svg/svg-encoding.js +4 -13
- package/lib/renderers/svg/svg-encoding.js.map +1 -1
- package/lib/renderers/svg/svg-geometries/shared.d.ts.map +1 -1
- package/lib/renderers/svg/svg.d.ts +1 -1
- package/lib/renderers/svg/svg.d.ts.map +1 -1
- package/lib/renderers/svg/svg.js +2 -3
- package/lib/renderers/svg/svg.js.map +1 -1
- package/package.json +6 -6
- package/src/abstract-3d.ts +9 -18
- package/src/index.ts +0 -1
- package/src/renderers/dxf/color.ts +1 -304
- package/src/renderers/dxf/dxf-encoding.ts +219 -18324
- package/src/renderers/dxf/dxf-geometries/dxf-box.ts +7 -7
- package/src/renderers/dxf/dxf-geometries/dxf-cone.ts +2 -2
- package/src/renderers/dxf/dxf-geometries/dxf-cylinder.ts +3 -3
- package/src/renderers/dxf/dxf-geometries/dxf-plane.ts +2 -3
- package/src/renderers/dxf/dxf-geometries/dxf-polygon.ts +5 -5
- package/src/renderers/dxf/dxf-geometries/dxf-shape.ts +5 -5
- package/src/renderers/dxf/dxf.ts +15 -23
- package/src/renderers/react/react-camera.tsx +28 -28
- package/src/renderers/react/react-hotspot.tsx +1 -1
- package/src/renderers/react/react-material.tsx +2 -12
- package/src/renderers/react/react-scene.tsx +3 -1
- package/src/renderers/svg/svg-encoding.ts +12 -14
- package/src/renderers/svg/svg.ts +2 -5
- package/src/.DS_Store +0 -0
- package/src/renderers/.DS_Store +0 -0
|
@@ -2,7 +2,7 @@ import { Box, Material, Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3Scale,
|
|
|
2
2
|
import { color } from "../color.js";
|
|
3
3
|
import { dxf3DFACE } from "../dxf-encoding.js";
|
|
4
4
|
|
|
5
|
-
export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3
|
|
5
|
+
export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3): string {
|
|
6
6
|
const pos = vec3TransRot(b.pos, parentPos, parentRot);
|
|
7
7
|
const rot = vec3RotCombine(parentRot, b.rot ?? vec3Zero);
|
|
8
8
|
const half = vec3Scale(b.size, 0.5);
|
|
@@ -18,11 +18,11 @@ export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3, ha
|
|
|
18
18
|
const v8 = vec3tr3(-half.x, half.y, -half.z);
|
|
19
19
|
const mat = color(m.normal);
|
|
20
20
|
return (
|
|
21
|
-
dxf3DFACE(v1, v2, v3, v4, mat
|
|
22
|
-
dxf3DFACE(v5, v6, v7, v8, mat
|
|
23
|
-
dxf3DFACE(v5, v1, v4, v8, mat
|
|
24
|
-
dxf3DFACE(v6, v2, v3, v7, mat
|
|
25
|
-
dxf3DFACE(v8, v7, v3, v4, mat
|
|
26
|
-
dxf3DFACE(v5, v6, v2, v1, mat
|
|
21
|
+
dxf3DFACE(v1, v2, v3, v4, mat) + // front
|
|
22
|
+
dxf3DFACE(v5, v6, v7, v8, mat) + // Back
|
|
23
|
+
dxf3DFACE(v5, v1, v4, v8, mat) + // Left
|
|
24
|
+
dxf3DFACE(v6, v2, v3, v7, mat) + // Right
|
|
25
|
+
dxf3DFACE(v8, v7, v3, v4, mat) + // Top
|
|
26
|
+
dxf3DFACE(v5, v6, v2, v1, mat) // Bottom
|
|
27
27
|
);
|
|
28
28
|
}
|
|
@@ -2,7 +2,7 @@ import { Cone, Material, Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } fr
|
|
|
2
2
|
import { color } from "../color.js";
|
|
3
3
|
import { dxf3DFACE } from "../dxf-encoding.js";
|
|
4
4
|
|
|
5
|
-
export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3
|
|
5
|
+
export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3): string {
|
|
6
6
|
let dxfString = "";
|
|
7
7
|
const pos = vec3TransRot(c.pos, parentPos, parentRot);
|
|
8
8
|
const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
|
|
@@ -22,7 +22,7 @@ export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, pa
|
|
|
22
22
|
|
|
23
23
|
if (i !== 0) {
|
|
24
24
|
const prevBot = botVec3Array[i - 1]!;
|
|
25
|
-
dxfString += dxf3DFACE(botPos, prevBot, currBot, currBot, mat
|
|
25
|
+
dxfString += dxf3DFACE(botPos, prevBot, currBot, currBot, mat) + dxf3DFACE(currBot, prevBot, topPos, topPos, mat);
|
|
26
26
|
}
|
|
27
27
|
currentAngle += angleStep;
|
|
28
28
|
}
|
|
@@ -2,7 +2,7 @@ import { Cylinder, Material, Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3
|
|
|
2
2
|
import { color } from "../color.js";
|
|
3
3
|
import { dxf3DFACE } from "../dxf-encoding.js";
|
|
4
4
|
|
|
5
|
-
export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3
|
|
5
|
+
export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3): string {
|
|
6
6
|
let dxfString = "";
|
|
7
7
|
const pos = vec3TransRot(c.pos, parentPos, parentRot);
|
|
8
8
|
const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
|
|
@@ -30,9 +30,9 @@ export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos:
|
|
|
30
30
|
const prevTop = topVec3Array[i - 1]!;
|
|
31
31
|
if (!c.open) {
|
|
32
32
|
dxfString +=
|
|
33
|
-
dxf3DFACE(botPos, prevBot, currBot, currBot, mat
|
|
33
|
+
dxf3DFACE(botPos, prevBot, currBot, currBot, mat) + dxf3DFACE(topPos, prevTop, currTop, currTop, mat);
|
|
34
34
|
}
|
|
35
|
-
dxfString += dxf3DFACE(currBot, prevBot, prevTop, currTop, mat
|
|
35
|
+
dxfString += dxf3DFACE(currBot, prevBot, prevTop, currTop, mat);
|
|
36
36
|
}
|
|
37
37
|
currentAngle += angleStep;
|
|
38
38
|
}
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
import { color } from "../color.js";
|
|
12
12
|
import { dxf3DFACE } from "../dxf-encoding.js";
|
|
13
13
|
|
|
14
|
-
export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3
|
|
14
|
+
export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3): string {
|
|
15
15
|
const half = vec2Scale(p.size, 0.5);
|
|
16
16
|
const pos = vec3TransRot(p.pos, parentPos, parentRot);
|
|
17
17
|
const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
|
|
@@ -21,7 +21,6 @@ export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3
|
|
|
21
21
|
vec3tr(half.x, -half.y),
|
|
22
22
|
vec3tr(half.x, half.y),
|
|
23
23
|
vec3tr(-half.x, half.y),
|
|
24
|
-
color(m.normal)
|
|
25
|
-
handleRef
|
|
24
|
+
color(m.normal)
|
|
26
25
|
);
|
|
27
26
|
}
|
|
@@ -4,7 +4,7 @@ import { dxf3DFACE } from "../dxf-encoding.js";
|
|
|
4
4
|
|
|
5
5
|
const chunkSize = 4;
|
|
6
6
|
|
|
7
|
-
export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot: Vec3
|
|
7
|
+
export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot: Vec3): string {
|
|
8
8
|
let polygonString = "";
|
|
9
9
|
const pos = vec3TransRot(p.pos, parentPos, parentRot);
|
|
10
10
|
const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
|
|
@@ -12,7 +12,7 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
|
|
|
12
12
|
let i = 0;
|
|
13
13
|
if (points.length >= chunkSize) {
|
|
14
14
|
for (i; i < points.length; i += chunkSize) {
|
|
15
|
-
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, color(m.normal)
|
|
15
|
+
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, color(m.normal));
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -20,13 +20,13 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
|
|
|
20
20
|
const lastArrayLength = points.length - i;
|
|
21
21
|
switch (lastArrayLength) {
|
|
22
22
|
case 1:
|
|
23
|
-
polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, color(m.normal)
|
|
23
|
+
polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, color(m.normal));
|
|
24
24
|
break;
|
|
25
25
|
case 2:
|
|
26
|
-
polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, color(m.normal)
|
|
26
|
+
polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, color(m.normal));
|
|
27
27
|
break;
|
|
28
28
|
case 3:
|
|
29
|
-
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, color(m.normal)
|
|
29
|
+
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, color(m.normal));
|
|
30
30
|
break;
|
|
31
31
|
default:
|
|
32
32
|
break;
|
|
@@ -4,7 +4,7 @@ import { dxf3DFACE } from "../dxf-encoding.js";
|
|
|
4
4
|
|
|
5
5
|
const chunkSize = 4;
|
|
6
6
|
|
|
7
|
-
export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Vec3
|
|
7
|
+
export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Vec3): string {
|
|
8
8
|
let polygonString = "";
|
|
9
9
|
const pos = vec3TransRot(s.pos, parentPos, parentRot);
|
|
10
10
|
const rot = vec3RotCombine(parentRot, s.rot ?? vec3Zero);
|
|
@@ -13,7 +13,7 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
|
|
|
13
13
|
let i = 0;
|
|
14
14
|
if (points.length >= chunkSize) {
|
|
15
15
|
for (i; i < points.length; i += chunkSize) {
|
|
16
|
-
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, mat
|
|
16
|
+
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, mat);
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -21,13 +21,13 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
|
|
|
21
21
|
const lastArrayLength = points.length - i;
|
|
22
22
|
switch (lastArrayLength) {
|
|
23
23
|
case 1:
|
|
24
|
-
polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, mat
|
|
24
|
+
polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, mat);
|
|
25
25
|
break;
|
|
26
26
|
case 2:
|
|
27
|
-
polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, mat
|
|
27
|
+
polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, mat);
|
|
28
28
|
break;
|
|
29
29
|
case 3:
|
|
30
|
-
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, mat
|
|
30
|
+
polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, mat);
|
|
31
31
|
break;
|
|
32
32
|
default:
|
|
33
33
|
break;
|
package/src/renderers/dxf/dxf.ts
CHANGED
|
@@ -11,36 +11,28 @@ export const toDxf = (scene: Scene, view: View): string => {
|
|
|
11
11
|
const unitRot = vec3RotCombine(rotationForCameraPos(view), scene.rotation_deprecated ?? vec3Zero);
|
|
12
12
|
const rotatedCenter = vec3Rot(scene.center_deprecated ?? vec3Zero, vec3Zero, scene.rotation_deprecated ?? vec3Zero);
|
|
13
13
|
const [size, center] = sizeCenterForCameraPos(scene.size_deprecated, rotatedCenter, vec3Zero, 1);
|
|
14
|
-
|
|
15
|
-
const handleRef = {handle: 0x1000}; //make sure we start with a value higher than any other handle id's used in the header
|
|
16
|
-
return dxfHeader(size, center, id) + scene.groups.reduce((a, c) => a + dxfGroup(c, center, unitRot, handleRef), "") + dxfFooter(id);
|
|
14
|
+
return dxfHeader(size, center) + scene.groups.reduce((a, c) => a + dxfGroup(c, center, unitRot), "") + dxfFooter;
|
|
17
15
|
};
|
|
18
16
|
|
|
19
|
-
function dxfGroup(g: Group, parentPos: Vec3, parentRot: Vec3
|
|
17
|
+
function dxfGroup(g: Group, parentPos: Vec3, parentRot: Vec3): string {
|
|
20
18
|
const pos = vec3TransRot(g.pos, parentPos, parentRot);
|
|
21
19
|
const rot = vec3RotCombine(parentRot, g.rot ?? vec3Zero);
|
|
22
20
|
return (
|
|
23
21
|
(g.meshes?.reduce((a, c) => {
|
|
24
22
|
switch (c.geometry.type) {
|
|
25
|
-
case "Plane":
|
|
26
|
-
return a + dxfPlane(c.geometry, c.material, pos, rot
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
case "
|
|
32
|
-
return a +
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
case "Polygon": {
|
|
38
|
-
return a + dxfPolygon(c.geometry, c.material, pos, rot, handleRef);
|
|
39
|
-
}
|
|
40
|
-
default: {
|
|
23
|
+
case "Plane":
|
|
24
|
+
return a + dxfPlane(c.geometry, c.material, pos, rot);
|
|
25
|
+
case "Box":
|
|
26
|
+
return a + dxfBox(c.geometry, c.material, pos, rot);
|
|
27
|
+
case "Cylinder":
|
|
28
|
+
return a + dxfCylinder(c.geometry, c.material, 18, pos, rot);
|
|
29
|
+
case "Cone":
|
|
30
|
+
return a + dxfCone(c.geometry, c.material, 18, pos, rot);
|
|
31
|
+
case "Polygon":
|
|
32
|
+
return a + dxfPolygon(c.geometry, c.material, pos, rot);
|
|
33
|
+
default:
|
|
41
34
|
return a;
|
|
42
|
-
}
|
|
43
35
|
}
|
|
44
|
-
}, "") ?? "") + g.groups?.reduce((a, c) => a + dxfGroup(c, pos, rot
|
|
36
|
+
}, "") ?? "") + g.groups?.reduce((a, c) => a + dxfGroup(c, pos, rot), "")
|
|
45
37
|
);
|
|
46
|
-
}
|
|
38
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
2
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
3
|
-
import React, { useEffect,
|
|
3
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
4
4
|
import {
|
|
5
5
|
GizmoHelperProps,
|
|
6
6
|
PerspectiveCamera,
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
GizmoViewcube,
|
|
12
12
|
GizmoViewport,
|
|
13
13
|
} from "@react-three/drei";
|
|
14
|
-
import { ThreeEvent, useThree } from "@react-three/fiber";
|
|
14
|
+
import { ThreeEvent, useFrame, useThree } from "@react-three/fiber";
|
|
15
15
|
import { exhaustiveCheck } from "ts-exhaustive-check";
|
|
16
16
|
import { Vector3 } from "three/src/math/Vector3.js";
|
|
17
17
|
import { View, Scene, Vec3, vec3 } from "../../abstract-3d.js";
|
|
@@ -31,6 +31,20 @@ export type ControlsHelper = (Viewcube | Viewport) & { readonly props: Pick<Gizm
|
|
|
31
31
|
type Viewcube = { readonly type: "Viewcube"; readonly viewcubeProps: GenericProps };
|
|
32
32
|
type Viewport = { readonly type: "Viewport"; readonly viewportProps: GizmoViewportProps };
|
|
33
33
|
|
|
34
|
+
const ControlsWrapper = (
|
|
35
|
+
props: OrbitControlsProps & { readonly setControls: (r: React.MutableRefObject<any>) => void }
|
|
36
|
+
): React.JSX.Element => {
|
|
37
|
+
const ref = useRef<any>(undefined!);
|
|
38
|
+
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (!ref.current) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
props.setControls(ref.current);
|
|
44
|
+
}, [ref.current]);
|
|
45
|
+
return <OrbitControls {...props} makeDefault ref={ref} />;
|
|
46
|
+
};
|
|
47
|
+
|
|
34
48
|
export function ReactCamera({
|
|
35
49
|
useAnimations,
|
|
36
50
|
camera,
|
|
@@ -51,7 +65,7 @@ export function ReactCamera({
|
|
|
51
65
|
const orthographicRef = useRef<any | undefined>(undefined);
|
|
52
66
|
const viewPortAspect = useThree(({ viewport: { aspect } }) => aspect);
|
|
53
67
|
|
|
54
|
-
|
|
68
|
+
useEffect(() => {
|
|
55
69
|
const [posX, posY, posZ, size, sceneAspect] = (() => {
|
|
56
70
|
switch (view) {
|
|
57
71
|
case "front":
|
|
@@ -122,17 +136,17 @@ export function ReactCamera({
|
|
|
122
136
|
// prevScene.current = scene;
|
|
123
137
|
// }, [scene]);
|
|
124
138
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
139
|
+
useFrame(() => {
|
|
140
|
+
// if (useAnimations && camera && prevScene.current !== scene) {
|
|
141
|
+
// const [, , z] = cameraDist(scene);
|
|
142
|
+
// vector3.set(camera.position.x, camera.position.y, z);
|
|
143
|
+
// camera.position.lerp(vector3, 0.12);
|
|
144
|
+
// ref.current.enabled = false;
|
|
145
|
+
// invalidate();
|
|
146
|
+
// } else {
|
|
147
|
+
// ref.current.enabled = true;
|
|
148
|
+
// }
|
|
149
|
+
});
|
|
136
150
|
return (
|
|
137
151
|
<>
|
|
138
152
|
<PerspectiveCamera
|
|
@@ -184,20 +198,6 @@ export function ReactCamera({
|
|
|
184
198
|
);
|
|
185
199
|
}
|
|
186
200
|
|
|
187
|
-
const ControlsWrapper = (
|
|
188
|
-
props: OrbitControlsProps & { readonly setControls: (r: React.MutableRefObject<any>) => void }
|
|
189
|
-
): React.JSX.Element => {
|
|
190
|
-
const ref = useRef<any>(undefined!);
|
|
191
|
-
|
|
192
|
-
useLayoutEffect(() => {
|
|
193
|
-
if (!ref.current) {
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
props.setControls(ref.current);
|
|
197
|
-
}, [ref.current]);
|
|
198
|
-
return <OrbitControls {...props} makeDefault ref={ref} />;
|
|
199
|
-
};
|
|
200
|
-
|
|
201
201
|
type GizmoViewportProps = React.JSX.IntrinsicElements["group"] & {
|
|
202
202
|
readonly axisColors?: readonly [string, string, string];
|
|
203
203
|
readonly axisScale?: readonly [number, number, number];
|
|
@@ -100,7 +100,7 @@ export function ReactHotSpot({
|
|
|
100
100
|
})}
|
|
101
101
|
>
|
|
102
102
|
<ReactMesh mesh={h.mesh}>
|
|
103
|
-
<ReactMaterial id={h.id} isText={false}
|
|
103
|
+
<ReactMaterial id={h.id} isText={false} material={h.mesh.material} hoveredId={hoveredId} />
|
|
104
104
|
</ReactMesh>
|
|
105
105
|
</group>
|
|
106
106
|
{hotSpotTexts && text && (
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { suspend } from "suspend-react";
|
|
3
3
|
import { Color, DoubleSide, MaterialParameters, SRGBColorSpace, Texture, TextureLoader } from "three";
|
|
4
4
|
import { Material } from "../../abstract-3d.js";
|
|
@@ -18,7 +18,6 @@ export function ReactMaterial({
|
|
|
18
18
|
materialStateImages,
|
|
19
19
|
state,
|
|
20
20
|
isText,
|
|
21
|
-
isHotSpot,
|
|
22
21
|
}: {
|
|
23
22
|
readonly material: Material;
|
|
24
23
|
readonly id?: string;
|
|
@@ -28,7 +27,6 @@ export function ReactMaterial({
|
|
|
28
27
|
readonly materialStateImages?: Record<string, string>;
|
|
29
28
|
readonly state?: MaterialState | undefined;
|
|
30
29
|
readonly isText: boolean;
|
|
31
|
-
readonly isHotSpot?: boolean;
|
|
32
30
|
}): React.JSX.Element {
|
|
33
31
|
const mat =
|
|
34
32
|
!state || material.image?.type === "UrlImage"
|
|
@@ -72,7 +70,7 @@ export function ReactMaterial({
|
|
|
72
70
|
roughness={mat.roughness}
|
|
73
71
|
metalness={mat.metalness}
|
|
74
72
|
side={DoubleSide}
|
|
75
|
-
{...(
|
|
73
|
+
{...(opacity < 1 || disabled
|
|
76
74
|
? { transparent: true, opacity: disabled ? opacity * decreasedOpacity : opacity }
|
|
77
75
|
: materialDefaults)}
|
|
78
76
|
/>
|
|
@@ -103,14 +101,6 @@ function TextureMaterial({
|
|
|
103
101
|
[url]
|
|
104
102
|
) as Texture | null;
|
|
105
103
|
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
return () => {
|
|
108
|
-
if (texture) {
|
|
109
|
-
texture.dispose();
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
}, [texture]);
|
|
113
|
-
|
|
114
104
|
return (
|
|
115
105
|
<meshBasicMaterial
|
|
116
106
|
color={color}
|
|
@@ -5,6 +5,8 @@ import { ReactDimensions } from "./react-dimension.js";
|
|
|
5
5
|
import { ReactGroup } from "./react-group.js";
|
|
6
6
|
import { MaterialState } from "./react-material.js";
|
|
7
7
|
|
|
8
|
+
// dummy 2
|
|
9
|
+
|
|
8
10
|
export function ReactScene({
|
|
9
11
|
scene,
|
|
10
12
|
selectedId,
|
|
@@ -64,7 +66,7 @@ export function ReactScene({
|
|
|
64
66
|
const id = createGroupId ? createGroupId(g) : "";
|
|
65
67
|
return (
|
|
66
68
|
<ReactGroup
|
|
67
|
-
key={createGroupKey ? createGroupKey(g,
|
|
69
|
+
key={createGroupKey ? createGroupKey(g, i, g.data, id) : i}
|
|
68
70
|
g={g}
|
|
69
71
|
selectedId={selectedId}
|
|
70
72
|
hotSpotsActive={activeHotSpots !== undefined}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Vec2, vec2Add, vec2Scale } from "../../abstract-3d.js";
|
|
2
2
|
|
|
3
|
-
export const svg = (width: number, height: number, children: string): string =>
|
|
4
|
-
|
|
3
|
+
export const svg = (width: number, height: number, children: string): string =>
|
|
4
|
+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width.toFixed(0)} ${height.toFixed(
|
|
5
5
|
0
|
|
6
6
|
)}" width="${width.toFixed(0)}px" height="${height.toFixed(0)}px">${children} </svg>`;
|
|
7
|
-
};
|
|
8
7
|
|
|
9
8
|
export const svgLine = (p1: Vec2, p2: Vec2, stroke: string, strokeWidth: number): string =>
|
|
10
9
|
`<line x1="${p1.x.toFixed(0)}" y1="${p1.y.toFixed(0)}" x2="${p2.x.toFixed(0)}" y2="${p2.y.toFixed(
|
|
@@ -31,17 +30,16 @@ export type EmbededImage =
|
|
|
31
30
|
| { readonly type: "svg"; readonly svg: string };
|
|
32
31
|
|
|
33
32
|
export const svgImage = (p: Vec2, size: Vec2, rot: number, data: EmbededImage): string => {
|
|
34
|
-
const rad = rot * (Math.PI / 180);
|
|
35
|
-
const cos = Math.abs(Math.cos(rad));
|
|
36
|
-
const sin = Math.abs(Math.sin(rad));
|
|
37
|
-
const newSize = vec2(size.x * cos + size.y * sin, size.x * sin + size.y * cos);
|
|
38
33
|
const half = vec2Scale(size, 0.5);
|
|
39
|
-
const originalCenter = vec2(size.x / 2, size.y / 2);
|
|
40
|
-
const rotatedCenter = vec2(newSize.x / 2, newSize.y / 2);
|
|
41
|
-
const rotatatedTranslationDelta = vec2(originalCenter.x - rotatedCenter.x, originalCenter.y - rotatedCenter.y);
|
|
42
34
|
return data.type === "url"
|
|
43
|
-
|
|
44
|
-
|
|
35
|
+
? `<image x="${p.x.toFixed(0)}" y="${p.y.toFixed(0)}" transform="${rotate(rot)}" ${transformOrigin(
|
|
36
|
+
p,
|
|
37
|
+
half
|
|
38
|
+
)} width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}" />`
|
|
39
|
+
: `<svg width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" transform="${translate(
|
|
40
|
+
vec2Add(p, half)
|
|
41
|
+
)} ${rotate(rot)} ${translate(vec2Scale(half, -1))}">${data.svg}</svg>
|
|
42
|
+
|
|
45
43
|
`;
|
|
46
44
|
};
|
|
47
45
|
|
|
@@ -49,5 +47,5 @@ const transformOrigin = (p: Vec2, half: Vec2): string =>
|
|
|
49
47
|
`transform-origin="${(p.x + half.x).toFixed(0)}px ${(p.y + half.y).toFixed(0)}px"`;
|
|
50
48
|
|
|
51
49
|
const rotate = (rot: number): string => `rotate(${rot.toFixed(0)})`;
|
|
52
|
-
|
|
50
|
+
|
|
53
51
|
const translate = (p: Vec2): string => `translate(${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;
|
package/src/renderers/svg/svg.ts
CHANGED
|
@@ -35,8 +35,7 @@ export function toSvg(
|
|
|
35
35
|
grayScale?: boolean,
|
|
36
36
|
onlyStrokeFill: string = "rgba(255,255,255,0)",
|
|
37
37
|
font: string = "",
|
|
38
|
-
buffers?: Record<string, string
|
|
39
|
-
rotation?: number
|
|
38
|
+
buffers?: Record<string, string>
|
|
40
39
|
): { readonly image: string; readonly width: number; readonly height: number } {
|
|
41
40
|
const factor = scale
|
|
42
41
|
? scale.size /
|
|
@@ -48,9 +47,7 @@ export function toSvg(
|
|
|
48
47
|
? scene.size_deprecated.z
|
|
49
48
|
: scene.size_deprecated.y)
|
|
50
49
|
: 1;
|
|
51
|
-
const
|
|
52
|
-
const unitRot = rotation ? vec3RotCombine(vec3(0, 0, (rotation * Math.PI) / 180), baseRot) : baseRot;
|
|
53
|
-
|
|
50
|
+
const unitRot = vec3RotCombine(rotationForCameraPos(view), scene.rotation_deprecated ?? vec3Zero);
|
|
54
51
|
const unitPos = vec3Rot(scene.center_deprecated ?? vec3Zero, vec3Zero, scene.rotation_deprecated ?? vec3Zero);
|
|
55
52
|
const [size, center] = sizeCenterForCameraPos(scene.size_deprecated, unitPos, unitRot, factor);
|
|
56
53
|
const unitHalfSize = vec3Scale(size, 0.5);
|
package/src/.DS_Store
DELETED
|
Binary file
|
package/src/renderers/.DS_Store
DELETED
|
Binary file
|