After starting Three.js just last week, I find myself getting confused. Everything seems to flow correctly, but the error message "Three.js:5630 THREE.Object3D.add: object not an instance of THREE.Object3D. models/wolf.obj" keeps popping up. My plan is to have a wolf button generated every time a wolf object is pushed onto the screen. Can anyone offer a solution to my issue? Thank you in advance!! My code is provided below:
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize',function(){
var width = (window.innerWidth);
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
})
controls = new THREE.OrbitControls(camera,renderer.domElement);
var index = 0;
var files = ['models/deer.obj','models/wolf.obj'];
var objLoader = new THREE.OBJLoader();
function loadNextFile() {
var name='';
if (index > files.length - 1) return;
objLoader.load(files[index], function(object) {
// scene.add(object);
console.log(index);
var menuItems = document.createElement('button');
console.log(files[index]);
name = name + files[index];
menuItems.name = name;
menuItems.innerHTML = name;
menuItems.addEventListener('click', onClick);
rightMenu.appendChild(menuItems);
index++;
loadNextFile();
});
}
loadNextFile();
</script>
function onClick(event){
var name = event.target.name.trim();
alert(event.target.name.trim());
// console.log(event.target.name);
files.forEach(function(obj){
console.log("name= "+event.target.name);
console.log("obj= "+obj);
if (obj = name) scene.add(obj);
else scene.remove(obj);
});
}