threejs integration



  • I have been playing with threejs and was able to combine jscad and threejs for my designs.
    There are some great resources for threejs like this one : https://threejsfundamentals.org/

    jscad is great for the modeling part, but after I create the model, I get new ideas I can do with the model in threejs.

    my current work in progress is screw generator
    http://3d.hrg.hr/jscad/three/modeler.html#model.screw.js
    f37f172e-6065-48c4-b353-4d35f52f484c-image.png

    for now this one is completely in threejs.

    jscad output will be a polyhedron because it has the same structure as BufferGeometry when creating it

    • list of points
    • list of triangles with index of point instead of vertex with coordinates

    ..
    while I was working with my other jscad models I have found a way to reuse cached geometry from jscad model. if there is an jscad geometry that is translated or rotated the polygons array is referenced by all of the iterations. I used javascript Symbol to attach threejs BufferGeometry to the polygons array so I can reuse it when such object is in the scene 25 times

    2bfe34e8-3cd9-43f0-99af-fc8066315285-image.png

    I have created a simple function that converts from jscad to threejs (I ignore normals and uv as those are not necessary if no texture is used)

    function CSG2Geom(csg){
    	if(csg.polygons[geometryCachekey]) return csg.polygons[geometryCachekey]
    
        const vertices = []
        const indices  = []
        let idx = 0
    
        const pointAdd = (v) =>{
            if (v.index === undefined){
                v.index = idx++
                vertices.push(v[0], v[1], v[2] || 0)
            }
        }
    
        for (let poly of csg.polygons){
        	let arr = poly.vertices
            arr.forEach(pointAdd)
            let first = arr[0].index
        	for(let i=2; i<arr.length; i++){
    	        indices.push(first, arr[i-1].index, arr[i].index)
        	}
        }
        const geo = new THREE.BufferGeometry();
        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices),3))
        geo.setIndex(indices)
        
        csg.polygons[geometryCachekey] = geo
    
        return geo;
    }
    

    The goal of this exploration is not just generating parametric designs, but also to make them more responsive and user friendly (when I have time to do so, I can make custom interface for parameters)

    I have only seen one issue on the jscad project mention threejs and there was a user stating he would skip jscad if threejs was a used.
    I can agree with that sentiment if threejs was required, because I myself hate bloat in my project.

    I intend to continue expanding my personal jscad modeling setup with threejs, and my question here is if you are interested in feedback, and willing sometimes discuss changes in jscad if they would help with such integration.



  • I also intend to try use view helper from https://threejs.org/editor/
    24e53c2c-fffc-4fd5-a1f5-38d607962480-image.png
    🙂
    it looks nice and also the circles are clickable to access the top, bottom, front ... camera angles



  • @danmarshall I am glad somoene is interested 🙂 ... the code is cramped inside modeler.html in the supplied sample link.
    I intend to break it up into useful pieces, but if you are eager to try it:
    line 100 to 153 in modeler.html contain then three.js scene setup



  • This is really cool! I have seen quite a few people asking about Three.js myself included. It seems like a good renderer to me, I'm not sure why some people may not like it. I already like the features you've shown such as wireframe. I would also like to try different lighting effects and there seems to be a large community to provide features like that.

    The regl-renderer here in jscad is pretty snappy too, but I wouldn't know how to extend it. There is also a good regl community, I should look into that.

    Thanks for sharing the conversion snippet. Can you also share the code to create your 3D grid and viewer?


Log in to reply