Using JScad just to display 3D-Object

hpb-htw

Hi there,

I would like to use JSCAD to display 3D Objects in a webpage automatically as soon as the page loaded, without any modification around the objects.

I have read/tried the file packages/web/demo.{html,js}. They are designed as an online IDE, but not as a display-tool.

I have some experience with JavaScript, so for the first help I just need to know where I find example/document so far.

Thanks for response/answer

Hong-Phuc Bui

z3dev

@hpb-htw Welcome!

The web package is a very complex web-application.

You can find a very simple viewer in the packages/utils/regl-render directory. See the html files for an example.

Let us know if you need more.

hpb-htw

@z3dev
yes! It works fine for a proof of concept and Nodejs's require(). Now I try to use the modules in manner of ES-6 import by using

// in main.js
import myModelFunction from "myModel.js";
// do setup as in demo.html
// ...

and in myModel.js I would like to use ES-6 import to import @jscad/modeling and @jscad/regl-renderer.
How do you think about it? Is my approach ok or I should only use the Nodejs require()-Function?

z3dev

@hpb-htw you can use V2 (commonjs/require) or you can use V3 (es6/import). Both are passing all tests.

Do you want to try V3? It's still Alpha but works well.

@hrgdavor What do you think?

hrgdavor

I am a bit confused, as initial description says model, but in the conversation here I am seing that you may want to actually execute a jscad script (to generate a model).

If you have STL files or some other format supported by jscad/io regl renderer is really a good choice as it is very light, and is just fine for displaying the model.

regl is still great if you want to execute a jscad script, but thigs get bit complicated there. Demo if I remember correctly executes model code directly on main thread, adn is you make sth complex that will need x number of seconds to generate, it would freeze the UI and confuse users.

If you will have more complex scripts, you will want to use a worker, and then thing get complicated. Especially if you want scripts that are split in multiple imports.

give us some more info on your use case, so we can suggest a good direction.

hpb-htw

@hrgdavor My Model is very simple: One is an extruding, one is a model of H2O with 3 Atoms. I construct them in JavaScript. Principal I am happy with replacement the function demo in the file demo.html with my model. So my task is done. But I'm a software developer, so I'd like to use ES-6 standard import than require.

hpb-htw

@z3dev Yes, I'd like to try the version 3. For me it is very comfortable to use the standard.

hrgdavor

@hpb-htw I am happy more people are using jscad, but I have to schose my battles carefuly (so many things I would like todo in jscad, and so little time).

I am not able to lead the effort, but I will be here to help troubleshooting while you explore options how to use import with jscad.

There is one project that is doing it this way, and it uses sourcemaps. This could help you get stared: https://github.com/receter/jscad-playground/blob/main/index.html

Looking forward to see what you find and what you make, as there are likely others interested in this approach.

z3dev

@hpb-htw Nice! You might be the first person using V3.

So, V3 is currently in Alpha release. Or course, V3 is in the same GIT repository but on the V3 branch. So, you can get all the packages by checking out the branch.

git checkout V3

Again, take a look at the demos in regl-rendering