Greetings everyone, I recently attempted to load a 3D OBJ file using a Loader in my project. The console indicates that the 3D model and texture have been successfully loaded, but unfortunately, nothing appears on the screen. I extracted the 3D model and texture from the three.js files, but it seems like something is not working as expected. If anyone could provide some insight into what might be causing this issue, I would greatly appreciate it. Here is the link to download the zip file if it helps:
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init(){
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 100;
//Scene
scene = new THREE.Scene();
//Light
var ambient = new THREE.AmbientLight(0x101030);
scene.add(ambient);
var directionalLight = new THREE.DirectionalLight(0xffeedd);
directionalLight.position.set(0,0,1);
scene.add(directionalLight);
//Texture
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total){
console.log(item, loaded, total);
};
var texture = new THREE.Texture();
var onProgress = function(xhr){
if(xhr.lengthComputable){
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function(xhr){};
var loader = new THREE.ImageLoader(manager);
loader.load('textures/brick_diffuse.jpg', function(image){
texture.image = image;
texture.needUpdate = true;
});
//Model
var loader = new THREE.OBJLoader(manager);
loader.load('models/tree.obj', function(object){
object.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.map = texture;
}
});
object.position.y = -80;
object.scale.set(5,5,5);
scene.add(object);
}, onProgress, onError);
//Model
var anotherLoader = new THREE.OBJLoader(manager);
anotherLoader.load('models/tree.obj', function(object){
object.traverse(function(child){
if(child instanceof THREE.Mesh){
child.material.map = texture;
}
});
object.scale.set(5,5,5);
scene.add(object);
}, onProgress, onError);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
document.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(){
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event){
mouseX = (event.clientX - windowHalfX) / 2;
mouseY = (event.clientY - windowHalfY) / 2;
}
function animate(){
requestAnimationFrame(animate);
render();
}
function render(){
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (- mouseY - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}