Issue with texture in three.js causing it to appear completely white

Question

Issue with texture in three.js causing it to appear completely white

UPDATE: After taking advice from gaitat, I encountered a new issue: now the box is not visible at all. To illustrate this problem, I have created another question.

I have a basic box geometry that I am attempting to apply a texture to. However, all I am getting is a completely white box. To showcase this problem, I have set up a simple test page. Below is the content of that page:

"use strict";

// create DOM elements:
var container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
container.appendChild(info);

// define a 'Box2' geometry instance: (see implementation below)
var myBox2geom = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10); // parameters: x,y,z dimensions and segment widths

// create a 'Box2' mesh with texture:
var texture = new THREE.TextureLoader().load("crate.gif");
console.log("texture: ", texture);
var material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide, emissive: 0xffffff });
texture.minFilter = THREE.NearestFilter;
var myBox2mesh = new THREE.Mesh(myBox2geom, material);

// add mesh to scene:
var scene = new THREE.Scene();
scene.add(myBox2mesh);

// add light source:
var light = new THREE.PointLight(0xffffff);
light.position.set(100, 200, 300);
light.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(light);

// set up camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 100;
camera.position.y = 200;
camera.position.z = 300;
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

// create renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// render the scene!
renderer.render(scene, camera);

THREE.Box2Geometry = function(width, height, depth, widthSegments, heightSegments, depthSegments) {
    ...geometry implementation...
};

THREE.Box2Geometry.prototype = Object.create(THREE.Geometry.prototype);

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="main.js"></script>
  </body>
</html>

javascript three.js

Answer 1

Answer №1

After some investigation, it was discovered that the code contained three mistakes, as pointed out by individuals like Falk Thiele and 2pha/gaitat in a subsequent question I posed: the follow-up question.

An issue with Cross-origin resource sharing (CORS) caused an error in Firebug:
```
SecurityError: The operation is insecure.
gl.texImage2D.apply( gl, arguments );
```
To resolve this error, Falk Thiele recommended setting the CrossOrigin attribute to empty:
```
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
loader.load(
    "http://mrdoob.github.io/three.js/examples/textures/crate.gif",
    function( texture ) {
        //...
    },
    function () {},  
    function ( error ) { console.log( error ) } 
);
```
Interestingly, even loading the texture locally could result in a CORS error in Chrome if the loader.crossOrigin = ""; line was included. This indicates that this line should only be used when the origin is indeed cross-site.
The scene was being rendered only once before the texture was loaded due to the asynchronous nature of the TextureLoader.load() call. This led to the line
```
renderer.render( scene, camera );
```
executing before the loading process completed.
In Chrome, the script failed for two reasons: the aforementioned CORS issue and the failure to load the THREE library (
```
Uncaught ReferenceError: THREE is not defined
```
). It's unclear why THREE failed to load in Chrome, but in the corrected code snippet provided below (also available here), the error no longer occurs.

A demo showcasing the updated code can be found onJS fiddle.

Below is the corrected code snippet without errors 1, 2, and 3:

"use strict";

// create DOM elements:
var container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
container.appendChild(info);

// instantiate a 'Box2' geometry:
var myBox2geom = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10);  

// create a scene:
var scene = new THREE.Scene();

// generate a corresponding 'Box2' mesh:
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
loader.load("http://mrdoob.github.io/three.js/examples/textures/crate.gif",
function(textur   e) {
texture.minFilter = THREE.NearestFilter;
var material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide });
var myBox2mesh = new THREE.Mesh(myBox2geom, material);
scene.add(myBox2mesh);
},
function() {},  
function(error) { console.log(error) }
);

// add lighting:
var light = new THREE.PointLight(0xffffff);
light.position.set(100, 200, 300);
light.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(light);

// setup camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 100;
camera.position.y = 200;
camera.position.z = 300;
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

// initialize renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// render loop:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();


THREE.Box2Geometry = function(width, height, depth, widthSegments, heightSegments, depthSegments) {...}
THREE.Box2Geometry.prototype = Object.create(THREE.Geometry.prototype);

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="main3.js"></script>
  </body>
</html>

Additional Errors:
4. A texture may appear white or black if there are no lights, lights not added to the scene, misaligned light directions, or lights too distant from the mesh.
5. Face normals pointing incorrectly from the geometry might also cause texturing issues. More details can be found in this related question.

Answer 2

After some investigation, it was discovered that the code contained three mistakes, as pointed out by individuals like Falk Thiele and 2pha/gaitat in a subsequent question I posed: the follow-up question.

An issue with Cross-origin resource sharing (CORS) caused an error in Firebug:
```
SecurityError: The operation is insecure.
gl.texImage2D.apply( gl, arguments );
```
To resolve this error, Falk Thiele recommended setting the CrossOrigin attribute to empty:
```
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
loader.load(
    "http://mrdoob.github.io/three.js/examples/textures/crate.gif",
    function( texture ) {
        //...
    },
    function () {},  
    function ( error ) { console.log( error ) } 
);
```
Interestingly, even loading the texture locally could result in a CORS error in Chrome if the loader.crossOrigin = ""; line was included. This indicates that this line should only be used when the origin is indeed cross-site.
The scene was being rendered only once before the texture was loaded due to the asynchronous nature of the TextureLoader.load() call. This led to the line
```
renderer.render( scene, camera );
```
executing before the loading process completed.
In Chrome, the script failed for two reasons: the aforementioned CORS issue and the failure to load the THREE library (
```
Uncaught ReferenceError: THREE is not defined
```
). It's unclear why THREE failed to load in Chrome, but in the corrected code snippet provided below (also available here), the error no longer occurs.

A demo showcasing the updated code can be found onJS fiddle.

Below is the corrected code snippet without errors 1, 2, and 3:

"use strict";

// create DOM elements:
var container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
container.appendChild(info);

// instantiate a 'Box2' geometry:
var myBox2geom = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10);  

// create a scene:
var scene = new THREE.Scene();

// generate a corresponding 'Box2' mesh:
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
loader.load("http://mrdoob.github.io/three.js/examples/textures/crate.gif",
function(textur   e) {
texture.minFilter = THREE.NearestFilter;
var material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide });
var myBox2mesh = new THREE.Mesh(myBox2geom, material);
scene.add(myBox2mesh);
},
function() {},  
function(error) { console.log(error) }
);

// add lighting:
var light = new THREE.PointLight(0xffffff);
light.position.set(100, 200, 300);
light.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(light);

// setup camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 100;
camera.position.y = 200;
camera.position.z = 300;
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

// initialize renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

// render loop:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();


THREE.Box2Geometry = function(width, height, depth, widthSegments, heightSegments, depthSegments) {...}
THREE.Box2Geometry.prototype = Object.create(THREE.Geometry.prototype);

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="main3.js"></script>
  </body>
</html>

Additional Errors:
4. A texture may appear white or black if there are no lights, lights not added to the scene, misaligned light directions, or lights too distant from the mesh.
5. Face normals pointing incorrectly from the geometry might also cause texturing issues. More details can be found in this related question.

Answer 3

Answer №2

To ensure that your texture is properly loaded, you must utilize the THREE.Textureloader() .onLoad() method.

Below is an example demonstrating how this would be implemented:

// create DOM elements:
var container = document.createElement('div');
document.body.appendChild(container);

var scene = new THREE.Scene();

// define a 'Box2' geometry instance: (see implementation of geometry below)
var myBox2geom = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10); // arguments: x, y, z-dimensions and segment widths

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
loader.load(
    'crate.png', // resource URL

    function(texture) {
        texture.minFilter = THREE.NearestFilter;

        var material = new THREE.MeshLambertMaterial({ map: texture });

        var myBox2mesh = new THREE.Mesh(myBox2geom, material);

        // add mesh to the scene:
        scene.add(myBox2mesh);
    },
);

// create light:
var light = new THREE.PointLight(0xffffff);
light.position.set(100, 200, 300);
light.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(light);

// set up camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(100, 200, 300);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// initialize renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

animate();

function animate() {

    requestAnimationFrame(animate);
    renderer.render(scene, camera);

}

Answer 4

To ensure that your texture is properly loaded, you must utilize the THREE.Textureloader() .onLoad() method.

Below is an example demonstrating how this would be implemented:

// create DOM elements:
var container = document.createElement('div');
document.body.appendChild(container);

var scene = new THREE.Scene();

// define a 'Box2' geometry instance: (see implementation of geometry below)
var myBox2geom = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10); // arguments: x, y, z-dimensions and segment widths

// instantiate a loader
var loader = new THREE.TextureLoader();

// load a resource
loader.load(
    'crate.png', // resource URL

    function(texture) {
        texture.minFilter = THREE.NearestFilter;

        var material = new THREE.MeshLambertMaterial({ map: texture });

        var myBox2mesh = new THREE.Mesh(myBox2geom, material);

        // add mesh to the scene:
        scene.add(myBox2mesh);
    },
);

// create light:
var light = new THREE.PointLight(0xffffff);
light.position.set(100, 200, 300);
light.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(light);

// set up camera:
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(100, 200, 300);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// initialize renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

animate();

function animate() {

    requestAnimationFrame(animate);
    renderer.render(scene, camera);

}

Issue with texture in three.js causing it to appear completely white

Answer №1

Answer №2

Similar questions

What is the process for converting an array of integers into a byte stream and sending it to the client using Node.js?

Why does my JSON variable contain "type" and "data" values instead of something else?

How can I utilize columns from a junction table in the "where" clause in sequelize?

What causes an ajax request to submit "none" as the value of a dom element?

Display a button only when hovering over it

What is the proper way to arrange this particular array?

Populate the dropdown menu with data from a JSON file

Having trouble getting my Node.js application to deploy properly on Heroku

Animating content with Jquery Waypoints for a seamless and elegant user experience

After removing an item from the array, React fails to display the updated render

JavaScript form validation issue unresolved

Is there a way to update the href attribute within the script section in vue.js?

What is the best way to structure a JSON object with keys that can change dynamically?

Tips for displaying dynamic data using innerHTML

Is there a plethora of new content waiting to be discovered as you scroll through the old using Vue and

When you click on a single checkbox, it automatically selects all of them

GraphQL query excluding empty fields for various types of objects

Receiving alerts as soon as the page DOM is fully loaded, prior to the window.onload event

Can you explain the purpose of the window.constructor and global.constructor functions in JavaScript?

Simple steps to change JSON Object to JavaScript array