2017-12-21 8 views
0

Was ich versuche zu tun ist eine einfache Ebene hinzufügen und zuweisen eine Textur, die dehnen und passen sollte. Die Textur wird auf beiden Seiten angezeigt. Bis jetzt habe ich diesen Code (der Optimierung benötigt, aber ich muss dieses Problem zuerst beheben).Three.js Textur hat Nebel und überlappt beim Herauszoomen

$(window).on('load', function() { 

    var container = $('main'); 

    var renderer = new THREE.WebGLRenderer({ 
     antialias: true, 
     alpha: true, 
     logarithmicDepthBuffer: true 
    }); 

    renderer.setSize(container.outerWidth() - 10, container.outerHeight() - 10); 
    renderer.setClearColor(0xeaeaea); 

    var scene = new THREE.Scene(); 

    var camera = new THREE.PerspectiveCamera(75, container.outerWidth()/container.outerHeight(), 2, 1000); 
    camera.position.z = 8; 
    camera.position.x = 2; 

    var controls = new THREE.OrbitControls(camera); 
    controls.target.set(0, 0, 0) 

    container.append(renderer.domElement); 

    var animate = function() { 
    requestAnimationFrame(animate); 

    controls.update(); 

    renderer.render(scene, camera); 
    }; 

    animate(); 

    var geometry = new THREE.PlaneGeometry(8, 5, 32); 

    var texture = THREE.ImageUtils.loadTexture("texture.png"); 
    texture.wrapS = THREE.RepeatWrapping; 
    texture.wrapT = THREE.RepeatWrapping; 
    texture.repeat.set(1, 1); 

    var diffuse = THREE.ImageUtils.loadTexture("diffuse.png"); 
    diffuse.wrapS = THREE.RepeatWrapping; 
    diffuse.wrapT = THREE.RepeatWrapping; 
    diffuse.repeat.set(1, 1); 

    var material = new THREE.MeshBasicMaterial({ map : texture }); 
    material.alphaMap = diffuse; 
    material.transparent = true; 
    material.side = THREE.DoubleSide; 

    var plane = new THREE.Mesh(geometry, material); 
    plane.rotation.x = -60 * (Math.PI/180); 

    scene.add(plane); 
}); 

1. Erstes Problem

Close look

Wenn um das Flugzeug oder es bei der Suche von einem Winkel zu drehen, wird dieser Nebel um die Ebene hinzugefügt. Ich will das nicht. Ich möchte, dass die Textur das ganze Flugzeug klar besetzt. Kein Nebel, kein Ausbleichen an den Rändern. Ich weiß nicht, warum das

1. Zweites Problem

Far look

geschieht beim Herauszoomen, um die Texturveränderungen und wird irgendwie von selbst überlappt. Ich weiß nicht, ob das eine Art von LOD-Technik ist, aber ich will es nicht. Wie ich bereits sagte, möchte ich, dass die Textur in das Flugzeug passt und es vollständig bedeckt, ohne an Qualität zu verlieren, Nebel zu haben oder sich in irgendeiner Weise zu verändern. Ich weiß nicht, ob ich mit den Nebel- oder Kameragruswerten arbeiten muss. Ich habe versucht, sie zu ändern, aber das Ergebnis ist das gleiche.

Antwort

0

Ich hatte gerade das Problem dadurch auf die Textur hinzufügen zu beheben:

texture.minFilter = THREE.LinearFilter; 
texture.magFilter = THREE.LinearFilter;