纹理在视口three.js中不显示

Question

我已经加载了带纹理的衬衫对象。我设置了环境光和方向光。但我的渲染部分没有清晰显示。检查我的附件。我不知道如何设置光效。任何人都可以帮助我。这是我的代码`

var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
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.x = 100;
  camera.position.y = 100;
  camera.position.z = 0;
  controls = new THREE.OrbitControls( camera );
  controls.rotateSpeed = 5.0;
  controls.zoomSpeed = 5;
  controls.panSpeed = 2;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
  scene = new THREE.Scene();


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

    var directionalLight = new THREE.DirectionalLight(0xffeedd);
    directionalLight.position.set(0, 70, 100).normalize();
    scene.add(directionalLight);
  /*** Texture Loading ***/
  var manager = new THREE.LoadingManager();
  manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
  };
  var texture = new THREE.Texture();
  var loader = new THREE.ImageLoader( manager );
 loader.load( 'mytexture.jpg', function ( image ) {
    texture.image = image;
    texture.needsUpdate = true;
 texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestMipMapLinearFilter;
  } );
  /*** OBJ Loading ***/
  var loader = new THREE.OBJLoader( manager );
  loader.load( 'mymodel.obj', function ( event ) {
    var object = event;
    object.traverse( function ( child ) {
      if ( child instanceof THREE.Mesh ) {
        child.material.map = texture;
      }
    });
    object.scale = new THREE.Vector3( 25, 25, 25 );
    object.position.y -= 2.5;
    scene.add( object );
  });



  // We set the renderer to the size of the window and
  // append a canvas to our HTML page.
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( renderer.domElement );
}
function animate() {
  requestAnimationFrame( animate );
  controls.update();
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}

`

Answer 1

看起来像moir pattern。 fallbacks纹理的Three.js npot到GL_NEAREST。将纹理大小调整到合适的大小，并使用正确的过滤。