Can Not See Loaded and Rendered Object

Questions
, , ,
1

Hello, I load a 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 code I use and I post the obj file as attachment:

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' );
        });
      });

function render(){
        requestAnimationFrame(render);
        renderer.render(scene,camera);
      }

render();

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

Any idea is appreciated.
Thanks

2

It’s hard to know what the error is without seeing all of your code. Are you adding any lights to the scene?

3

Part related wih scene and light:

  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});