kovacsv / occt-import-js Goto Github PK

Hello,

I know that OCC supports tesselation control of shapes (step size, chordal / sag distance,..). Is it possible for user to define the tesselation parameters through the library ?
If not possible in actual lib, could you briefly explain how/where such a setting could be done ?

Thank you.

Hello Kovacsv!!!

Thank you for your great library!!!
I used your library in Node JS successfully.
But I have faced some issues:

• The STP files which over >50MB can not display in Three js (Please check my file attached below).
• The mesh geometries that have the same properties are not reusable in the result, which will affect the performance for loading and importing.
  Powder.zip

I tried to upload a step file of more than 200 M, and the system did not respond directly. How can I solve and optimize it?

THREE.js viewer example: https://github.com/kovacsv/occt-import-js/blob/main/examples/three_viewer.html#L28-L64

I've added a working (so far in my tests) face_colors implementation to this Codesandbox: https://codesandbox.io/s/convert-step-file-to-glb-with-three-js-occt-import-js-v0-3-5hk66o?file=/src/StepLoader.js

• Does my implementation look to be on the right track?
• Would you like a Pull Request updating the THREE.js viewer example?

Hi kovacsv,

My my suggestion for above mainly because the .stp file alway come from different manufacturers. It is good if can have that information for assembly the parts.

I dont know anything about emscripten yet. And it will take a huge amount of time for me to get this done. Bellow is some entity I got in my .stp file. Thank you in advance!

#745=AXIS2_PLACEMENT_3D('PCS',#1091,#853,#854);
#746=AXIS2_PLACEMENT_3D('MCS',#1092,#855,#856);
#747=AXIS2_PLACEMENT_3D('CSW',#1093,#857,#858);

p.s: and this is the link for the entity definition

Hello!
I'm trying to import the occt-import-js to a react application. But unfortunately it is not working. I have imported
occt-import.js and occt-import-js.wasm to my scr folder in my react application. Within my react app I have a sandbox.js like this:

import occtimportjs from "./occt-import-js";
import {useEffect} from "react";

const Sandbox = () =>{
async function init(){
const occt = await occtimportjs();
// let result = occt.ReadStepFile(event.data.stepFile, null);
return occt;
}

useEffect(() => {
    init().then(
        function (value){console.log("success")},
        function (error){console.log("error")}
    );
},[]);
return (<p>sandbox</p>        );

}
export default Sandbox;

The occtimport.js is not running. I get following error in the console of my browser:

occt-import-js.js:326 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
occt-import-js.js:327 falling back to ArrayBuffer instantiation
occt-import-js.js:326 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
occt-import-js.js:327 falling back to ArrayBuffer instantiation
occt-import-js.js:316 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
occt-import-js.js:242 Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0)

could you please help me?
Thank you very much. Best greetings
Olaf

Hello Sir! I am a freshman and I need your help
I am trying to add the javascript library to my Nuxt3 project
I am trying to create a basic step viewer with the help of three.js
the first problem is that the lib is not es6, and also I think I have a problem with the

wasm file

async importOcct() {
let occt
const test = await import("occt-import-js").then(lib => {
occt = lib.default || lib
})
return occt
}

this is how I am trying import

When i install occt-import-js，and i use it like this：

then the console report an error like this：

Please give me a help！thanks！

The face_colors property is undefined for file test/testfiles/cax-if/dm1-id-214.stp.

Hello Kovacsv,
Thanks for building such an awesome tool.
Is there any way to export as gltf or convert the output to gltf? The JSON format is no longer supported by three js.

Read the original assembly structure of STP file. The current version can display the basic information of STP model, but the model tree structure information of STP file is lost. I don't know whether it can be achieved？

Hello, I read the STP file in your way and use three JS rendering, but the model is not displayed. What is the reason? The code is as follows. Please solve your doubts. Thank you

This is a 76MB size result
it successfully shows all the data

This is a 142MB size result
It cannot read data, all data arrays are empty

I think there may be some special surfaces in the larger file that cause the parsing to fail, such as Surface_Of_Linear_Extrusion
Or the reason for the wasm runtime

Hello,
could you please guide me on how to set up a local development environment?
I've been struggling with this for quite a while.

We use this package in a project and its throwing an error for node 18.

Its fixed by adding this to the package.json

"browser": {
"fs": false,
"os": false
}

I opened a pull request to fix this issue. #13

https://emscripten.org/docs/optimizing/Optimizing-Code.html#lto

HI
I can open this relatively complex STEP model in CAD Assistant, but I get an error message when trying to open it in 3D Viewer. In my own web application, I can import it using occt-import-js, but all the positions in the geometry of the Mesh are 0. Is there any way to solve this problem? I will provide a link to the test model.

STEP model : https://oss-yanfeiyu.oss-cn-hangzhou.aliyuncs.com/test_model/STEP-TEST.zip

Hi kovacsv,

Using occt-import-js. I can read multiple .stp file and loaded into threejs screen.

Can occt-import-js export back to .stp file as a whole assembly?

Thank in advance! LH

LinkError: WebAssembly.instantiate(): Import #390 module="a" function="ng" error: function import requires a callable
When I use occt-import-js to import an igs file, I met this error, could you please give me some help?

 let fs = require ('fs');
const occtimportjs = require ('occt-import-js')();

occtimportjs.then ((occt) => {
    let fileContent = fs.readFileSync (fileUrl);
    let result = occt.ReadIgesFile (fileContent, null);
    console.log (result);
});

Hi, first of all, thanks for creating and sharing this nice project.

I am constantly looking for a way to compare step files like this example found on Google.

https://www.glovius.com/blog/compare-3d-cad-files/

This tool is promising to have such a feature.
So, I would like to ask if occt-import-js does have something that allows or assists to do this kind of operation.

Thanks in advance.

Hello,

I was wondering if there was a way to specify any parameter for the STEP -> triangulated mesh conversion ? I was mainly thinking of parameters affecting the quality of the resulting mesh.

Hi Viktor.

Just looking for some advice or suggestion related to using this library.

I managed to create a STEP viewer but when adding group of meshes then positioning is off and some meshes don't seem to be added as it is in your example when viewing it in Online 3D Viewer.

This is the short version of the code:

occtimportjs().then ( async function( occt ) {
            response = await fetch( URL.createObjectURL( selected_step_file ) );
            URL.revokeObjectURL( selected_step_file );
            buffer = await response.arrayBuffer ();
            fileBuffer = new Uint8Array( buffer );
          	result = await occt.ReadStepFile( fileBuffer );

            if (result.success) {
              let mesh_count = 1;

              result.meshes.forEach( msh => {
                let geometry = new THREE.BufferGeometry();

                indices = Uint16Array.from( msh.index.array );
                geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
                geometry.setDrawRange( 0, indices.length );
                vertices = Float32Array.from( msh.attributes.position.array );
                geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
                normals = Float32Array.from( msh.attributes.normal.array );
                geometry.setAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
                geometry.normalizeNormals();
                geometry.center();

                let new_mesh = new THREE.Mesh( geometry, material );
                new_mesh.name = 'mesh_' + mesh_count;
                edges[ new_mesh.name ] = new THREE.LineSegments( new THREE.EdgesGeometry( new_mesh.geometry, 30 ), new THREE.LineBasicMaterial( { color: 0xA52A2A } ) );
                mesh_count += 1;

                mesh.add( new_mesh );

                geometry.dispose();
                new_mesh.geometry.dispose();
                new_mesh.material.dispose();
              });

              await addFileInScene();
            }
          });

Using the -Os or -Oz compile time flag can reduce the file size, but the performance implications must be checked.

Hello! I just tried the basic example in the README, and it ends with an error:

❯ node step-to-three.cjs                                                                                                                                                   ✹ ✭
(node:57884) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.js:9
....

TypeError: Failed to parse URL from /Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.wasm
    at new Request (node:internal/deps/undici/undici:5491:19)
    at Agent.fetch2 (node:internal/deps/undici/undici:6288:25)
    ... 4 lines matching cause stack trace ...
    at /Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.js:9:116855
    at Object.<anonymous> (/Users/trusktr/src/Hakkei-Co+meteor-app/step-to-three.cjs:2:47)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10) {
  [cause]: TypeError [ERR_INVALID_URL]: Invalid URL
      at new NodeError (node:internal/errors:393:5)
      at URL.onParseError (node:internal/url:564:9)
      at new URL (node:internal/url:644:5)
      at new Request (node:internal/deps/undici/undici:5489:25)
      at Agent.fetch2 (node:internal/deps/undici/undici:6288:25)
      at Object.fetch (node:internal/deps/undici/undici:7125:20)
      at fetch (node:internal/process/pre_execution:214:25)
      at instantiateAsync (/Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.js:9:12578)
      at createWasm (/Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.js:9:13188)
      at /Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.js:9:116855 {
    input: '/Users/trusktr/src/Hakkei-Co+meteor-app/node_modules/occt-import-js/dist/occt-import-js.wasm',
    code: 'ERR_INVALID_URL'
  }
}

Node.js v18.8.0

Do I need to run it a certain way?

Is there any way to access the model's metadata defined in the STEP file?

I.e:

#30 = PROPERTY_DEFINITION('Weight_Property', 'Weight of the part', #10);

Hello!
I'm currently running this library in a Node.js environment. However, when I execute the ReadStepFile function as per the example provided, it works fine, but the memory used while running the function does not get collected by the garbage collector and continues to accumulate. Is there a way to resolve this issue? Below is the code I've written

const occtimportjs = require('occt-import-js')();
import fetch from 'node-fetch';

export const loadGeometry = async (url: string): Promise<any> => {
  let occt;
  let fileBuffer;
  try {
    occt = await occtimportjs;
    const response = await fetch(url);

    const buffer = await response.arrayBuffer();

    fileBuffer = new Uint8Array(buffer);

    const result = occt.ReadStepFile(fileBuffer, null);

    return result;
  } catch (error) {
    console.error(error);
    throw new Error('Loading geometry error');
  } finally {
    occt = null;
    fileBuffer = null;
  }
};

Using this project to parse a large (~80MB) stp file, I waited for more 4 hours but it wouldn't finish, when I pause the script in devtools, it stops at some js glue code generated by emscripten, which is supposed to be exception handling.
The docs said wasm-exceptions should be faster, but I failed to compile it.
The same model took about 2 minutes to be converted to gltf using mayo, which is a native app using the same OpenCascade to handle stp files.
I had tried foxtrot on browser, but it just failed.

Other useful links:

• WebAssembly exception handling proposal
• llvm/llvm-project#62877
• https://webassembly.org/roadmap/

Reproduce

1. Download STEP file from Downloads section in: https://www.servocity.com/stingray-2-servo-gearbox-0-34-sec-60-30rpm-700-oz-in-torque-900-rotation/
2. Go to https://5hk66o.csb.app/
3. Click Choose file and select the STEP file
4. Wait, a long time (#8 ). Tell Chrome multiple times it is OK to wait instead of reload the page, if Chrome asks.
5. See the results below.

Expected	Observed
https://3dviewer.net/	https://5hk66o.csb.app/
	✅
	❌

Context

• Codesandbox code: https://codesandbox.io/s/convert-step-file-to-glb-with-three-js-occt-import-js-v0-3-5hk66o?file=/src/StepLoader.js
  • Was created based on the Three.js viewer code: https://github.com/kovacsv/occt-import-js/blob/main/examples/three_viewer.html#L28-L64

Any help would be greatly appreciated!

As described here: kovacsv/Online3DViewer#383

Hi, I have observed that ReadStepFile function takes a long time to read STEP files (Took more than 3 mins on my machine to load 25mb STEP file).
Is there any way to reduce this loading time?

Hi kovacsv,

Can occt-import-js.wasm file fize reduce in case compile for each file type separate? i.e. step, iges, brep

If that could you please give me some guideline for archive that?

Thank you, LH

Hello Kovacsv!!
I had an issue when I imported occt-import-js to my react app. Do you have any idea to solve this issue?
Thank you in advance!