I am struggling to apply a square grass texture to square planes in ThreeJS. Each plane should display the grass texture once, but instead, each plane is rendering as a different solid color. It seems like ThreeJS is applying the texture one pixel at a time to each plane, rather than rendering the entire texture on each plane.
Below is my code snippet:
<!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>
The current output can be seen here:
https://i.sstatic.net/X7Qsa.png
And this is the texture I'm trying to load:
https://i.sstatic.net/72W3n.png
Update: The colors of the planes change every time the page is reloaded.