OBJ file not rendering properly in threejs

Question

Some faces are missing from the obj file where they are not rendered properly. The part with grey colour shows the same object viewed in an online viewer, where all the face/parts are rendered correctly.

the below image is the one I'm trying to render in localhost. using THREE.js obj loader.

javascript file- main.js

window.onload=function(){
  init();
  animate();
}

function init() {
  container = document.getElementById('container');
  console.log(container)
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.x = 100;
  camera.position.y = 50;
  camera.position.z = 70;

  scene = new THREE.Scene();
  var ambient = new THREE.AmbientLight( 0xffff , 4);
  scene.add( ambient );

  var directionalLight = new THREE.DirectionalLight( 0xffffff ,0.5 );
  directionalLight.position.set( 0, 0, 1000 );
  scene.add( directionalLight );

 

    controls = new THREE.TrackballControls( camera );
        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 2;
        controls.panSpeed = 1;
        controls.noZoom = false;
        controls.noPan = false;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.5;
        controls.keys = [ 65, 83, 68 ];
        controls.addEventListener( 'change', render );


    // 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/GreenWall.jpg', function (image) {
                texture.image = image;
                texture.needsUpdate = true;
            });
            var loader = new THREE.OBJLoader(manager);
            loader.load( './obj/male02/feder.jt.obj', function ( object ) {                    
                object.traverse(function (child) {
                    if (child instanceof THREE.Mesh) {
                        child.material.map = texture;
                    }
                });
                scene.add(object);
            }, onProgress, onError);

  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0xdddddd);
  renderer.setSize( window.innerWidth/1.5 , window.innerHeight/1.5);  
  container.appendChild( renderer.domElement  );
}

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

function render() {
  //camera.lookAt(scene.position);
  renderer.render( scene, camera );

}

<!DOCTYPE html>
<html lang="en">

  <head>
  
    <title>three.js webgl - loaders - OBJ loader</title>
    <meta charset="utf-8">
     <meta io ="view" name="viewport" content="width=device-width, height=device-height user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <body>
  <script src="./build/three.js"></script>
  <script src="./build/Detector.js"></script>
    <script src="./build/three.min.js"></script>
    <script src="./loaders/OBJLoader.js"></script>
    <script src="main.js"></script>
    <script src= "Controls/TrackballControls.js"></script>
    <div  id="container" ></div>
    </body>
</html>

Thank you, it worked and is there a way to centre the object to world centre ?? cuz, if I rotate it , it rotates on a ofset point. — santhosh.r
– santhosh.r, Commented Apr 17, 2017 at 4:18

santhosh.r · Accepted Answer · 2017-04-27 13:26:01Z

1

By adding child.material.side = THREE.DoubleSide;inside the loader, it worked perfectly.

answered Apr 27, 2017 at 13:26

santhosh.r

1861 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

OBJ file not rendering properly in threejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related