Swapping or morphing between 3d models possible?

Questions
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