hrgdavor / jscadui

ATM, my main focus is around making 3d models for 3d priting in JS, by coding models I want to print.

Trying to contribute as much as I can directly to OpenJSCAD or indirectly by prototyping new things like jscadui.

If you are interested in CODE-CAD using JS you can also join the crowd in the jscad discord channel.

highlights

	Cube camera gizmo for 3d views, a parametrizable Web Component. Check out the demo here. It is also a nice example of using shadow DOM.

for kids

• toddlerzilla - fun thing for kids to smack keyboard on your pc demo

jscadui's Issues

3MF export

From elalish/manifold#626

Hi, it seems that the object id has to be at least 1, lib3mf cannot recognize things with id 0.
The _rels/.rels is mandatory, we can remove the thumbnail line if we don't want a thumbnail.

Add camera-view controller

Create a camera-view controller as in other popular 3D CAD libraries. Example on threejs: https://github.com/isRyven/ViewCubeControls

Move it to regl

CSS based cube gizmo

starting with something like this and make it a webcomponent with shadow dom. There will be more iterations, but start with a simple one that has top,left,bottom,right,back,front

It is partially implemented in prototype branch, time to move to main.

interesting nasty issue with shadow dom if innerHTML is used in wrong way, css variables fail to work as expected (at least as expected by me)

if I use

export class Gizmo extends HTMLElement {
  #root
  connectedCallback() {
    this.#root = this.attachShadow({ mode: 'open' })
    this.innerHTML = `<div class="cube">.....

it works ok, but css variables are not working for inner elements

and to fix it innerHTML needs to be called on shadowRoot

export class Gizmo extends HTMLElement {
  #root
  connectedCallback() {
    this.#root = this.attachShadow({ mode: 'open' })
  connectedCallback() {
    this.#root = this.attachShadow({ mode: 'open' })
    this.#root.innerHTML = `<div class="cube">.....

nice tutorial on one of my fav sites: https://css-tricks.com/an-introduction-to-web-components/

this.#root.innerHTML = `<div class="cube">.....

nice tutorial on: https://css-tricks.com/an-introduction-to-web-components/

Add vitest to react-app and themes

file reloading FF #jscad-web-v1

Fix file reloading on firefox.
Using lastModified is not really a valid assumption per the spec. It seems to work on chrome, but I would really like to make that reliable.

It probably means we need to re-read all the files at each check, and compare with the contents in our virtual fs. Not ideal, but it's how the existing jscad works, and seems fine even if its inefficient for large files.

Possibly we do not ned to read file contents but just requires the File again and then read lastModified.

Add render hook to react app

Balloons appear to be regenerating after toggling dropdown menu on jscad.app

issue moved from jscad/OpenJSCAD.org#1290

Expected Behavior

When I toggle the show/hide Balloons or Friend parameter menus (hit the triangle dropdown), the balloons should not move or change positions.

Actual Behavior

Instead, they regenerate and change positions. Only hitting rerun or changing an actual parameter should impact their positions.

Steps to Reproduce the Problem

1. Go to https://jscad.app/ and the balloon example
2. Hit the triangle dropdown triangle next to the Balloons or Friend parameter menus in the bottom left
3. Observer the balloons moving

Specifications

Chrome browser.

link to jscad github instead of jscadui

Jscad.app is not officially part of jscad yet, and development is done in this repo

link to git should point to jscadui, and for now we should also on the splash screen signify this.

Feature - advanced OrbitControl

continuation of #11

nice to have for advanced orbit

• isAnimating give info if camera will be moving more (so animation loop can keep running until camera stops)
• auto rotate animation
• animate jumps to location
• bring certain bounding box into view keeping current angle (option to animate jump if jump anim implemented)
• ease-in a bit drift after rotation,pan pointer movement stops (very low prio, if ever )

Feature - reusable OrbitControls

Looking at regl and threejs orbit control both are lacking, and Babylon who knows even.

The examples of orbital controls usually expect animation loop to run all of the time, which is wasteful for cpu,gpu,battery.

What is needed

• basic math that uses camera location and target to produce whatever is required for GL engines
• rotation
• zoom
• pan
• take snapshot of current camera
• decide suitable format and needed data for camera snapshot (position + target)
• set view to specific location (top, left,... or one previously saved, done with position + location)
• get what needed to point a camera ( position + target)

export gif of rotated 3d model

It is not too difficult, and dependency for that could be loaded on demand.

options:

• number of frames for full rotation
• delay between frames
• resolution
• background color/transparent

Additionally, maybe also support export separate images in a zip file.

2D geometries don't use theme color

3D objects will pickup the default color from theme.color but 2D objects do not. I suggest that both kinds of geometry should use the theme color, for improved contrast, visual consistency, customizability, etc.

The "primitive shapes" example in dark mode:

Allow hierarchy export in 3MF

Regarding elalish/manifold#500 (comment)

Currently, if you use the meshes and components inputs of to3dmodel, you can't create a real scene hierarchy. This is because every component becomes an item, so any component that's referenced by another gets copied as it becomes a new tree root.

I propose adding another input, items, which will refer to the IDs of the components that are actually meant to be roots. simple can remain unchanged, as that is a nice shortcut. I'm happy to make a PR for this, if someone would be so kind as to push a release to npm with it.

glTF import/export

https://gltf-transform.dev

COLLECTED $100 Bounty OpenCsg port proof of concept

The bounty is posted on bountysource, if there will be serious interest I will put money on bounty source.

https://opencsg.org/ library uses opengl do preview boolean operations using shaders instead of actually doing the boolean operations. It is used by OpenScad.

An interesting resource:

• https://medium.com/@daniel.mbfm/csg-subtracting-solids-in-webgl-dadc6126c041 - The goldfeather algorithm. The article also mentions that there are difficulties of integrating this into Threejs due to difficulties with accessing low level webgl

It is ok if it is not perfect, especially sinc the base for this, OpenCsg, is not a perfect solution

• it intended as an exploration of the concept within contstraints of js and webgl/webgl2
• it is ok if it only works for webgl2
• there can be artefacts during rendering for coplanar operations
• it still is needed to do the actual booleans if you want to export results of boolean operationa as OBJ,STL, or some mesh.

WASM is not allowed in this bounty, but could be considered as a separate bounty if there will be real interest.

The idea of this bounty is to jumpstart a pure JS port of OpenScad, it is not required to complete the port, but to produce code that can display substraction of 2 spheres for example.

License MIT.

bountysource link https://app.bountysource.com/issues/114315115-100-bounty-opencsg-port-proof-of-concept

Setup monorepo using turborepo

• Add turborepo to the project
• Include sample package/** app. In this case @jscadui/themes
• Include sample apps/** app. In this case @jscadui/react-app