https://github.com/bernhard-42/three-cad-viewer
A CAD viewer component based on three.js
https://github.com/bernhard-42/three-cad-viewer
Last synced: 6 months ago
JSON representation
A CAD viewer component based on three.js
- Host: GitHub
- URL: https://github.com/bernhard-42/three-cad-viewer
- Owner: bernhard-42
- License: mit
- Created: 2021-10-02T17:09:35.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-24T07:05:09.000Z (7 months ago)
- Last Synced: 2025-04-01T09:19:50.473Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 44.6 MB
- Stars: 243
- Watchers: 10
- Forks: 41
- Open Issues: 6
-
Metadata Files:
- Readme: Readme.md
- Changelog: Changes.md
- License: LICENSE
Awesome Lists containing this project
README
# A threejs based CAD viewer
## Overview
The CAD viewer can visualize low level `threejs` objects (tessellated objects)
[Live Examples](https://bernhard-42.github.io/three-cad-viewer/example.html)
### Shape and Shapes
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](https://threejs.org/docs/#api/en/core/BufferGeometry) or [Three.js Custom BufferGeometry](https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html)
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](https://bernhard-42.github.io/three-cad-viewer/global.html#Shape)
Multiple `Shape`s can be arranged as an hierarchical tree. This tree is modelled as `Shapes` object, see [Class Shapes](https://bernhard-42.github.io/three-cad-viewer/global.html#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.
### 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](https://bernhard-42.github.io/three-cad-viewer/global.html#States)
### Getting started
1. [Install yarn](https://classic.yarnpkg.com/en/docs/install) 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`;
## Skeleton:
```html
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);
```
## Examples
To understand the data format, a look at the simple 1 unit sized box might be helpful:
- [1 unit sized box source code](https://github.com/bernhard-42/three-cad-viewer/blob/master/examples/box1.js)
## APIs of Viewer, Display, Camera and Controls
- [API docs](https://bernhard-42.github.io/three-cad-viewer/Viewer.html)
Back to [Github repo](https://github.com/bernhard-42/three-cad-viewer)
## Development
Run a web server in watch mode
```bash
yarn run start
```
For the deployment, see [Release.md](./Release.md)
# Changes
see [Changes.md](./Changes.md)