OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I clone a GLTF model loaded in the Autodesk Viewer?

  • Thread starter Thread starter Predrag Jokovic
  • Start date Start date
P

Predrag Jokovic

Guest
I am trying to dynamically clone a loaded GLB model and allow the user to position it in the scene. However, when I use the model.clone() method, the model appears in the scene at the same position as the original. Any change in position affects the original model as well. Additionally, both the original and the cloned models have the same ID. Did I misunderstand the purpose of the clone() method, and should I use a different approach for this purpose? I found the SceneBuilder extension, but I don't know how to extract the geometry of the GLB model for it.

Code:

Code:
class FireExtinguisher extends Autodesk.Viewing.Extension {

    constructor(viewer, options){
        super(viewer, options)
        this.model = null
    }

    load(){

        const modelUrl = './GLTF/fireExtinguisher.glb'
        const loadOptions = {
            keepCurrentModels: true,
            applyRefPoint: true,
        }
        this.viewer.loadModel(modelUrl, loadOptions, this.onSuccessCallback.bind(this), this.onErrorCallback)
        return true
    }

    unload(){
        return false
    }
onSuccessCallback(model){
        
        this.model = model

        const cloned1 = model.clone()
        cloned1.id = 14

        const clonedPosition1 = { x: 10, y: 0, z: 0 };
        const clonedMatrix1 = new THREE.Matrix4();
        const clonedTranslation1 = new THREE.Matrix4().makeTranslation(clonedPosition1.x, clonedPosition1.y, clonedPosition1.z);
        clonedMatrix1.multiply(clonedTranslation1);
        cloned1.setPlacementTransform(clonedMatrix1);

        this.viewer.impl.addModel(cloned1);
        this.viewer.impl.invalidate(true);


        const cloned2 = model.clone()

        const clonedPosition2 = { x: -10, y: 3, z: 0 };
        const clonedMatrix2 = new THREE.Matrix4()
        const clonedTranslation2 = new THREE.Matrix4().makeTranslation(clonedPosition2.x,clonedPosition2.y,clonedPosition2.z)

        clonedMatrix2.multiply(clonedTranslation2)
        cloned2.setPlacementTransform(clonedMatrix2)

        this.viewer.impl.addModel(cloned2);
        this.viewer.impl.invalidate(true);

        const newModel = this.clone(model)
        console.log(newModel);

    }

    clone(obj){
        var clone = {};
        for(var i in obj) {
            if(typeof(obj[i])=="object" && obj[i] != null)
                clone[i] = this.clone(obj[i]);
            else
                clone[i] = obj[i];
        }
        return clone;
    }
}

I tried to break the reference between the translation matrices of the models, but without success. I also attempted to break the reference between the original and cloned model, but other errors occurred.

Thank you for your time.

<p>I am trying to dynamically clone a loaded GLB model and allow the user to position it in the scene. However, when I use the model.clone() method, the model appears in the scene at the same position as the original. Any change in position affects the original model as well. Additionally, both the original and the cloned models have the same ID. Did I misunderstand the purpose of the clone() method, and should I use a different approach for this purpose? I found the SceneBuilder extension, but I don't know how to extract the geometry of the GLB model for it.</p>
<p>Code:</p>
<pre><code>class FireExtinguisher extends Autodesk.Viewing.Extension {

constructor(viewer, options){
super(viewer, options)
this.model = null
}

load(){

const modelUrl = './GLTF/fireExtinguisher.glb'
const loadOptions = {
keepCurrentModels: true,
applyRefPoint: true,
}
this.viewer.loadModel(modelUrl, loadOptions, this.onSuccessCallback.bind(this), this.onErrorCallback)
return true
}

unload(){
return false
}
onSuccessCallback(model){

this.model = model

const cloned1 = model.clone()
cloned1.id = 14

const clonedPosition1 = { x: 10, y: 0, z: 0 };
const clonedMatrix1 = new THREE.Matrix4();
const clonedTranslation1 = new THREE.Matrix4().makeTranslation(clonedPosition1.x, clonedPosition1.y, clonedPosition1.z);
clonedMatrix1.multiply(clonedTranslation1);
cloned1.setPlacementTransform(clonedMatrix1);

this.viewer.impl.addModel(cloned1);
this.viewer.impl.invalidate(true);


const cloned2 = model.clone()

const clonedPosition2 = { x: -10, y: 3, z: 0 };
const clonedMatrix2 = new THREE.Matrix4()
const clonedTranslation2 = new THREE.Matrix4().makeTranslation(clonedPosition2.x,clonedPosition2.y,clonedPosition2.z)

clonedMatrix2.multiply(clonedTranslation2)
cloned2.setPlacementTransform(clonedMatrix2)

this.viewer.impl.addModel(cloned2);
this.viewer.impl.invalidate(true);

const newModel = this.clone(model)
console.log(newModel);

}

clone(obj){
var clone = {};
for(var i in obj) {
if(typeof(obj)=="object" && obj != null)
clone = this.clone(obj);
else
clone = obj;
}
return clone;
}
}

</code></pre>
<p>I tried to break the reference between the translation matrices of the models, but without success. I also attempted to break the reference between the original and cloned model, but other errors occurred.</p>
<p>Thank you for your time.</p>
 

Latest posts

Online statistics

Members online
1
Guests online
2
Total visitors
3
Top