Swapping or morphing between 3d models possible?

Questions
1

Hi,

Great forum to find.

I’ve got as far as converting an obj file to a json file through a Blender exporter and getting one to show up and rotate on a webpage

There are two things I’d love to do and am still a novice so come seeking advice…

  1. Is there a way to swap the model without re-loading the page, so like a button press that loads the next model in a sequence? Or otherwise create a kind of carousel where the middle one is large and the ones queued up appear small on either side and switch on button press

  2. (the pinacle) Is there a way to morph between two models (and if so how ;)) and do they need the same amount of vertices)?

Would be awesome to get some help to move forward as been banging my head against it with no joy.

Thank you!

2

For the case of switching between models, I would store an array of paths to the models and when a user clicks a ‘next’ button, load the next index in the array of models and display that.

Following code is generalised and will need more work to be functional

var loader = new THREE.Loader(); // Whichever ThreeJS loader you are using
var modelPaths = ['./model1.json', './model2.json']; // Array to store all model paths
var currentPathIndex = 0; // index in the path array of the currently showing model
var currentModel; // stores the model that is currently displaying
loadModel(currentPathIndex);

function loadModel(index){
	if(currentModel){
		scene.remove(currentModel); //remove the current model
	}

	loader.load(modelPaths[index], (result) => {
		currentModel = result;
		scene.add(result);
	} );
}

function next(){
  currentPathIndex ++;
  loadModel(currentPathIndex);
}

Another case is preloading and storing all the models, and then switching between them. This would cause a longer load time at the start of your application. However if you were planing on blending between models, you might need to have preloaded the data first.

var loader = new THREE.Loader(); // Whichever ThreeJS loader you are using
var modelArray = []; // Array to store all models
var currentModelIndex = 0; // index in the model array of the currently showing model
loader.load('model1', (result) => { modelArray[0] = result; displayModel(currentModelIndex)}); // load the first model and display it
loader.load('model2', (result) => { modelArray[1] = result}); // load all other models ready to show

function displayModel(index){ 
  modelArray.forEach( model => { scene.remove(model); } ); // remove all models from the scene
  scene.add(modelArray[index]); // add the chosen model to the scene

  // alternately you could change this code to decide which model is centered in your carousel idea.
}

function next(){
  currentModelIndex ++;
  displayModel(currentModelIndex);
}

For more detail on how to blend between models, you can view this thread:

3 Likes
3

If you are referring to the JSON Blender exporter, then keep in mind that it is actually deprecated. Try to use the glTF format and a respective exporter. You can read more about this topic in the following guide:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

4

Thanks guys for such quick answers, may I borrow your brains!

calrk, really decent of you to outline an approach, I’ll go through your code and try and decipher it and see if I can patch together a working example. Re the morphing, funnily enough on the thread you linked the video was also an example I was going to cite but the video seems corrupted in youtube so I didn’t link to it. The piece you have done is totally amazing, think it is beyond my skills right now though is exactly what I’d love to achieve, but will have a look at the source and try and decipher what I can

Mugen87
Thanks for your thoughts, I’ve come across glTF format but not used it, will look into it, also found you in this discussion :wink: which is a good overview of the deprecation issue if anyone else is interested.

Certainly a good step forward, thanks!

2 Likes