Using Jscad in a web project

walt

I'm trying to use Jscad to display my 3D models. I have code which I got from openjscad.xyz to create the viewer like so:

const el1 = document.getElementById('jscad')
const jscadInst1 = jscadWeb(el1, {name: 'jscad1'})

But now, how do I interact with the viewer? I need to be able to:

load a file (STL or Jscad),
set the foreground and background colors,
remove any loaded files from the viewer

Any help would be much appreciated!
Walt

hrgdavor

check this post https://openjscad.nodebb.com/topic/248/react-library-v2

or this https://github.com/jscad/OpenJSCAD.org/discussions/895

walt

Thanks for the replies.

All I really need to do is have the Jscad viewer display my file (which may be an STL or a JSCAD file) when the page loads. Is there any way for my javascript code to make the view display my file?

z3dev

@walt Welcome!

There are several discussions available, so please look around.

If you’re familiar with REACT or VUE frameworks then you can try the components created by some of our more experienced users. These may be a good solution to get something started quickly.

Let us know if you have any questions!

hrgdavor

There is a simpler demo in jscad source that uses regl renderer
https://github.com/jscad/OpenJSCAD.org/blob/master/packages/utils/regl-renderer/demo.html
there is also a version of it that runs in a web-worker that is not yet ready for public eyes (still a bit messy)

and bit of advertisement after that:
I am working on a version that renders via threejs that has multiple levels of render performance improvements
http://3d.hrg.hr/jscad/three/threejscad.html?uri=model.logos.js (handles ok 10x10x10 logos)

latest improvement being instancing (handles 32x32x32 logos no problem ... while regl chokes above 4x4x4)
http://3d.hrg.hr/jscad/three/threejscad2.html?uri=model.logos.js

still, that threejs based code is a bloody mess currently but if you want to discuss jscad related stuff in a chat
https://discord.gg/BVnJ27vgcD