ビューポートthree.jsでテクスチャが明瞭に表示されない

Question

シャツオブジェクトにテクスチャをロードしました。周囲光と指向性ライトを設定しました。ただし、レンダリング部分がはっきりと表示されません。私の添付ファイルを確認してください。私は光の効果を設定する方法については知らない。誰も私を助ける。ここに私のcode`それはmoir patternのように見える

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

です。 Three.js fallbacks〜GL_NEARESTnpotテクスチャ。テクスチャのサイズを適切なサイズに変更すると、右のフィルタリングが使用されます。