A CAD viewer component based on three.js
MIT License
The CAD viewer can visualize low level threejs
objects (tessellated objects)
A Shape contains the attributes
vertices
(the BufferGeometry
attribute position
)triangles
(the triangle index of the BufferGeometry
)normals
(the BufferGeometry
attribute normal
)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 Shape
s can be arranged as an hierarchical tree. This tree is modelled as Shapes
object, see Class Shapes
The id
s on each level define a path to each node and leaf of tree, e.g. /level1/level2_obj1/level3_object7
and so on.
For each leaf of the tree a 2 dim tuple needs to be provided to define whether shape and edges should be shown
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
npm i -g yarn
) if not already done;git clone https://github.com/bernhard-42/three-cad-viewer.git && cd three-cad-viewer
;yarn install
to install dependenciesyarn run start
and go to the page displayed in the logs (ie. 127.0.0.1:8080
)yarn run clean; yarn run build; yarn run docs
;<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>
To understand the data format, a look at the simple 1 unit sized box might be helpful:
Back to Github repo
Run a web server in watch mode
yarn run start
For the deployment, see Release.md
see Changes.md