Currently, I am working on a web 3D model viewer that utilizes Three.JS. My goal is to enable users to select different models from a dropdown list using dat.GUI. To achieve this, I have been experimenting with a switch statement, drawing inspiration from examples on the Three.JS website (specifically materials/reflectivity and envmaps/hdr/nodes).
Up until this point, my loader has been functioning perfectly when loading a single model. However, when I attempted to integrate it with the GUI and switch statement, the model failed to appear (the console log indicated 100% loaded, though I cannot confirm the accuracy of this due to potential issues with my load reporter). Additionally, the console log presented the following error message:
Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>" OBJLoader.js:624:12
Upon researching this error, I found suggestions indicating that the .obj file might be corrupted. Yet, I am certain that the models are intact as I have successfully loaded them individually. Therefore, I am inclined to believe that the issue lies with the variable I am instructing the loader to load. While I understand that OBJLoader has the ability to load from variables (I tested this by defining a variable as the model and having the loader load it), I suspect that the problem lies within the GUI code or switch statement.
Below is an excerpt of my script with non-essential portions omitted.
var gui;
var camera, scene, renderer;
var species, params;
//Dropdown list of 3D models to select from.
var speciesList = {
'Goldenrod': 'models/solidago_rugosa.obj',
'Mountain Laurel': 'models/kalmia_latifolia.obj',
};
//Default model to be loaded
params = {
Species: 'models/solidago_rugosa.obj'
};
init();
animate();
function init() {
//Defining the scene, camera, renderer...
//GUI
gui = new dat.GUI({hideable: false});
gui.add(params, 'Species', speciesList)
//Controls, window resizer...
};
//Switch statement to load a different model.
//speciesCurrent variable is employed by the loader.
//At present, there is no feature to replace previously loaded models, but the loader should manage to load models on top of one another for now.
var speciesCurrent;
switch (speciesList) {
case 'models/solidago_rugosa.obj':
speciesCurrent = 'models/solidago_rugosa.obj';
break;
case 'models/kalmia_latifolia.obj':
speciesCurrent = 'models/kalmia_latifolia.obj';
break;
};
//Loader
var loader = new THREE.OBJLoader();
loader.load(
speciesCurrent,
function(object){
var material = new THREE.MeshLambertMaterial({color: 0x99a300});
object.traverse(function (child){
if (child instanceof THREE.Mesh){
child.material=material;
child.material.flatShading = 0;
}
});
scene.add(object);
},
function(xhr){
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function(error){
console.log('An error happened');
}
);
//Light sources...
//Game loop
function animate(){
requestAnimationFrame( animate );
render();
};
function render(){
renderer.render(scene,camera);
};
Any suggestions on how I can rectify the issue of my loader failing to load the model selected from the dropdown list would be greatly appreciated. Thank you.
Update: Upon inspecting the network tab in my browser's developer tools, I noticed that my index file was listed twice. The one marked as "xhr" directed by a stack trace to line 93 of the index file, which is where the loader initiates ("loader.load"). Interestingly, removing the switch statement eliminates the additional html file. What could be causing the loader to interpret the switch statement as html?