[SOLVED] How can I set texture to mesh exported from Blender (GLTF)

Questions
,
1

Hello,

I didn’t set the materials in Blender to my model. I’ve created a simple cuboid for testing purposes. I know I have access to materials from my mesh and I can apply them via js. I can change mesh color, size etc. but I struggle with adding a texture map.

After aplying map mesh seems to be a little bit darker only.
image

Here’s the code:

var scene, renderer;
var camera;
var mesh;
var meshFloor;

function init() {
    
    scene = new THREE.Scene(); 
    
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.5, 1000 ); 
    camera.position.z = 20; 
    camera.position.y = 0; 
    camera.position.x = 0; 

    function renderScene(){ renderer.render( scene, camera ); }
	renderCalls.push(renderScene);

    var controls = new THREE.OrbitControls( camera );

	controls.rotateSpeed = 0.3;
	controls.zoomSpeed = 0.9;

	controls.minDistance = 3;
	controls.maxDistance = 20;

	controls.minPolarAngle = 0; // radians
	controls.maxPolarAngle = Math.PI /2; // radians

	controls.enableDamping = true;
	controls.dampingFactor = 0.05;

	renderCalls.push(function(){
	  controls.update()
	});

	//Renderer

    renderer = new THREE.WebGLRenderer({ antialias: true }); 
    renderer.setSize( window.innerWidth, window.innerHeight ); 
    document.body.appendChild( renderer.domElement ); 
    renderer.setClearColor(0xffffff, 1);
    renderer.gammaOutput = true;
    
    // Textures 
	var textureLoader = new THREE.TextureLoader();
	var map =  textureLoader.load("somemap.png");

    //Light
    var light = new THREE.DirectionalLight("#ffffff", 0.2);
    var pointLight = new THREE.PointLight("#ffffff", 0.2);
    var pointLightBack = new THREE.PointLight("#ffffff", 0.2);
    var ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
    light.position.set( 0, -70, 100 ).normalize();
    pointLight.position.set(0,-40,300);
    pointLightBack.position.set(0,-40,-100);

    scene.add(light);
    scene.add(pointLight);
    scene.add(pointLightBack);
    scene.add(ambientLight);

    //Floor
    meshFloor = new THREE.Mesh(
    	new THREE.PlaneGeometry(40,40,40,40),
    	new THREE.MeshPhongMaterial({color:0xff0000})
    );

    meshFloor.rotation.x -= Math.PI/2;
    meshFloor.position.y = -10;
    meshFloor.receiveShadow = true;
    scene.add(meshFloor);

    //Blender model
    var loader = new THREE.GLTFLoader();

    // Load a glTF resource
    loader.load(
        // resource URL
        'simpleDoor.glb',
        // called when the resource is loaded
        function ( gltf ) {

                mesh = gltf.scene.children[0];
                mesh.material = new THREE.MeshPhongMaterial({
                    map: map,
                    color: 0xff00ff,
                });

			    scene.add( mesh );

        },
        // called when loading is in progresses
        function ( xhr ) {
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {
            console.log( 'An error happened' );
        }
    );

    render();   
}


var renderCalls = [];
function render () {
  requestAnimationFrame( render );
  renderCalls.forEach((callback)=>{ callback(); });
}

window.addEventListener('DOMContentLoaded', init);

Best regards

1 Like
2

When manually adding a texture to a glTF asset, you have to modify the texture encoding and orientation like mentioned in this doc page (section Textures):

https://threejs.org/docs/index.html#examples/loaders/GLTFLoader

The code for this looks like so in your case:

var map =  textureLoader.load("somemap.png");

// If texture is used for color information, set colorspace.
map.encoding = THREE.sRGBEncoding;

// UVs use the convention that (0, 0) corresponds to the upper left corner of a texture.
map.flipY = false;
6 Likes
3

That was it. Thank you I am grateful for your help.

Also I forgot to made uv mapping in Blender which was my second mistake.