jscad integration checklist (may be useful for others)

[hrgdavor]

Checklist

• Make x-axis up
• Zoom to fit object when view inits
• Add grid
• Communication with @z3dev, Make he's happy with the integration etc
• Switch over React based customizer, so that we have a consistent customizer experience between JSCAD and OpenSCAD
• Investigate having the JSCAD worker (app/web/public/demo-worker.js) integrated as part of the build (so that we don't have one file where we need to be concerned about browser compatibility with modern js syntax)

Nice to have

• export formats supported
• Add groups and select UI to the CadHub customizer and other improvements

---

There are few more things needed for jscad itnegration to work nicely
Some of this may be implemented as a new default or customizable by each integration

[x] which axis is UP

Threejs has it's own default, but jscad uses Z=UP so scripts from jscad will be oriented that way.

camera.up.set( 0, 0, 1 );

zoom to fit

This will be useful for initial render so we make sure model is properly visible.
This can also be useful as checkbox, so on each model change, the camera view zooms on the object.
My guess is this is needed for model preview anyway.

sample code from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936

  function fitCameraToSelection( camera, controls, selection, fitOffset = 1.2 ) {
  
  const box = new THREE.Box3();
  
  for( const object of selection ) box.expandByObject( object );
  
  const size = box.getSize( new THREE.Vector3() );
  const center = box.getCenter( new THREE.Vector3() );
  
  const maxSize = Math.max( size.x, size.y, size.z );
  const fitHeightDistance = maxSize / ( 2 * Math.atan( Math.PI * camera.fov / 360 ) );
  const fitWidthDistance = fitHeightDistance / camera.aspect;
  const distance = fitOffset * Math.max( fitHeightDistance, fitWidthDistance );
  
  const direction = controls.target.clone()
	  .sub( camera.position )
	  .normalize()
	  .multiplyScalar( distance );
  
  controls.maxDistance = distance * 10;
  controls.target.copy( center );
  
  camera.near = distance / 100;
  camera.far = distance * 100;
  camera.updateProjectionMatrix();
  
  camera.position.copy( controls.target ).sub(direction);
  
  controls.update();
}	  

[x] grid (size, division, subdivision)

no customization for now, if it ever becomes requested by actual users could be reconsidered in which way to customize.

• OpenSCAD does not have a grid.

Jscad grid is currently something like this in threejs code

grid = new THREE.GridHelper( 200, 20, 0x000000, 0x000000 );
grid.rotation.x = - Math.PI / 2;
grid.material.opacity = 0.2;
grid.material.transparent = true;

export formats supported

Integrations should be able to provide more nta one export format

some eport formats supoprted in jscad:

• STL -ASCII
• STL binary
• AMF
• DXF - ASCII
• D3D
• 3MF - will have in near future

JSCAD worker as part of build

I've added a web worker before with a special loader for webpack 4, but it seems that webpack 5 allows it without a special loader.
https://webpack.js.org/guides/web-workers/
Redwood just released v0.36.0 which upgraded to webpack5 and i need to upgrad that anyway so ill investigate as part of that.

Communication with z3dev

See: jscad/OpenJSCAD.org#893 (comment)

[Irev-Dev]

Why do you think the default camera position should be different for each integration?

[hrgdavor]

Yeah, not really important, esp. if zoom-to-fit is done initially

[Irev-Dev]

I edited your original list @hrgdavor to add a easy to reference short list.

Two other things that I didn't list because they are more of discussion points at this point are

I'm concerned about how robust user JSCAD scripts will be for two reason

• Direct execution in the browser could mean that scripts might not work for all users, i.e. if you write a script on a new browser that won't work on some older browsers, than some users will find the scripts don't work. Fixing this implies putting the scripts through a build process which is a a big topic, so I just wanted to flag it. Codesandbox has already solved this so we might be able the get some inspiration from them, and our use-case should be significantly simpler than theirs.
• dependancy versions and unpkg.com, having const { booleans, colors, primitives } = require('@jscad/modeling'), or any other dependencies at the top of the file I assume grab the most recent version of the package. This also could result in scripts braking with breaking changes in new versions of the dependencies. I'm reading in their docs that you can specify the version of the script too so maybe we just make that a best practice to encourage people to use the longer exact syntax? require('@jscad/[email protected]')??
  CC @franknoirot I imagine the above would be of interest to you.

I've also been thinking a bit about the default models when a new project is created. I think that they should be a useful example of something mechanical. For example I've got the Donut for OpenSCAD, its cute but I don't think very practical. I'm thinking I might replace it with the hinge from our tutorial https://learn.cadhub.xyz/docs/definitive-beginners/your-openscad-journey.

On that theme I'd like to change the default JSCAD code, its a pet peeve of mine with many of these packages showing basic CSG concepts as the examples (i.e. the OpenSCAD logo) I don' think it's useful for people new to the paradigm as its hard to see how that shape would be useful, its too abstract.

So my question to you is would you be happy to change the example to something more mechanical/practical? if so I have another pitch for you, If you wanted to re-create the same hinge as above, you could also re-create the same tutorial with JSCAD and that way we can offer the same tutorial where users can pick which package they would prefer to use to learn. I think this will help with your goal of getting more users to JSCAD, especially since some might choose to do both and can decide with they would prefer.

[hrgdavor]

I agree with your concerns, and we can further see how to adress them. Opening a separate tickets for import and old browsers support would make it easier to discuss them separately.

Regarding the default script. That one was more like a quick debug. I will work on a better def script that is both useful and gives useful starting code. Common imports included,.... and we can then refine it as we wait for z3dev.

[hrgdavor]

created separate conversation for

• browser support and new code jscad and new code in scripts versus old browsers #465
• jscad integration and package versions jscad integration and package versions #466

[Irev-Dev]

Checking off zoom to fit, @lejara fixed it in #561.