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!
Gabriele
CODE:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon test</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
div {
height: 20px;
}
</style>
<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>
</head>
<body>
<div id="vai">
Remove test highlight
</div>
<div id="vai2">
Apply texture
</div>
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
<script>
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();
pezzi.forEach(settaMateriale);
function settaMateriale(item, index) {
parti.push(item);
//item.material = mayanero;
}
//console.log(pezzi);
/*
const pezzo = newMeshes[0].getChildMeshes()[7];
console.log(pezzo);
//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
//hl.removeMesh(box);
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
//AZIONI--------------
$( document ).ready(function() {
$("#vai").on("click", function(){
console.log( "click!" );
hl.removeMesh(box);
});
$("#vai2").on("click", function(){
console.log( "click2!" );
parti[0].material = mayanero;
parti[1].material = mayanero;
parti[2].material = mayanero;
parti[3].material = mayanero;
});
});
</script>
</body>
</html>