occt-import-js
Version:
Javascript interface for the occt library.
165 lines (133 loc) • 6.38 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>OcctImportJS Demo</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.138.3/build/three.min.js"></script>
<script type="text/javascript" src="../dist/occt-import-js.js"></script>
<style>
html, body
{
margin: 0px;
padding : 0px;
}
</style>
</head>
<body>
<script type='text/javascript'>
async function LoadGeometry (targetObject)
{
// init occt-import-js
const occt = await occtimportjs ();
// download a step file
let fileUrl = '../test/testfiles/cax-if/as1_pe_203.stp';
let response = await fetch (fileUrl);
let buffer = await response.arrayBuffer ();
// read the imported step file
let fileBuffer = new Uint8Array (buffer);
let result = occt.ReadStepFile (fileBuffer, null);
// process the geometries of the result
const group = new THREE.Group();
for (let resultMesh of result.meshes) {
const { mesh, edges } = BuildMesh(resultMesh, true);
group.add(mesh);
if (edges) {
group.add(edges);
}
}
targetObject.add(group);
}
async function Load ()
{
const width = window.innerWidth;
const height = window.innerHeight;
const renderer = new THREE.WebGLRenderer ({ antialias: true });
renderer.setSize (width, height);
renderer.setClearColor (0xfafafa);
document.body.appendChild (renderer.domElement);
const camera = new THREE.PerspectiveCamera (45, width / height, 1.0, 100000.0);
camera.position.set (5000.0, 15000.0, 10000.0);
camera.up.set (0.0, 0.0, 1.0);
camera.lookAt (new THREE.Vector3 (0.0, 0.0, 0.0));
const scene = new THREE.Scene ();
const ambientLight = new THREE.AmbientLight (0x444444);
scene.add (ambientLight);
const directionalLight = new THREE.DirectionalLight (0x888888);
directionalLight.position.set (camera.position.x, camera.position.y, camera.position.z);
scene.add (directionalLight);
const mainObject = new THREE.Object3D ();
LoadGeometry (mainObject);
scene.add (mainObject);
renderer.setAnimationLoop ((time) => {
mainObject.rotation.x = time / 2000;
mainObject.rotation.y = time / 1000;
renderer.render (scene, camera);
});
}
function BuildMesh (geometryMesh, showEdges)
{
let geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.Float32BufferAttribute(geometryMesh.attributes.position.array, 3));
if (geometryMesh.attributes.normal) {
geometry.setAttribute("normal", new THREE.Float32BufferAttribute(geometryMesh.attributes.normal.array, 3));
}
geometry.name = geometryMesh.name;
const index = Uint32Array.from(geometryMesh.index.array);
geometry.setIndex(new THREE.BufferAttribute(index, 1));
const outlineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
const defaultMaterial = new THREE.MeshPhongMaterial({
color: geometryMesh.color ? new THREE.Color(geometryMesh.color[0], geometryMesh.color[1], geometryMesh.color[2]) : 0xcccccc,
specular: 0,
});
let materials = [defaultMaterial];
const edges = showEdges ? new THREE.Group() : null;
if (geometryMesh.brep_faces && geometryMesh.brep_faces.length > 0) {
for (let faceColor of geometryMesh.brep_faces) {
const color = faceColor.color ? new THREE.Color(faceColor.color[0], faceColor.color[1], faceColor.color[2]) : defaultMaterial.color;
materials.push(new THREE.MeshPhongMaterial({ color: color, specular: 0 }));
}
const triangleCount = geometryMesh.index.array.length / 3;
let triangleIndex = 0;
let faceColorGroupIndex = 0;
while (triangleIndex < triangleCount) {
const firstIndex = triangleIndex;
let lastIndex = null;
let materialIndex = null;
if (faceColorGroupIndex >= geometryMesh.brep_faces.length) {
lastIndex = triangleCount;
materialIndex = 0;
} else if (triangleIndex < geometryMesh.brep_faces[faceColorGroupIndex].first) {
lastIndex = geometryMesh.brep_faces[faceColorGroupIndex].first;
materialIndex = 0;
} else {
lastIndex = geometryMesh.brep_faces[faceColorGroupIndex].last + 1;
materialIndex = faceColorGroupIndex + 1;
faceColorGroupIndex++;
}
geometry.addGroup(firstIndex * 3, (lastIndex - firstIndex) * 3, materialIndex);
triangleIndex = lastIndex;
if (edges) {
const innerGeometry = new THREE.BufferGeometry();
innerGeometry.setAttribute("position", geometry.attributes.position);
if (geometryMesh.attributes.normal) {
innerGeometry.setAttribute("normal", geometry.attributes.normal);
}
innerGeometry.setIndex(new THREE.BufferAttribute(index.slice(firstIndex * 3, lastIndex * 3), 1));
const innerEdgesGeometry = new THREE.EdgesGeometry(innerGeometry, 180);
const edge = new THREE.LineSegments(innerEdgesGeometry, outlineMaterial);
edges.add(edge);
}
}
}
const mesh = new THREE.Mesh(geometry, materials.length > 1 ? materials : materials[0]);
mesh.name = geometryMesh.name;
if (edges) {
edges.renderOrder = mesh.renderOrder + 1;
}
return { mesh, geometry, edges };
}
Load ();
</script>
</body>
</html>