Selecting either "THREE.NearestFilter" or "THREE.LinearFilter" will result in the black plane

Question

Selecting either "THREE.NearestFilter" or "THREE.LinearFilter" will result in the black plane

During my experimentation with the THREE.js library, I encountered a notification stating:

THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.

To address this issue, I made the following adjustment:

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

Despite attempting another approach, all I ended up with was a black plane:

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

javascript three.js

Answer 1

Answer №1

The reason you are seeing a black plane in the second scenario is due to incorrect arguments being passed to THREE.ImageUtils.loadTexture(). Instead of passing an empty object {}, you should be using code similar to this:

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

Although texture loading is asynchronous, it's unclear if that's the problem without reviewing more of your code.

Additionally, consider reducing the number of faces in your PlaneBufferGeometry. You can try something like this:

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

This advice applies to three.js r.71 version.

Answer 2

The reason you are seeing a black plane in the second scenario is due to incorrect arguments being passed to THREE.ImageUtils.loadTexture(). Instead of passing an empty object {}, you should be using code similar to this:

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

Although texture loading is asynchronous, it's unclear if that's the problem without reviewing more of your code.

Additionally, consider reducing the number of faces in your PlaneBufferGeometry. You can try something like this:

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

This advice applies to three.js r.71 version.

Answer 3

Answer №2

The download and availability of the texture for use may not align with your expectations.

In one scenario, the request for loading the texture happens asynchronously before later being assigned to a variable. This process might work by chance rather than design.

Alternatively, in another case, both downloading and assigning the texture occur simultaneously within a single statement, leaving little time for the texture to finish downloading.

To handle textures properly, it is recommended to follow this approach (adapted from )

var groundMaterial;
...
// initiate a loader
var loader = new THREE.ImageLoader();

// load an image resource
loader.load(
    // resource URL
    'images/grass.jpg',

    // Action upon successful loading of the resource
    function ( image ) {
        // By using this method, you ensure that the texture has finished downloading before utilizing it.
        groundMaterial = new THREE.MeshBasicMaterial( {map: image, side: THREE.DoubleSide} );
} );

Answer 4

The download and availability of the texture for use may not align with your expectations.

In one scenario, the request for loading the texture happens asynchronously before later being assigned to a variable. This process might work by chance rather than design.

Alternatively, in another case, both downloading and assigning the texture occur simultaneously within a single statement, leaving little time for the texture to finish downloading.

To handle textures properly, it is recommended to follow this approach (adapted from )

var groundMaterial;
...
// initiate a loader
var loader = new THREE.ImageLoader();

// load an image resource
loader.load(
    // resource URL
    'images/grass.jpg',

    // Action upon successful loading of the resource
    function ( image ) {
        // By using this method, you ensure that the texture has finished downloading before utilizing it.
        groundMaterial = new THREE.MeshBasicMaterial( {map: image, side: THREE.DoubleSide} );
} );

Selecting either "THREE.NearestFilter" or "THREE.LinearFilter" will result in the black plane

Answer №1

Answer №2

Similar questions

Sending text content using AJAX

How can I use XPATH to target a div after choosing a nested element?

Ways to examine the origin of an image based on the attributes of a React component that I have passed as a prop?

Generating separators in every third row using an array of card elements

What is the best way to retrieve the length of a string from an element once it has been bound with Angular

Transferring user-selected values from JavaScript to a PHP file

What is the process for reverting back to a previous version using n (Node Version Manager)?

Issue: The provider "tProvider" is not recognized in the Rails application using angularJS

Function "Contains" not Present in Object

AngularJS error: Cannot find provider for $scopeProvider due to $scope not being injected in the service

Tips for recalling the display and concealment of a div element using cookies

Issue encountered while attempting to start npm: Error code from NPM

Troubleshooting problems with AJAX in WordPress

Harnessing the power of lazysizes with WebP

JavaScript still displaying empty values despite correct syntax being used

What is the syntax for replacing specific letters within a JavaScript string using JavaScript?

Concentrate on the disappeared div element following the AJAX request

Material selection through span in three.js is not functional

Having trouble interacting with buttons using HtmlUnitDriver, but no issues clicking buttons with FirefoxDriver

The Arabic characters are not rendering correctly