Switching 3dm files in rhino3dm.js

@fraguada I saw that you created the samples for the Rhino 3dm js viewer and I just put on a website and try to achieve a view things. Unfortunately my JS skills are not that great and I was wondering if you could point me in the right direction on a few things.

I want to use a dropdown to switch between different .3dm files I load. The first part, slightly adapted from one of the examples, is:

const model = ['https://modismo-3dfiles.s3.eu-central-1.amazonaws.com/3dmmesh_2/731TO-24502WS_mesh.3dm','https://modismo-3dfiles.s3.eu-central-1.amazonaws.com/3dmmesh_2/730TO-24450WS_mesh.3dm','https://modismo-3dfiles.s3.eu-central-1.amazonaws.com/3dmmesh_2/732TO-24556WS_mesh.3dm']
let scene, camera, renderer, material, light

init()
initGui()
load()

function load() {

    material = new THREE.MeshPhysicalMaterial()

    loadPBRMaterial(material, 'chipped-paint-metal')
    material.metalness = 0.75
    material.roughness = 0.15
    material.normalScale.x = 1.0
    material.normalScale.y = 1.0
    material.envMap = scene.background

    const loader = new Rhino3dmLoader()
    loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/rhino3dm@0.15.0-beta/' )

    // load 3dm file into three.js scene
    loader.load( model[0], function ( object ) {

        object.traverse( function (child) {
            // rotate each child object to match three.js default coordinate system (y = up)
            // normally we'd update the camera but this messes with the cubemaps
            child.rotateX( - Math.PI / 4 )

            // apply initial pbr material
            child.material = material
        })
        scene.add( object )
        console.log( object )

        // hide spinner
        //document.getElementById('loader').style.display = 'none'

    } )

}

How do I later on dispose of the old model and load a new one here?:

    let fileFolder = gui.addFolder('Geometry File')
    fileFolder.add(ui_callbacks, 'File',['Geometry1', 'Geometry2', 'Geometry3']).onChange(function(value){

        // load new file from array and get rid/hide of the old one

    })

I can add a 3dm model if I basically call the whole loader part from above again, but surely there must be an easier way.

Thanks for any hints.

I’m catching up so apologies I hadn’t looked at this.
I think you are on the right track. In the onChange I would:

  1. Get the scene and get a reference to the object representing the 3dm file delete it with scene.remove( object );
  2. run the loader.load function with the new file.

The main thing is that you need a reference to the three.js scene, the loader, and the path to the model from within that onChange method.

I will see about making an example that handles this use case.

Here is an example I cooked up extending a bit the basic viewer. src | live

rhino3dm_multifile

1 Like