How can i use a base 64 string as a normal map?

Viewed 168

the title explains it pretty much. I have a normal map encoded in base 64 and I want to use it on a model. I have been trying some examples that I found online but to no avail.

var curObj = mesh.getObjectByName(object + "_low")
var image = new Image()
var texture = new THREE.Texture(image)
image.src = reader.result
curObj.material.normalMap = image
image.onload = function() { texture.needsUpdate = true }

Object is a string that is the name of the part that I want to apply the normal map to. The base 64 string is reader.result

2 Answers

You want to assign the texture as a normalMap, not the image. Additionally, I would create the texture after the image has finished loading, not before:

var image = new Image();

image.onload = function() {
    var curObj = mesh.getObjectByName(object + "_low");
    var texture = new THREE.Texture(image);
    curObj.material.normalMap = texture; // Make sure this is the texture.
}

// I believe .src needs to be assigned after .onload has been declared
image.src = reader.result;

As an option, try this approach:

var curObj = mesh.getObjectByName(object + "_low");
var texture = new THREE.TextureLoader().load(reader.result);
curObj.material.normalMap = texture;
curObj.material.needsUpdate = true; // just in case, if the material didn't have `normalMap` before
Related