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.

as discussed here: https://github.com/jscad/OpenJSCAD.org/discussions/893

Initial test integration is available (now: 2021-08-01) https://cadhub.xyz/dev-ide/jscad

check it out, feedback is appreciated.

I am using github gists, and then make a link to openjscad taht opens that gist

example:
https://jscad.xyz/#https://gist.githubusercontent.com/hrgdavor/7419194097fc2ffd42d840f82fc83ca1/raw/31e0194693629e780e3b82848f9082d1796814ec/rounded_top.js

and gist is :
https://gist.github.com/hrgdavor/7419194097fc2ffd42d840f82fc83ca1/

visit https://cadhub.xyz/projects to see our first example there ... I chose the prettiest one :), although the slowest one I have

nice prototype

is it opensource ?

Hi,
kudos for the atx connector generator, pretty nice one

I am using windows 10 and chrome. Auto-reload on jscad.xyz works just fine for me.

Bu it only works for me if I drag and drop the jscad file on the button, but not if I click the button and chose the file.

I have used livereload for many years now and I use the one from npm:
https://www.npmjs.com/package/livereload
It may not have been developed for years but it just works.

livereload is actually not required, but it helps to reload changes faster (notice changes faster)
without livereload jscad has to scan project files/files periodically which can become slow

...
I have also converted from OpenSCAD when I discovered openjscad.

@rich-27 thanks for the feedback ... it is nice see more people join the community. Have fun and create more cool stuff

@rich-27 Browser glitches are pain to investigate and fix.

I am not a dev here, but I am curious.

Could you just for sake of more info test your "dice charging station" in chrome incognito(without plugins or ad blockers)

make sure "Enable Auto-reload" is checked and then use drag and drop to load the project file.

Hello ppl, here is my second update regarding the three.js integration.

The effort now has a code-name: threejscad

I very much dislike functional style programming so I hope my explorations with threejs will give ideas for improvement in jscad as it is not very likely I would be able to bring those improvements to jscad codebase.

I appreciate all the effort that went into making jscad v1 and v2, it really is refreshing and smooth experience after using OpenSCAD. Generating a bit more complex model to STL would take ages in OpenSCAD so it quickly became annoying to work with.

I have tested most of the jscad examples that do not load additional resources, and have found an example where threejscad is faster.

• jscad: colorCube.js
• threejscad colorCube.js

click both urls and play with "Colorize Method" parameter to compare how long it takes to show the result in each instance.
Performance is gained by reusing the geometry so webgl ony needs to upload it in GPU once and then render it in different locations with different color.

Another example that intrigued me was parametric_butt_hinge.

• jscad: parametric_butt_hinge
• threejscad parametric_butt_hinge

You may notice that I have implemented my own generator for forms based on parameter definitions, and improved the slider a bit

• it show the value
• it has an additional option live=1 to render the scene while dragging the slider (I just love to do it when render is fast)

In this example jscad takes quite a long time to render (which is just fine and not too long when all you ned is to generate STL from it).
But this is a great example where rendering is too slow for animating and caching the shapes makes it smooooooth.

This optimization works by making a small change in original theparametric_butt_hinge code:

create cahce variable outside main method

let cache = {}

Generate cache key by serializing params object. To have the same key regardless of the view options, those options are set to fixed value before serialization. Generate new model only if cache key changes.

  const key = JSON.stringify({...params,m_flip_model:0,m_throw_angle:0})
  if(cache.key != key){
    cache.key = key
    cache.female = leaf(params, C_FEMALE)
    cache.male = leaf(params, C_MALE)
  }

This optimization currenty works in threejscad but not in jscad. The reason is that jscad runs the whole model file from scratch, but threejscad re-runs the main method, allowing this type of caching to work.

After making the jscad models work in three.js and loading this one, I just enjoyed dragging the "Throw angle" slider and seeing the hinge move instantly.

@OrganicPanda thanks ... I will post it on the forum,

I am preparing a branch on jscad to experiment, and will open a discussion page for it. That branch will contain whatever code, so it will not be added to jscad directly, but serve as starting point for proper implementation after I am satisfied with the prototype.

One cool thing that was easy to make in threejs was 3d view: anaglyph(red,blue) and stereo side-by.side .. so it will also be part of the exepriments.

http://3d.hrg.hr/jscad/three/threejscad2.html?stereo=Anaglyph&uri=model.logos.js
http://3d.hrg.hr/jscad/three/threejscad2.html?stereo=SideBySide&uri=model.logos.js
http://3d.hrg.hr/jscad/three/threejscad2.html?stereo=ParallaxBarrier&uri=model.logos.js

This idea was pushed by one of users that likes to do VR stuff. I also trid to enable VR, but that experiment was not as easy, somethig got messed-up

@gilboonet not sure if this is what u need

α angle of the triangle is Math.PI/sidesCount in radians or 360/sidesCount/2 in degrees
red line is A = Math.sin(α)
blue line is A=Math.cos(α)
the radius you are looking for the circle isR=1 in this drawing

R=sideLength/2/Math.sin(α)
or
sideLength=(R*Math.sin(α)) * 2

const jscad = require('@jscad/modeling')
// https://openjscad.xyz/docs/module-modeling_primitives.html
const { circle } = jscad.primitives

function main({// @jscad-params
	sideLength = 15,
	sidesCount = 6,
}){
	let alpha = Math.PI / sidesCount
	let R = sideLength/2/Math.sin(alpha)
	// R === sideLength in case of sideCount=6 (hexagon)
	console.log('R',R)
	return circle({radius:R, segments: sidesCount})
}

module.exports = {main}

Very glad to see interesting uses of jscad. Nice idea if I have seen correctly, that u are using hairpins for music.

Also if you at some point want to share the project, there is rather new project for sharing code-cad projects: https://cadhub.xyz

@platypii @danmarshall I think both of will be able use your preferred engine, and get specific benefits depending on a task at hand. Actually I am planning to split the necessary code so that it becomes rather easy to use any of the 3 engines I found to be interesting (regl, threejs, babylon)

regl

• it is the current engine and is compact
• CON: lack proper WEBGL2 support and there are NO plans for supporting it in the future
• example for extremely compact page that has jscad script and render and all under 99kb is great example why regl is still very useful by @platypii https://paradr.one/

threejs and babylon

• larger but can be cut down for basic rendering (I managed to get 400k version of threejs that works with jscad)
• support wegl2 instancing can bring performance regl just will not ever be able with webgl1
• are working actively on great next thing: WebGPU
• WebGPU might be the future for jscad if we can come up with ways to utilize compute shaders for performance
• having also these big engines as an option is good for when we want build fancy stuff and ake advantage of huge knowhow of their communities

you have likely already seen my instancing demo: http://3d.hrg.hr/jscad/three/threejscad2.html?uri=model.logos.js in threejs

you can track progress of my new prototype that is supposed to provide the mentioned integrations of all 3 engines I found interesting.
https://github.com/jscad/OpenJSCAD.org/discussions/944 ... I will post a topic as soon I have any rendering integrated .. it is still in testing of some ui concepts phase

https://cadhub.xyz/u/hrgdavor/booleans-preview-utility/ide

ON

OFF

@gilboonet here is sth unrelated to this topic, but sending anyway

I know you like folding stuff, so here is a cool project

https://hackaday.com/2021/10/14/hacking-an-ikea-lampshade-into-a-stunning-dichroic-lamp/

For those that have V1 designs this could be useful

https://3d.hrg.hr/jscad/V1/

example url
https://3d.hrg.hr/jscad/V1/#https://gitlab.com/johnwebbcole/jscad-utils/raw/master/dist/examples/chamfer.jscad

this will soon be fixed https://github.com/jscad/OpenJSCAD.org/issues/935

@z3dev this to do with OES_element_index_uint I have added as a step to move fwd to simplify webgl for large geometries where indices easily go over 65536.

this check is not required right now as new code for converting to webgl buffers is not yet done.

@gilboonet could you upgrade the browser u are using, or install a different one on that tablet ?

@cncandi there is url format supported by openjscad:

https://openjscad.xyz/?uri=http://3d.hrg.hr/jscad/three/model.braile.js

@hamade the error is exactly right

you have given an url that is not a script, it fails on syntax parsing.

and if you take a look into network tab you will see why

you need to fix your proxy script and web server config so it returns js file that you expect instead of perl source of your proxy script.