I am new to Babylon.js and I am trying to add a texture to a car model I have. I was successful in adding a diffuseTexture to one of the playground examples but when I add it to the car model, Babylon seems to be selecting a color instead of rendering the full texture as I expect.
var createScene = function () {
// Create a scene.
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
light.diffuse = new BABYLON.Color3(1, 1, 1);
light.specular = new BABYLON.Color3(1, 1, 1);
light.groundColor = new BABYLON.Color3(1, 1, 1);
// Append glTF model to scene.
BABYLON.SceneLoader.LoadAssetContainer("glb/", "truck.glb", scene, function (container) {
// container.materials[12].albedoColor = new BABYLON.Color3(0, 1, 1);
container.materials[12].albedoTexture = new BABYLON.Texture("https://miro.medium.com/max/805/1*2_dN3nx1FOEKnNjvtqno_w.jpeg", scene);
// Also tried diffuseTexture
container.addAllToScene();
});
return scene;
};
Are you sure your truck has texture coordinates applied to it?
Note that your glb file has some validation issues. Try to open it in the Babylon sandbox (https://sandbox.babylonjs.com/) and look at the bottom of the inspector pane.
I took a look at a few other examples and it seems I need to apply it to the mesh rather than the material? If you could provide an example from the docs, tutorial, or an explanation, I would very much appreciate it!
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 4, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
scene.ambientColor = new BABYLON.Color3(1, 1, 1);
//Light direction is up and left
var light = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(-1, 1, 0), scene);
light.diffuse = new BABYLON.Color3(1, 1, 1);
light.specular = new BABYLON.Color3(1, 1, 1);
light.groundColor = new BABYLON.Color3(1, 1, 1);
var material = new BABYLON.StandardMaterial("redMat", scene);
material.diffuseTexture = new BABYLON.Texture("https://miro.medium.com/max/805/1*2_dN3nx1FOEKnNjvtqno_w.jpeg", scene);
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere0", {}, scene);
sphere.material = material;
return scene;
};
UV coordinates are normally created in the modeling software, you won’t be able to do that in Babylon with already existing objects (or it will be very difficult / tedious to say the least).
As @Evgeni_Popov is suggesting, the UV coordinates of the model may be a bit messed up. This PG attempts to load in a UV checkerboard texture, and it looks very distorted:
Unfortunately, this asset will need to be re-unwrapped if you want to apply graphical textures and decals properly to the body. I’d assume that this was created to only allow for flat-color/palette coloring of the chrome, and main body pieces, and easy texturing of the wheel treads
