three-cad-viewer
Advanced tools
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
edgesto 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
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 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
FAQs
WebGL-based CAD viewer built on Three.js with clipping planes, measurement tools, and tree navigation
We found that three-cad-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.