THREE JS shader lib - Multiple Textures

Question

hi i am trying to make a mesh with three maps (diffuse normal and specular) and for some reason the mesh wont render here is the code where i create the mesh.

function initGlobe()
{
    var surfaceMap = {map:THREE.ImageUtils.loadTexture("images/earth_surface_2048.jpg")};
    var normalMap = {map:THREE.ImageUtils.loadTexture("images/earth_normal_2048.jpg")};
    var specularMap = {map:THREE.ImageUtils.loadTexture("images/earth_specular_2048.jpg")};

    var shader = THREE.ShaderLib[ "normalmap" ];
    var uniforms = shader.uniforms;
    uniforms["tDiffuse"].value = surfaceMap;
    uniforms["tNormal"].value = normalMap;
    uniforms["tSpecular"].value = specularMap;
    uniforms["enableDiffuse"].value = true;
    uniforms["enableSpecular"].value = true;

    var shaderMaterial = new THREE.ShaderMaterial(
        {fragmentShader:shader.fragmentShader,vertexShader:shader.vertexShader,
        uniforms:uniforms, lights:true}
    );
    // old ver - delete later var material = new THREE.MeshPhongMaterial(surfaceMap);
    var geometry = new THREE.SphereGeometry(1,32,32);
    geometry.computeTangents();
    return new THREE.Mesh(geometry, shaderMaterial);
}

oleviolin · Accepted Answer · 2015-11-24 12:50:17Z

Hi I had the same problem as you, there is a lot of Three changes since that very good WEB GL up and running book was written.

I got this to work, maybe you can use it, it is using the new THREE.TextureLoader that I could not find any other examples on so I made this:

function MultiLoader(TexturesToLoad, LastCall, ReturnObjects) {
    if (TexturesToLoad.length == 0) return;
    if (!ReturnObjects) ReturnObjects = [];
    var loader = new THREE.TextureLoader()
    //Pop off the latest in the , 
    //you could use shift instead if you want to read the array from 
    var texture = TexturesToLoad.shift()

    loader.load(texture,

    function (texture) {
        ReturnObjects.push(texture);
        if (TexturesToLoad.length > 0) {
            MultiLoader(TexturesToLoad, LastCall, ReturnObjects)
        } else {

            LastCall(ReturnObjects)
        }

    },
    LoadProgress,
    LoadError);
}
function LoadProgress(xhr) {
    console.log(('Lodaing  ' + xhr.loaded / xhr.total * 100) + '% loaded ');
}

function LoadError(xhr) {
    console.log('An error happened  ');
}

You can call something like this:

var TexturesToLoad = []
TexturesToLoad.push("images/earth_surface_2048.jpg")
TexturesToLoad.push("images/earth_normal_2048.jpg");
TexturesToLoad.push("images/earth_specular_2048.jpg");
args = [];
args.push(this);
ReturnedMaterials = [];
ReturnMaterials = [];
var that = this;
var LastCall = function (ReturnedMaterials) {
    var surfaceMap = ReturnedMaterials[0]; //THREE.ImageUtils.loadTexture( "images/earth_surface_2048.jpg" );
    var normalMap = ReturnedMaterials[1]; //THREE.ImageUtils.loadTexture( "images/earth_normal_2048.jpg" );
    var specularMap = ReturnedMaterials[2]; //THREE.ImageUtils.loadTexture( "images/earth_specular_2048.jpg" );

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


    var globeGeometry = new THREE.SphereGeometry(100.0, SPHERE_SIDES, SPHERE_SIDES);



 mesh = new THREE.Mesh(globeGeometry, decalMaterial);

WestLangley · Accepted Answer · 2013-02-20 23:20:43Z

0

Use this pattern:

var surfaceMap = THREE.ImageUtils.loadTexture( "images/earth_surface_2048.jpg" );

three.js r.56

answered Feb 20, 2013 at 23:20

WestLangley

105k11 gold badges288 silver badges285 bronze badges

3 Comments

David Limkys Over a year ago

Thx il download r56 late but right now im working with 55, can you sop any outher reason this wont work ?

David Limkys Over a year ago

Well i get no erros the mesh just wont render, if i use the old surface mesh i used before it does render so the problom must be in the code i submitted.

WestLangley Over a year ago

This is a complicated shader, and you may have to modify it for your use. Also, you have not shared the rest of your code, or provided a live example. I did, however, answer your original question based on the information you provided.

Collectives™ on Stack Overflow

THREE JS shader lib - Multiple Textures

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related