JSCAD User Group

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    Embedding a design in a website

    General Discussions
    5
    23
    4333
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • platypii
      platypii @z3dev last edited by platypii

      @z3dev said:

      Also, please take a look at the minimal viewer, which is really compact.
      https://github.com/jscad/OpenJSCAD.org/blob/master/packages/utils/regl-renderer/demo.html

      This is exactly what I was looking for! Talk about an under-hyped feature 🙂

      I'm now able to render my design in the browser, live, in less than 300kb total, using the regl-renderer! Even less bytes when gzipped.

      And what's cool is these are my actual CAD files used in production, rendered in the browser super efficiently.

      THANK YOU!

      hrgdavor z3dev 2 Replies Last reply Reply Quote 1
      • hrgdavor
        hrgdavor @OrganicPanda last edited by

        @OrganicPanda that is neat example of jscad integrated into react-fiber. @z3dev it would be cool to mention that one too as example of integration.

        https://codesandbox.io/s/react-three-fiber-threejscad-m2w4c?file=/src/App.js

        OrganicPanda 1 Reply Last reply Reply Quote 0
        • hrgdavor
          hrgdavor @OrganicPanda last edited by

          @OrganicPanda those scripts are a bloody mess. Next iteration is to make them little better and to separate out the code that is bridge between jscad and threejs so it can be independently used to render jscad in any webgl lib (regl, threejs, babylon, etc...)

          And those will be part of jscad, so yes on npm 🙂

          I am looking forward to cooperating with you to make demos that do stuff with less megabytes 🙂 ... so don't give up, stay tuned, and lets make some fun stuff,

          1 Reply Last reply Reply Quote 0
          • z3dev
            z3dev @platypii last edited by z3dev

            @platypii if interested there's an outstanding issue to add a new OBJ serializer, which would be pretty easy. 🙂

            Also, please take a look at the minimal viewer, which is really compact.

            https://github.com/jscad/OpenJSCAD.org/blob/master/packages/utils/regl-renderer/demo.html

            platypii 1 Reply Last reply Reply Quote 1
            • platypii
              platypii @platypii last edited by

              The thing that I don't like about my approach so far:

              Size of my jscad code: 12.4kb
              Size of rendered obj file: 1.8mb
              Size of three.module.js: 1.2mb
              Size of jscad-web.min.js: 1.2mb

              So now I'm thinking about how to render a relatively simple object without increasing the page size by megabytes. That being said, jscad viewer looking more attractive by the above math...

              z3dev 1 Reply Last reply Reply Quote 0
              • OrganicPanda
                OrganicPanda @hrgdavor last edited by

                @hrgdavor Those scripts are amazing - thank you for that! Would you consider publishing them to npm for consumption? I put together a codesandbox showing a model from the jscad docs rendering in threejs via react-three-fiber https://codesandbox.io/s/react-three-fiber-threejscad-m2w4c?file=/src/App.js

                hrgdavor 2 Replies Last reply Reply Quote 0
                • platypii
                  platypii last edited by platypii

                  Thanks for the ideas! I'm leaning more toward using three.js to render the file.

                  Currently the best path I've found after some experimentation:

                  1. Use jscad to export as .x3d
                  2. Convert that to .obj using external program (meshlab)
                  3. Render obj with three.js directly using OBJLoader

                  Color is preserved. Not terrible workflow. Ideal would be a OBJ or GLTF serializer in jscad so I could directly export to a format supported by three.js. I may look into how complicated that would be to write...

                  platypii 1 Reply Last reply Reply Quote 0
                  • z3dev
                    z3dev @platypii last edited by z3dev

                    @platypii You can also try one of the components that other users have built, based on common reactive frameworks.

                    VUE framework : https://github.com/z3dev/vue-components
                    REACT framework : https://github.com/kenianbei/jscad-react

                    1 Reply Last reply Reply Quote 1
                    • hrgdavor
                      hrgdavor last edited by hrgdavor

                      Unfortunately, things that would make this possible easily are still in develompment.

                      option1 (future)

                      3mf serializer is on the way and with it you would be able to export colors I think and then use threjs 3mf import

                      Option 2 (you can do right now)

                      you can use my nasty coded(below linked) jscad prototype to load jscad script(only single file scripts currently) and do 3mf export there(it does have a bug with instances right now, but I could get to fixing it if you rly need this).

                      Option 3 (you can do right now)

                      If you are eager to do it and not have time to wait these things in jscad core, here is a link to my nasty code that runs jscad using threejs instead of regl
                      http://3d.hrg.hr/jscad/three/threejscad2.html?

                      You need to export json (it is just JSON.stringify of the geometries)

                      Make a page with threejs, load json, and then convert those to BufferGeometry

                      code I have to convert from jscad to threejs is in these 2 scripts:

                      http://3d.hrg.hr/jscad/three/CSGToBuffers.js
                      http://3d.hrg.hr/jscad/three/CSG2Object3D.js

                      I have cleaning to do to bring this to jscad, along with some other changes needed in jscad inernally.

                      If you want to use this right now, and you have questions about the scripts I can also be reached on discord.

                      OrganicPanda 1 Reply Last reply Reply Quote 2
                      • z3dev
                        z3dev @platypii last edited by

                        If the visualization doesn't need the input of parameters then a static design can be loaded, i.e. json. You can try this by exporting to JSON, and then drag and drop the JSON file to the WEB UI.

                        The benefit is there's no compilation of code, no conversion of format, just loading of the geometries (objects) from the JSON file.

                        1 Reply Last reply Reply Quote 1
                        • First post
                          Last post
                        Powered by NodeBB | Contributors