The CAD viewer can visualize low level `threejs` objects (tessellated objects)
npm install three-cad-viewerThe 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 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.
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
1. Install yarn on your system (ie. npm i -g yarn) if not already done;
2. Clone the repository: git clone https://github.com/bernhard-42/three-cad-viewer.git && cd three-cad-viewer;
3. Run yarn install to install dependencies
4. Start web server: yarn run start and go to the page displayed in the logs (ie. 127.0.0.1:8080)
5. Build project: yarn run clean; yarn run build; yarn run docs;
``html
Examples
To understand the data format, a look at the simple 1 unit sized box might be helpful:
- 1 unit sized box source code
APIs of Viewer, Display, Camera and Controls
- API docs
Back to Github repo
Development
Run a web server in watch and debug mode
bash
yarn run debug
``For the deployment, see Release.md
see Changes.md