three-cad-viewer 3.3.5 → 3.4.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/Readme.md +99 -25
- package/dist/three-cad-viewer.esm.js +318 -169
- package/dist/three-cad-viewer.esm.js.map +1 -0
- package/dist/three-cad-viewer.esm.min.js +1 -1
- package/dist/three-cad-viewer.js +318 -169
- package/dist/three-cad-viewer.min.js +1 -1
- package/package.json +1 -1
- package/src/_version.js +1 -1
- package/src/cad_tools/select.js +93 -0
- package/src/cad_tools/tools.js +39 -21
- package/src/display.js +28 -2
- package/src/icons.js +3 -0
- package/src/index.html +11 -7
- package/src/treeview.js +4 -1
- package/src/types.js +86 -61
- package/src/viewer.js +54 -46
package/Readme.md
CHANGED
|
@@ -53,7 +53,7 @@ For the `States` object, see [Class States](https://bernhard-42.github.io/three-
|
|
|
53
53
|
```html
|
|
54
54
|
<html>
|
|
55
55
|
<head>
|
|
56
|
-
<link rel="stylesheet" href="./dist/three-cad-viewer.
|
|
56
|
+
<link rel="stylesheet" href="./dist/three-cad-viewer.css" />
|
|
57
57
|
<script type="module">
|
|
58
58
|
import { Viewer, Display, Timer } from "./dist/three-cad-viewer.esm.js";
|
|
59
59
|
|
|
@@ -61,40 +61,114 @@ For the `States` object, see [Class States](https://bernhard-42.github.io/three-
|
|
|
61
61
|
console.log("NOTIFY:", JSON.stringify(change, null, 2));
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
control: "trackball", // "orbit",
|
|
68
|
-
normalLen: 0,
|
|
69
|
-
cadWidth: 800,
|
|
70
|
-
height: 600,
|
|
64
|
+
const displayOptions = {
|
|
65
|
+
cadWidth: 850,
|
|
66
|
+
height: 525,
|
|
71
67
|
treeWidth: 240,
|
|
72
|
-
|
|
68
|
+
theme: "browser",
|
|
69
|
+
pinning: true,
|
|
70
|
+
keymap: {
|
|
71
|
+
"shift": "shiftKey",
|
|
72
|
+
"ctrl": "ctrlKey",
|
|
73
|
+
"meta": "metaKey"
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
const renderOptions = {
|
|
78
|
+
ambientIntensity: 1.0,
|
|
79
|
+
directIntensity: 1.1,
|
|
80
|
+
metalness: 0.30,
|
|
81
|
+
roughness: 0.65,
|
|
82
|
+
edgeColor: 0x707070,
|
|
83
|
+
defaultOpacity: 0.5,
|
|
73
84
|
normalLen: 0,
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
axes: true,
|
|
79
|
-
grid: [false, false, false],
|
|
80
|
-
timeit: false,
|
|
81
|
-
rotateSpeed: 1,
|
|
85
|
+
};
|
|
86
|
+
const viewerOptions = {
|
|
87
|
+
"target":[0,0,0],
|
|
88
|
+
"up": "Z"
|
|
82
89
|
};
|
|
83
90
|
|
|
84
|
-
const shapes = {
|
|
85
|
-
|
|
91
|
+
const shapes = {
|
|
92
|
+
version: 3,
|
|
93
|
+
parts: [
|
|
94
|
+
{
|
|
95
|
+
id: "/Group/Workplane(Solid)",
|
|
96
|
+
type: "shapes",
|
|
97
|
+
subtype: "solid",
|
|
98
|
+
name: "Workplane(Solid)",
|
|
99
|
+
shape: {
|
|
100
|
+
vertices: [
|
|
101
|
+
-0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5,
|
|
102
|
+
0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, -0.5,
|
|
103
|
+
-0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5,
|
|
104
|
+
0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5,
|
|
105
|
+
-0.5, -0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
|
|
106
|
+
0.5, -0.5, 0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5,
|
|
107
|
+
],
|
|
108
|
+
triangles: [
|
|
109
|
+
1, 2, 0, 1, 3, 2, 5, 4, 6, 5, 6, 7, 11, 8, 9, 11, 10, 8, 15, 13, 12,
|
|
110
|
+
15, 12, 14, 19, 16, 17, 19, 18, 16, 23, 21, 20, 23, 20, 22,
|
|
111
|
+
],
|
|
112
|
+
normals: [
|
|
113
|
+
-1.0, -0.0, 0.0, -1.0, -0.0, 0.0, -1.0, -0.0, 0.0, -1.0, -0.0, 0.0,
|
|
114
|
+
1.0, 0.0, -0.0, 1.0, 0.0, -0.0, 1.0, 0.0, -0.0, 1.0, 0.0, -0.0, 0.0,
|
|
115
|
+
-1.0, -0.0, 0.0, -1.0, -0.0, 0.0, -1.0, -0.0, 0.0, -1.0, -0.0, -0.0,
|
|
116
|
+
1.0, 0.0, -0.0, 1.0, 0.0, -0.0, 1.0, 0.0, -0.0, 1.0, 0.0, -0.0, -0.0,
|
|
117
|
+
-1.0, -0.0, -0.0, -1.0, -0.0, -0.0, -1.0, -0.0, -0.0, -1.0, 0.0, 0.0,
|
|
118
|
+
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
|
|
119
|
+
],
|
|
120
|
+
edges: [
|
|
121
|
+
-0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5,
|
|
122
|
+
-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, -0.5,
|
|
123
|
+
0.5, -0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5,
|
|
124
|
+
0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
|
|
125
|
+
-0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5, 0.5,
|
|
126
|
+
-0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5,
|
|
127
|
+
],
|
|
128
|
+
obj_vertices: [
|
|
129
|
+
-0.5, -0.5, 0.5, -0.5, -0.5, -0.5, -0.5, 0.5, 0.5, -0.5, 0.5, -0.5,
|
|
130
|
+
0.5, -0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
|
|
131
|
+
],
|
|
132
|
+
face_types: [0, 0, 0, 0, 0, 0],
|
|
133
|
+
edge_types: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
134
|
+
triangles_per_face: [2, 2, 2, 2, 2, 2],
|
|
135
|
+
segments_per_edge: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
136
|
+
},
|
|
137
|
+
state: [1, 1],
|
|
138
|
+
color: "#e8b024",
|
|
139
|
+
alpha: 1.0,
|
|
140
|
+
texture: null,
|
|
141
|
+
loc: [
|
|
142
|
+
[-0.0, -0.0, 0.0],
|
|
143
|
+
[0.0, 0.0, 0.0, 1.0],
|
|
144
|
+
],
|
|
145
|
+
renderback: false,
|
|
146
|
+
accuracy: null,
|
|
147
|
+
bb: null,
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
loc: [
|
|
151
|
+
[0.0, 0.0, 0.0],
|
|
152
|
+
[0.0, 0.0, 0.0, 1.0],
|
|
153
|
+
],
|
|
154
|
+
name: "Group",
|
|
155
|
+
id: "/Group",
|
|
156
|
+
normal_len: 0,
|
|
157
|
+
bb: { xmin: -0.5, xmax: 0.5, ymin: -0.5, ymax: 0.5, zmin: -0.5, zmax: 0.5 },
|
|
158
|
+
};
|
|
86
159
|
|
|
87
160
|
// 1) get the container
|
|
88
161
|
const container = document.getElementById("cad_view");
|
|
89
162
|
|
|
90
163
|
// 2) Create the CAD display in this container
|
|
91
|
-
const display = new Display(container,
|
|
164
|
+
const display = new Display(container, displayOptions);
|
|
92
165
|
|
|
93
166
|
// 3) Create the CAD viewer
|
|
94
|
-
const viewer = new Viewer(display,
|
|
95
|
-
|
|
167
|
+
const viewer = new Viewer(display, viewerOptions, nc);
|
|
168
|
+
// or viewer.clear() if the viewer exists
|
|
169
|
+
|
|
96
170
|
// 4) Render the shapes and provide states for the navigation tree in this viewer
|
|
97
|
-
viewer.render(shapes,
|
|
171
|
+
viewer.render(shapes, renderOptions, viewerOptions);
|
|
98
172
|
</script>
|
|
99
173
|
</head>
|
|
100
174
|
|
|
@@ -118,10 +192,10 @@ Back to [Github repo](https://github.com/bernhard-42/three-cad-viewer)
|
|
|
118
192
|
|
|
119
193
|
## Development
|
|
120
194
|
|
|
121
|
-
Run a web server in watch mode
|
|
195
|
+
Run a web server in watch and debug mode
|
|
122
196
|
|
|
123
197
|
```bash
|
|
124
|
-
yarn run
|
|
198
|
+
yarn run debug
|
|
125
199
|
```
|
|
126
200
|
|
|
127
201
|
For the deployment, see [Release.md](./Release.md)
|