Text not displaying on model

Hello to everyone,
this is the first time I post online to search a solution to my problems, but I’m really stucked.
I need to display textures (and change them ) on a shoe, but when I try to apply them, they do not display.
You can find the code here: Babylon test
I wrote the full code below.

To attach the texture just click on the text above the model canvas.
The strange thing is that the texture is applied to the zip part of the shoe, but not to the rest. Also it’s working with the cube generated by babylon.js.
Can you help me to understand where is the error?
Thank you very much!


<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Babylon test</title>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        div {
        	height: 20px;
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>
   	<div id="vai">
   		Remove test highlight
   	<div id="vai2">
   		Apply texture
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
	var createScene = function() {
var scene = new BABYLON.Scene(engine, true, { stencil: true });

//gestione texture
coloretest = new BABYLON.StandardMaterial("groundMat");
coloretest.diffuseColor = new BABYLON.Color3(0, 1, 0);
//ground.material = groundMat; //Place the material property of the ground

mayanero = new BABYLON.StandardMaterial("mayanero", scene);
mayanero.diffuseTexture = new BABYLON.Texture("MAYA-NERO.jpg", scene);
//mayanero.diffuseTexture = new BABYLON.Texture("https://upload.wikimedia.org/wikipedia/commons/8/87/Alaskan_Malamute%2BBlank.png", scene);
//mayanero.diffuseTexture.hasAlpha = true;
//mayanero.backFaceCulling = false;
//mayanero.diffuseTexture = new BABYLON.Texture("https://i.imgur.com/Q6i4ZiX.jpg", scene);
//mayanero.isBlocking = false;
//mayanero.specularTexture = new BABYLON.Texture("MAYA-NERO.jpg", scene);
//mayanero.emissiveTexture = new BABYLON.Texture("MAYA-NERO.jpg", scene);
//mayanero.ambientTexture = new BABYLON.Texture("MAYA-NERO.jpg", scene);
//mayanero.diffuseTexture.hasAlpha = false;
//mayanero.backFaceCulling = false;
//const mayanero = new BABYLON.StandardMaterial("mayanero");
//mayanero.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png");

//aggiungo oggetti:
//cubo che poi sarà la nostra scarpa
parti = new Array();
BABYLON.SceneLoader.ImportMesh("", "modelli/", "13.glb", scene, function(newMeshes){
newMeshes[0].scaling.x = 0.5;
newMeshes[0].scaling.y = 0.5;
newMeshes[0].scaling.z = 0.5;
		pezzi = newMeshes[0].getChildMeshes();
		function settaMateriale(item, index) {
		//item.material = mayanero;

     const pezzo = newMeshes[0].getChildMeshes()[7];
     //pezzo.position.y = 0.5;
     pezzo.material = boxMat;


	//const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
	box = BABYLON.MeshBuilder.CreateBox("box", {});
	box.scaling.x = 30;
	box.scaling.y = 30;
	box.scaling.z = 30;
	box.material = mayanero;
	// Add the highlight layer.
	hl = new BABYLON.HighlightLayer("hl1", scene);
	hl.addMesh(box, BABYLON.Color3.Red());

// Add a camera to the scene and attach it to the canvas
const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 300, new BABYLON.Vector3(0, 0, 0));
camera.attachControl(canvas, true);
// Add a lights to the scene
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
//Your Code
  return scene;

    const canvas = document.getElementById("renderCanvas"); // Get the canvas element
    const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
    // Add your code here matching the playground format
    const scene = createScene(); //Call the createScene function
    // Register a render loop to repeatedly render the scene

    engine.runRenderLoop(function () {
    // Watch for browser/canvas resize events
    window.addEventListener("resize", function () {

$( document ).ready(function() {

$("#vai").on("click", function(){
  console.log( "click!" );

$("#vai2").on("click", function(){
  console.log( "click2!" );

parti[0].material = mayanero;
parti[1].material = mayanero;
parti[2].material = mayanero;
parti[3].material = mayanero;




Hi @gabriele
can you supply a playground ?

it can be difficult to help without access to live code editing and inspector :slight_smile:

As a side-note,
double check that the mesh parts which are supposed to be textured have working uvs.
i ran a quick check in console

scene.meshes.forEach(function(mesh){console.log( mesh.getVerticesData(‘uv’) ) })

and some results are 0,0,0,0,0,0… but i have no idea if it’s the mesh parts you’re trying to texture


It was the UV layer! Thank you! I managed to activate it with cinema 4d and now it’s working!

1 Like