Question

我试图在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>

以下是呈现的内容：

这是我试图加载的纹理：

更新：每次重新加载页面时，平面的颜色都会改变。

Answer 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 );

您的平面几何尺寸是否有这么小的原因？

平面上的ThreeJS纹理无法正确渲染

1 个答案: