Loading textures for cubes using Three.js TextureLoader and CubeGeometry

Question

Loading textures for cubes using Three.js TextureLoader and CubeGeometry

I am currently learning threejs and I am trying to apply 6 different textures to each side of a cube. I initially achieved this using loadTexture.

var material3 = new THREE.MeshPhongMaterial( {map: THREE.ImageUtils.loadTexture('textures/ps.png')} );

However, I encountered an issue when attempting to use the deprecated THREE.ImageUtils.loadTexture method while saving 6 materials in an array and using THREE.MeshFaceMaterial. I now need to use THREE.TextureLoader instead, but I am unsure of how to load 6 textures using this method.

Here is my current code:

function texture()
{
    var loader = new THREE.TextureLoader();
    loader.load( 'textures/ps.png', function ( texture )
    {
        var geometry = new THREE.CubeGeometry( 10, 10, 10 );

        var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
        mesh = new THREE.Mesh( geometry, material );
        mesh.position.z = -50;

        scene.add( mesh );
    } );
}

javascript three.js

Answer 1

Answer №1

Here is a solution that closely matches what you are seeking:

function LoadTextures(TexturesToLoad, FinalCallback, ResultArray) {
        if (TexturesToLoad.length == 0) return;
        if (!ResultArray) ResultArray = [];
        var loader = new THREE.TextureLoader()
        
        var texture = TexturesToLoad.shift()

        loader.load(texture,

        function (texture) {
            ResultArray.push(texture);
            if (TexturesToLoad.length > 0) {
                LoadTextures(TexturesToLoad, FinalCallback, ResultArray)
            } else {

                FinalCallback(ResultArray)
            }

        },
        ShowProgress,
        ShowError);
    }

    function ShowProgress(xhr) {
        console.log(('Loading ' + xhr.loaded / xhr.total * 100) + '% completed');
    }

    function ShowError(xhr) {
        console.log('An error occurred');
    }

Invoke it with the following:

var TexturesToLoad = []
TexturesToLoad.push("../surfacemap.jpg")
TexturesToLoad.push("../normalmap.jpg");
TexturesToLoad.push("../specularmap.jpg");
    var ReturnedMaterials=[];
    var ReturnMaterials=[];



    var FinalCallback=function(ReturnedMaterials)
    {
            var surfaceMap =  ReturnedMaterials[0];        
            var normalMap =   ReturnedMaterials[1];                    
            var specularMap = ReturnedMaterials[2];         

            var material = new THREE.MeshPhongMaterial( 
            {           
                map: surfaceMap,
                normalMap: normalMap,
                normalScale: new THREE.Vector2( 1, 1 ),
                specularMap: specularMap,
                transparent:false,  
                wireframe: false 
            } );

        var geometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES);            
        mesh = new THREE.Mesh( geometry, material ); 
        mesh.rotation.x=Math.PI/2;


    };

    LoadTextures(TexturesToLoad,FinalCallback,ReturnMaterials)

Explanation: The use of a callback function with the THREE.TextureLoader ensures that the resources are loaded when needed. Callbacks can be complex when handling numerous materials. The LoadTextures function allows for recursive calls and ultimately triggers the function of your choice once all materials are loaded. The materials are stored in an array (ResultArray).

Answer 2

Here is a solution that closely matches what you are seeking:

function LoadTextures(TexturesToLoad, FinalCallback, ResultArray) {
        if (TexturesToLoad.length == 0) return;
        if (!ResultArray) ResultArray = [];
        var loader = new THREE.TextureLoader()
        
        var texture = TexturesToLoad.shift()

        loader.load(texture,

        function (texture) {
            ResultArray.push(texture);
            if (TexturesToLoad.length > 0) {
                LoadTextures(TexturesToLoad, FinalCallback, ResultArray)
            } else {

                FinalCallback(ResultArray)
            }

        },
        ShowProgress,
        ShowError);
    }

    function ShowProgress(xhr) {
        console.log(('Loading ' + xhr.loaded / xhr.total * 100) + '% completed');
    }

    function ShowError(xhr) {
        console.log('An error occurred');
    }

Invoke it with the following:

var TexturesToLoad = []
TexturesToLoad.push("../surfacemap.jpg")
TexturesToLoad.push("../normalmap.jpg");
TexturesToLoad.push("../specularmap.jpg");
    var ReturnedMaterials=[];
    var ReturnMaterials=[];



    var FinalCallback=function(ReturnedMaterials)
    {
            var surfaceMap =  ReturnedMaterials[0];        
            var normalMap =   ReturnedMaterials[1];                    
            var specularMap = ReturnedMaterials[2];         

            var material = new THREE.MeshPhongMaterial( 
            {           
                map: surfaceMap,
                normalMap: normalMap,
                normalScale: new THREE.Vector2( 1, 1 ),
                specularMap: specularMap,
                transparent:false,  
                wireframe: false 
            } );

        var geometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES);            
        mesh = new THREE.Mesh( geometry, material ); 
        mesh.rotation.x=Math.PI/2;


    };

    LoadTextures(TexturesToLoad,FinalCallback,ReturnMaterials)

Explanation: The use of a callback function with the THREE.TextureLoader ensures that the resources are loaded when needed. Callbacks can be complex when handling numerous materials. The LoadTextures function allows for recursive calls and ultimately triggers the function of your choice once all materials are loaded. The materials are stored in an array (ResultArray).

Answer 3

Answer №2

There are numerous methods to accomplish this task. Let me demonstrate 2 options;

1) Create your object (cube) by defining its own vertices and faces

.vertices.push( new THREE.Vector3( x, y, z ) );
.faces.push( new THREE.Face3( x, y, z ) );

I have provided a sample in jsfiddle.

2) Utilize UV mapping. Start by preparing the object with UV map in a 3D software such as Blender and export it as a JSON file.

I have also included a demonstration in jsfiddle.

If you are unfamiliar with UV mapping or Blender, refer to tutorials.

Answer 4

There are numerous methods to accomplish this task. Let me demonstrate 2 options;

1) Create your object (cube) by defining its own vertices and faces

.vertices.push( new THREE.Vector3( x, y, z ) );
.faces.push( new THREE.Face3( x, y, z ) );

I have provided a sample in jsfiddle.

2) Utilize UV mapping. Start by preparing the object with UV map in a 3D software such as Blender and export it as a JSON file.

I have also included a demonstration in jsfiddle.

If you are unfamiliar with UV mapping or Blender, refer to tutorials.

Loading textures for cubes using Three.js TextureLoader and CubeGeometry

Answer №1

Answer №2

Similar questions

Transmit information from a comprehensive form using AJAX technology

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

Loading an Angular app causes Chrome devtools to freeze

What is the process for incorporating synchronous tasks within an asynchronous function?

Utilizing browser's local storage to dynamically update text in buttons and panels

Guide to integrating various HTML files into a single HTML file with the help of Vue.js

Fixed position not being maintained after clicking the button

"NextAuth encounters an issue while trying to fetch the API endpoint: req.body

Traversing a deeply nested array of objects, comparing it with a separate array of objects

Is it possible to swap out a color, such as black, in textured images?

Surprisingly stumbled into the 'restricted' directory while switching the current directory to a temporary folder

Revealed the previously hidden private variables within the Revealing Module Pattern

Encountered an error while trying to load a resource: the server returned a 404 (Not Found) status code while attempting to edit a form using

Ways to update the div's color according to a specific value

Mastering Angular 4: The ultimate guide to managing multiple classes using ngClass

Retrieve the outer-HTML of an element when it is clicked

Chrome's inability to efficiently handle chunked responses in comparison to Firefox and Safari

HTML or JS/jQuery can create disorienting cursor behaviors

How to override the styling of a parent element in CSS

Error 504: The timeout issue occurred during an ajax call