Three.js纹理有雾并且在缩小时重叠

Question

我想要做的是添加一个简单的平原并为其指定一个应拉伸和适合它的纹理。纹理显示在两侧。到目前为止，我有这个代码（需要优化，但我需要先解决这个问题）。

$( 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.第一个问题

当围绕平面旋转或从一个角度观察时，会在平面周围添加此雾。我不希望这样。我希望纹理能够清楚地占据所有平面。没有雾，边缘没有消失。我不知道为什么会这样

1.第二个问题

缩小时，纹理会发生变化，并以某种方式重叠。我不知道这是否是某种LOD技术，但我不想要它。就像我已经说过的那样，我希望纹理能够贴合在平面内并完全覆盖它，而不会失去质量，有雾或以任何方式改变。我不知道是否需要使用雾或相机截头值。我尝试改变它们，但结果是一样的。