Question

我使用OBJLoader来加载3D模型，我想放置一个木质纹理，但纹理没有正确加载或者可能无法正确渲染（我不知道）。 Here the screenshot This the image of the wood texture

请帮我解决这个问题。提前谢谢。

以下代码：

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

//这是MTL文件 Blender MTL文件：＆＃39;无＆＃39; 材料数量：1

newmtl Material.002 Ns 96.078431 嘉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 幻觉2 map_Kd wood2.jpg

Answer 1

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

将地图设置为材质时，请尝试更改原始环境并将颜色漫反射为白色。具体代码取决于材料的类型。像这样：

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

Three.js纹理加载不正确？

1 个答案: