Search code examples
three.jstexture-mappingrender-to-texture

threejs personal uvs dont work when i change texture


When I load the model with a custom uvs in the JavaScript it's working fine when I load the model:

var loader=new THREE.JSONLoader();
    loader.load(
    name .js',
    function ( geometry, materials ) {
        var material = new THREE.MeshFaceMaterial( materials );
        var object = new THREE.Mesh( geometry, material );
        object.position.y = -10;
        object.name = name; 
        view3D.scene.add( object );
    }, onProgress, onError) 

I create a new texture with:

function CreateTextureMaterial(ImageName){
    var Texture = new THREE.ImageUtils.loadTexture('texture/'+ImageName); 
    var Material = new THREE.MeshBasicMaterial({ 
    map:Texture});
    return Material;
}

and I load it on the model:

function ChangeTexture(ObjectName, TextureMaterial){
    obj = scene.getObjectByName(ObjectName);
    obj.material = TextureMaterial;
}

It doesn't work as I expect - it loads with default uvs set but not the one of the file. I tried to use:

var obj = scene.getObjectByName(ObjectName);
var Texture = new THREE.ImageUtils.loadTexture('texture/'+ImageName); 
var Material = new THREE.MeshBasicMaterial({ 
map:obj.geomerty.faceVertexUvs});
obj.material=Material;

after I cant see anything. What do I need to do?


Solution

  • Because MeshFaceMaterial is kinda collection of materials, and not the same as just a single material such as an instance of MeshBasicMaterial.

    Also, you have to apply image texture for map.

    You can do like this instead.

    var texture = new THREE.ImageUtils.loadTexture('texture/'+ImageName); var myBasicMaterial = new THREE.MeshBasicMaterial({ map: texture }); obj.material.materials[ 0 ] = myBasicMaterial;