I am loading FBX models for my project. I Want to create multiple objects of the same FBX model but loading each separately is very inefficient so I would like to save one loaded model and clone it. This concept is working with the .OBJ format.
Everything works as expected but then I use "model.clone();" nothing really happens. The model is no longer visible but I get no errors. If you compare the cloned model with the original they look exactly the same so I don't know why it's not showing up.
This is how it looks when it's working:
When it's not working it's just a blank canvas.
Here is some simplified working source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://vitalkia.com/jsLibraries/zlib.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/FBXLoader.js">
</script>
<script>
var aspectRatio = 240 / 135;
var scene;
var renderer;
var loaderFBX;
var camera = new THREE.PerspectiveCamera(45, aspectRatio, 1, 10000);
//Actual code
//Setus up scene and renderer
sceneSetup();
//Load fbx and render
//IGNORE ERROR ABOUT NOT FINDING THE RIGHT TEXTURE. It still works
loaderFBX.load("https://threejs.org/examples/models/fbx/Samba Dancing.fbx", function(model){
//Sending the object "model" works
//But using model.clone() does not. It doesn't give any errors or anything, it's just not visible
//If you compare the cloned model with the original they look exactly the same.
var sendModel = model;//Works
//var sendModel = model.clone();//Doesn't works
console.log("Original: ");
console.log(model);
console.log("Cloned: ");
console.log(model.clone());
calcDistance(sendModel);
scene.add(sendModel);
renderer.render(scene, camera);
});
function calcDistance(model){
var bbox = new THREE.Box3().setFromObject(model);
var camDistance = bbox.max.z;
if(bbox.max.x > camDistance){
camDistance = bbox.max.x;
}
if(bbox.max.y*aspectRatio > camDistance){
camDistance = bbox.max.y*aspectRatio;
}
camera.position.z = camDistance;
model.position.x -= bbox.getCenter().x;
model.position.y -= bbox.getCenter().y;
}
function sceneSetup(){
loaderFBX = new THREE.FBXLoader();
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(240, 135);
document.body.appendChild(renderer.domElement);
var light1 = new THREE.PointLight(0xffffff, 1, 100000000);
light1.position.set(0, 0, 15);
scene.add(light1);
var newLightPoint = new THREE.HemisphereLight(0x8be2ff, 0xfff9cf, 0.55);
scene.add(newLightPoint);
camera.position.set(0, 0, 100);
scene.add(camera);
}
</script>
Is this how you should do it to reuse models instead of having to reload them for every object? Or is there a better way?
