A threejs based CAD viewer
Overview
The CAD viewer can visualize low level threejs objects (tessellated objects)
Shape and Shapes
A Shape contains the attributes
vertices(theBufferGeometryattributeposition)triangles(the triangle index of theBufferGeometry)normals(theBufferGeometryattributenormal)
as described e.g. in BufferGeometry or Three.js Custom BufferGeometry
plus additionally the attribute
edges
to define which edges of the mesh should be shown.
The 4 attributes (vertices, triangles, normals, edges) define an object called Shape, see Class Shape
Multiple Shapes can be arranged as an hierarchical tree. This tree is modelled as Shapes object, see Class Shapes
The ids on each level define a path to each node and leaf of tree, e.g. /level1/level2_obj1/level3_object7 and so on.
States
For each leaf of the tree a 2 dim tuple needs to be provided to define whether shape and edges should be shown
- 0 = shape/edges hidden
- 1 = shape/edges shown
- 3 = shape/edges does not exist
The value 2 is reserved for nodes and shows a mixed state, i.d. some of the children are show, some not.
For the States object, see Class States
Skeleton:
<html>
<head>
<link rel="stylesheet" href="./dist/three-cad-viewer.esm.css" />
<script type="module">
import { Viewer, Display, Timer } from "./dist/three-cad-viewer.esm.js";
function nc(change) {
console.log("NOTIFY:", JSON.stringify(change, null, 2));
}
const options = {
theme: "light",
ortho: true,
control: "trackball", // "orbit",
normalLen: 0,
cadWidth: 800,
height: 600,
treeWidth: 240,
ticks: 10,
normalLen: 0,
ambientIntensity: 0.9,
directIntensity: 0.12,
transparent: false,
blackEdges: false,
axes: true,
grid: [false, false, false],
timeit: false,
rotateSpeed: 1,
};
const shapes = {}; // a Shapes object, see example or API docs
const states = {}; // a States object, see example or API docs
// 1) get the container
const container = document.getElementById("cad_view");
// 2) Create the CAD display in this container
const display = new Display(container, options);
// 3) Create the CAD viewer
const viewer = new Viewer(display, true, options, nc);
// 4) Render the shapes and provide states for the navigation tree in this viewer
viewer.render(shapes, states);
</script>
</head>
<body>
<div id="cad_view"></div>
</body>
</html>Examples
To understand the data format, a look at the simple 1 unit sized box might be helpful:
APIs of Viewer, Display, Camera and Controls
Back to Github repo
Development
Run a web server in watch mode
yarn run startFor the deployment, see Release.md
Changes
v1.5.7
- fixed ids of checkboxes to be unique across the document
v1.5.8
- fixed glass and tools paramewter handling
- fixed initial zoom for wide cad views with low height
v1.5.9
- fixed a regression from v1.5.8 around initial zoom value handling)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent