Noob help putting material on model

Questions
1

I’m a beginner. I can load the gltf file but i can’t put this texture on it. What am I doing wrong?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<style>
canvas {height:100%; width:100%;}
</style>

<body>
</body>
<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>



<canvas id="renderCanvas"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);

var createScene = function() {
	var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2,  Math.PI / 4, 5, BABYLON.Vector3.Zero(), scene);
	camera.attachControl(canvas, true);

	var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);



	 BABYLON.SceneLoader.AppendAsync("", "http://ssgsales.com/renderer/_Playground/3d/FLAG_3D.gltf", scene).then(function (scene) {
        scene.createDefaultCameraOrLight(true, true, true); 
     });

	var materialVar = new BABYLON.StandardMaterial("materialVar", scene);
	var texture = new BABYLON.Texture("http://ssgsales.com/renderer/_Playground/3d/pv.svg", scene);
	materialVar.diffuseTexture = texture;
	scene.material = materialVar;

	return scene;
};



var scene = createScene();
engine.runRenderLoop(function () {
    if (scene) {
        scene.render();
    }
});
</script>
</html>
2

This is what I see. I don’t see the svg texture on.

http://ssgsales.com/renderer/_Playground/3d/default.php

3

Hello and welcome to BJS,

What I can see here is that you are attaching your material to the scene. You have to set it on your mesh.
If you want to create your material in BJS and assign it to an imported mesh, you have to:

  1. create the material before appending the mesh (or you can do during but is best to do before so the mat is already ready on asset import
  2. Next (on or after mesh load), you would do something like this:
    scene.getMeshByID(“myMesh”).material = myMat;

There’s a fun quick little video tutorial on this subject here:

4

I believe you would like to see something like

image
image1920×1080 319 KB

You’ll need to convert your texture from svg to png or jpg.
Then inside the callback use something like (as you see, your mesh for texturing has the name “TOP”)
scene.getMeshByID(“TOP”).material = myMat;

You can also do the same in the Sandbox with the help of Inspector and then save the result as GLB file.
Also, I would recommend to get rid from unused nodes like Point.001, also seems you don’t need here to export light(s) and camera. Do you use default Blender GLTF exporter?