Three.js纹理加载不正确？

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

我使用OBJLoader来加载3D模型,我想放置木材纹理,但纹理没有正确加载或者可能无法正确渲染(我不知道)。这里的截图这是木纹的图像

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

//这是MTL文件Blender MTL文件:'无'材料数: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

1 个解决方案

#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.

在three.js中,对象颜色和纹理颜色混合在一起,因此如果将材质颜色更改为白色,则可以获得原始纹理颜色。

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;

#1