"THREE.NearestFilter"或"THREE.LinearFilter"导致黑色平面

Question

当我使用THRE.js库时，我收到了这样的通知：

THREE.WebGLRenderer:纹理不是二的幂。纹理.min过滤器应设置为THREE.NearestFilter或THREE.LinearFilter。

所以，我试着修复它。当我放置过滤器时，它有效：

var groundGeometry = new THREE.PlaneBufferGeometry( 5000, 5000, 96, 96 );
var grassTexture = THREE.ImageUtils.loadTexture("images/grass.jpg");
grassTexture.minFilter = THREE.LinearFilter;//here is the filter
var groundMaterial = new THREE.MeshBasicMaterial( {map: grassTexture, side: THREE.DoubleSide} );
var groundPlane = new THREE.Mesh(groundGeometry, groundMaterial);
scene.add( groundPlane );

然而，我尝试了另一种方法，但最后我只得到了一架黑色飞机：

var groundGeometry = new THREE.PlaneBufferGeometry( 5000, 5000, 96, 96 );
var groundMaterial = new THREE.MeshBasicMaterial( {map: THREE.ImageUtils.loadTexture({image: "images/grass.jpg", minFilter: THREE.LinearFilter}), side: THREE.DoubleSide} );
var groundPlane = new THREE.Mesh(groundGeometry, groundMaterial);
scene.add( groundPlane );

Answer 1

在第二种情况下，由于没有将正确的参数传递给THREE.ImageUtils.loadTexture()，因此会得到一个黑平面。您正在传递一个对象{}。你必须这样做：

var groundMaterial = new THREE.MeshBasicMaterial( { 
    map: THREE.ImageUtils.loadTexture( "images/grass.jpg" ),
    side: THREE.DoubleSide
} );
groundMaterial.map.minFilter = THREE.LinearFilter;

诚然，纹理加载是异步的，但在不了解代码其余部分的情况下，无法确定这是否是一个问题。

顺便说一句，你的PlaneBufferGeometry可能不需要18000张脸。尝试

groundGeometry = new THREE.PlaneBufferGeometry( 5000, 5000, 1, 1 );

three.js r.71

Answer 2

纹理没有下载，当你认为是的时候就可以使用了。

在第一种情况下，第二条语句请求异步加载纹理。两个语句之后，纹理被指定给一个变量。它只是靠运气。

在第二种情况下，您可以在一个语句中下载并指定一个纹理。几乎没有足够的时间下载纹理。

正确的方法：（取自http://threejs.org/docs/#Reference/Loaders/ImageLoader)

var groundMaterial;
...
// instantiate a loader
var loader = new THREE.ImageLoader();
// load a image resource
loader.load(
    // resource URL
    'images/grass.jpg',
    // Function when resource is loaded
    function ( image ) {
        // here you are guaranteed that the texture has downloaded so you can do something with it.
        groundMaterial = new THREE.MeshBasicMaterial( {map: image, side: THREE.DoubleSide} );
} );