OBJ Loader doesn't show my object

Questions
,
1

Hi,
I’m new to Three js and I have a problem to show my 3d-object. I use the OBJ Loader.
I have tried to use first a normal mesh but it is also not viewable.
If I log it I think the object is drawing. So I have no idea what else it can be.
My object is in blender correct based on 0, 0, 0.

Here you can see the viewer.

console.clear();

let scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);

let hlight = new THREE.AmbientLight(0x404040,100);
scene.add(hlight);

let fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
scene.add(fillLight);

let backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
scene.add(backLight);

let axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);

let viewer = document.getElementById('3dViewer');
viewer.appendChild(renderer.domElement);
viewer.children[2].id = '3dCanvas';

let camera = new THREE.PerspectiveCamera(40, window.innerwidth/window.innerHeight, 1, 5000);
camera.position.z = 100;

let controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.enableDamping = true;
// controls.dampingFactor = 0.25;
controls.enableZoom = true;

const manager = new THREE.LoadingManager();

var viewerAlert = document.getElementById('viewerAlert');
var viewerFiles = document.getElementById('viewerFiles');
var countFiles  = document.getElementById('countFiles');

manager.onStart = function(url, itemsLoaded, itemsTotal){
    viewerFiles.textContent = 'Started loading file: ' + url + '.\nLoaded.';
	countFiles.textContent = itemsLoaded + ' of ' + itemsTotal + ' files.';
};

manager.onLoad = function(){
    viewerFiles.textContent = 'Loading complete!';
    countFiles.textContent = '';

    setTimeout(() => {
        viewerAlert.classList.add('fade-out');
        viewerAlert.addEventListener('transitionend', function(){
            viewerAlert.classList.replace('fade-out', 'hidden');
        });
    }, 800);
};

manager.onProgress = function(url, itemsLoaded, itemsTotal){
    viewerFiles.textContent = 'Loading file: ' + url + '.\nLoaded.';
    countFiles.textContent = itemsLoaded + ' of ' + itemsTotal + ' files.';
};

manager.onError = function(url){
    viewerFiles.textContent = 'There was an error loading ' + url;
    countFiles.textContent = '';
};

var mtlLoader = new THREE.MTLLoader(manager);
mtlLoader.setPath('./assets/models/');
mtlLoader.load('weingut-mueller_weinkarton.mtl', function( materials ) {
    materials.preload();

    var objLoader = new THREE.OBJLoader(manager);
    objLoader.setMaterials( materials );
    objLoader.setPath('./assets/models/');
    objLoader.load( 'weingut-mueller_weinkarton.obj',
        function(obj){
            obj.position.set(0, 0, 0);

            const box = new THREE.BoxHelper( obj, 0xffff00 );

            scene.add(box);
        },
        function(xhr){
        },
        function(error){
            console.error('An error occured!' + error);
        }
    );
});

window.addEventListener('resize', function(){
    let width  = window.innerWidth;
    let height = window.innerHeight;

    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

renderer.render(scene, camera, controls);

function animate(){
    requestAnimationFrame(animate);
    controls.update();
}

animate();
2

What reason for this line? It scales the object to zero size.

3

Hi,
It was on 1, 1, 1 in the log and I thought sometimes the object is relative to the original size. So I try to se tit on zero. But it changed nothing.
Also the problem resolves also on obj.scale.set(1, 1, 1);.

EDIT: I changed the script and add a link to my viewer in my open thread.
I added also the AxesHelper(). And it is also not displayed. Also I think I have a basically mistake in my code.

4

Your camera is 100 units away from the origin and the model will load at the origin (if you’ve not changed its original position). Maybe the model is loading, you’re just not seeing it… also the camera might be facing away from the model. I’d recommend first loading a simple cube without any camera tinkering to make sure that you can see anything. Then, when you see the cube, try to load the model (but even then your camera might be playing tricks with you, so best to just implement the camera, see that you can move around, load in a cube, load in a model, all the good stuff).

5

Hi @millennialstorm,
thanks for your answer. In the meanwhile I have rewrite all an now it works.
I have to compare both scripts to find out what I have done.
But your annotations are good advices! Thanks.
So now I have to struggle a bit with the Composer and Ambient Occlusion ti get my model a little bit nicer.

Cheers

1 Like