Three.js texture not load properly?

Question

I use OBJLoader to load the 3D model and I want to put a wood texture but the texture was not load properly or maybe not render properly(I dunno). Here the screenshot This the image of the wood texture

Please help me with this. Thank you in advance.

Here's the code:

<script>

  var container;
  var camera, scene, renderer;
  var mouseX = 0, mouseY = 0;
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  var container, stats;
  var camera, scene, renderer;
  var mouseX = 0, mouseY = 0;
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  var globalObject;
  var text;

  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 = 10;

  controls = new THREE.OrbitControls( camera );

  //scene
  scene = new THREE.Scene();

  var ambient = new THREE.AmbientLight( 0x101030 );
  scene.add( ambient );

  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
  directionalLight.position.set( 0, 0, 1 );
  scene.add( directionalLight );

  //manager
  var manager = new THREE.LoadingManager();
  manager.onProgress = function (item, loaded, total) {
    console.log( item, loaded, total );
  };

  //model
  var loader = new THREE.OBJLoader( manager );
  loader.load( 'image/table.obj', function (object) {
    //store global reference to .obj
    globalObject = object;


  object.traverse( function (child) {
      if ( child instanceof THREE.Mesh ) {
          child.material.map = THREE.ImageUtils.loadTexture( 'image/texture.jpg')
          /*child.material.map.x = 100 / 800;
          child.material.map.y = 100 / 800;*/
          child.material.needsUpdate = true;
      }
  });

  object.position.y = 0;
  scene.add( object );
});

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

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
 }

function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
 }

function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}

//animate
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 );
}
render();


</script>

// This the MTL file Blender MTL File: 'None' Material Count: 1

newmtl Material.002 Ns 96.078431 Ka 1.000000 1.000000 1.000000 Kd 0.640000 0.640000 0.640000 Ks 0.500000 0.500000 0.500000 Ke 0.000000 0.000000 0.000000 Ni 1.000000 d 1.000000 illum 2 map_Kd wood2.jpg

Answer 1

In three.js the object color and the texture colors are blended together, so you can get the original texture color if you change the material color to white.

When you set a map to the material, try to change the original ambient and diffuse color to white. The concrete code depends on the type of the material. Something like this:

child.material.ambient = 0xffffff;
child.material.diffuse = 0xffffff;