Текстура ThreeJS неправильно визуализируется на плоскости

Я пытаюсь текстурировать квадратные плоскости с квадратной текстурой травы за три часа. Каждая отдельная плоскость должна иметь 1 итерацию текстуры травы. Однако каждая плоскость отрисовывается как отдельный сплошной цвет. Это выглядит так, как будто по какой-то причине ThreeJS отрисовывает по 1 пикселу одновременно на каждой отдельной плоскости, вместо того, чтобы отрисовывать всю текстуру на каждой плоскости.

Вот мой код:

<!DOCTYPE html>
<html>
  <head>
    <title>Neighbor</title>
    <style>
      html, body { margin: 0; padding: 0; overflow: hidden; }
    </style>
  </head>
  <body>
    <script src="third_party/three.min.js"></script>
    <script>
      var scene = new THREE.Scene();

var aspect = window.innerWidth / window.innerHeight;


var camera = new THREE.PerspectiveCamera( 95, aspect, 0.1, 1000 );
//var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );        

camera.position.y = 20;
camera.position.z = 20;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );      

var geometry = new THREE.PlaneGeometry( 1, 1 );


// instantiate a loader
var loader = new THREE.TextureLoader();
loader.crossOrigin = true;
var material;
// load a resource
loader.load(
    // resource URL
    'grass2.png',
    // Function when resource is loaded
    function ( texture ) {
        // do something with the texture
        material = new THREE.MeshBasicMaterial( {
            map: texture
         } );
    },
    // Function called when download progresses
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    // Function called when download errors
    function ( xhr ) {
        console.log( 'An error happened' );
    }
);

//var material = new THREE.MeshBasicMaterial( {color: 0x81D67E} );
var plane = [];
for(var j=0;j<100;j++){
for(var i=0;i<100;i++){
    plane[i] = new THREE.Mesh( geometry, material );
    plane[i].rotation.x = -(Math.PI / 2);
    plane[i].position.z = -(i * 1);
    plane[i].position.x = (j * 1);
    scene.add( plane[i] );
}
}
for(j=1;j<100;j++){
for(i=0;i<100;i++){
    plane[i] = new THREE.Mesh( geometry, material );
    plane[i].rotation.x = -(Math.PI / 2);
    plane[i].position.z = -(i * 1);
    plane[i].position.x = -(j * 1);
    scene.add( plane[i] );
}
}


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

    renderer.render( scene, camera );
};

render();
    </script>
  </body>
</html>

Вот что это такое рендеринг:

Рендеринг Результатов

И вот текстура, которую я пытаюсь загрузить:

Текстура травы

Update: цвета плоскостей изменяются каждый раз, когда я перезагружаю страницу.

1 ответ

  1. необходимо создать материал вне загруженного обратного вызова.
    например.

    // instantiate a loader
    var loader = new THREE.TextureLoader();
    loader.crossOrigin = true;
    var material = new THREE.MeshBasicMaterial();
    // load a resource
    loader.load(
        // resource URL
        'grass2.png',
        // Function when resource is loaded
        function ( texture ) {
            // do something with the texture
            material.map = texture;
            material.needsUpdate = true;
        },
        // Function called when download progresses
        function ( xhr ) {
            console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
        },
        // Function called when download errors
        function ( xhr ) {
            console.log( 'An error happened' );
        }
    );
    

    Есть ли причина, по которой вы создаете так много равнин, а не повторяете текстуру на одной большой плоскости?
    например.

    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 100, 100 );
    

    Есть ли причина, по которой размеры вашей плоской геометрии так малы?