Can Not See 3d Obj. Model When Loaded With THREE.js

Question

I load an obj file from an external resource with three.js. From onProgress callback function I can see that object is loaded without any error. However I can not see object on the screen. I tried diffrent textures and different camera postion but still can not see the object. Interestingly, obj file can be easily seen with Windows Object Vİewer without any settings.

Here the boj file I used and CAD program settings while exporting obj:

Obj files and related files with obj file: https://ufile.io/e3oplk29 Obj File export options on the CAD program: https://pasteboard.co/Ieu9226.jpg

Here the code I use:

////************HERE LIGHT AND SCENE AND CAMERA****************////
var directionalLightIntensity = 1;
var ambientLightIntensity = 0.05;
var ambiColor = "#ffffff";
var metalValue = 0;
var roughValue = 1;
var kumas = "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/';?>"+"kumas/kumas9.jpg";
var kumasNormal = "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/';?>"+"kumas/kumas9_NORMAL.jpg";
var container = document.getElementById('cloth-container');

if(window.innerWidth > 767 ){
    var render_height = document.documentElement.clientHeight - 8;
    var render_width = document.documentElement.clientWidth - 130;
}else{
    var render_height = document.documentElement.clientHeight - 95;
    var render_width = document.documentElement.clientWidth;
}

const scene = new THREE.Scene();

var light = new THREE.DirectionalLight('#ffffff', directionalLightIntensity);
var ambientLight = new THREE.AmbientLight(ambiColor, ambientLightIntensity);
light.position.set(0,0,1);
scene.add(light);
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(75, render_width/render_height,0.1,1000);
camera.position.z =  1.8 ;
camera.position.y =  1.2;
camera.position.x =  0;
camera.lookAt( 0,1.2,0);

const renderer = new THREE.WebGLRenderer({ alpha: true , antialias:true });
renderer.setSize(render_width, render_height);
renderer.setClearColor( 0xffffff, 0);
container.appendChild(renderer.domElement);

const objLoader = new THREE.OBJLoader();

const mtlLoader = new THREE.MTLLoader();
mtlLoader.setMaterialOptions({side:THREE.DoubleSide});

////************HERE OBJ LOAD WITH THREE.JS****************////
mtlLoader.load( "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/yaka6-n4/';?>"+'yaka6-n4.mtl', function( materials ) {
    materials.preload();

    objLoader.setMaterials( materials );
    objLoader.load( "<?php echo CUSTOMSHIRT_PLUGIN_DIR_URL.'customshirt/yaka6-n4/';?>"+'yaka6-n4.obj', function ( obj ) {
        collar_obj = obj;
        obj.position.set( obj_pos_x, obj_pos_y, obj_pos_z );
        obj.rotation.y = 0;

        // texture
        texture = textureLoader.load(kumas);
        textureNormal= textureLoader.load(kumasNormal);
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        textureNormal.wrapS = textureNormal.wrapT = THREE.RepeatWrapping;
        texture.repeat.x = textureXRepeat;
        texture.repeat.y = textureYRepeat;
        textureNormal.repeat.x = textureXRepeat;
        textureNormal.repeat.y = textureYRepeat;

        obj.traverse( function ( child ) {
            //if ( child.isMesh ) child.material.map = texture;
            if ( child.isMesh ) child.material = new THREE.MeshStandardMaterial({
                //color:     0x996633,
                //specular:  0x050505,
                //shininess: my_shine_value,
                metalness: metalValue,
                roughness: roughValue,
                map:       texture,
                normalMap: textureNormal,
                //side:      THREE.DoubleSide
            });
        });

        scene.add( obj );
    },
    // onProgress callback
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },

    // onError callback
    function ( err ) {
        console.log( 'An error happened' );
    });
});

////************HERE RENDERER****************////
function render(){
    requestAnimationFrame(render);
    renderer.render(scene,camera);
}

render();

Any idea is appreciated. Thanks

Answer 1

It seems your object's geometry is translated. Since the asset is composed of multiple meshes, I suggest the following code to center your OBJ.

const box = new THREE.Box3().setFromObject( object );
const center = box.getCenter( new THREE.Vector3() );

object.position.x += ( object.position.x - center.x );
object.position.y += ( object.position.y - center.y );
object.position.z += ( object.position.z - center.z );

I've added this code in the onLoad() callback of OBJLoader in the following official example and was able to see the object (a shirt collar).

https://threejs.org/examples/webgl_loader_obj_mtl

three.js R 104