Need help with First Step Tutorial: How to swap the Yeti's mesh to something else (.glb file)? (SOLVED)

Content creation (3dsMax, Maya, Blender, glTF)
,
1

Hello babylon.js folks!

I need some advice to swap the mesh from the First Step Tutorial:

Link A (The Very First Step | Babylon.js Documentation)

Link B (https://playground.babylonjs.com/#2KRNG9#4).

Could you help me?

I’m trying to swap the Yeti’s mesh for a Suzanne’s mesh (The monkey mesh that is the Blender’s mascot).

But I don’t know how to fill correctly the web address for the Suzanne…
I hosted it at https://prototipe.com.br/glb/su.glb

Or maybe it some other parameter?

Here is the code snippet where I was trying different combinations (It’s working, it loads and run the default checkers ground and the orbit’s logic but doesn’t display the monkey):

var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;

// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
let groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
ground.material = groundMaterial;
let groundTexture = new BABYLON.Texture(Assets.textures.checkerboard_basecolor_png.rootUrl, scene);
ground.material.diffuseTexture = groundTexture;

//BABYLON.SceneLoader.ImportMesh("", Assets.meshes.Yeti.rootUrl, Assets.meshes.Yeti.filename, scene, function(newMeshes){
BABYLON.SceneLoader.ImportMesh("su", "https://prototipe.com.br/glb/su.glb", "su.glb", scene, function(newMeshes){  
    newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
});

return scene;

};

// prototipe.com.br/glb/BDemoiTectonicBlender360.glb

// BABYLON.SceneLoader.ImportMesh(“meshName”, “url to the mesh parent directory”, “Mesh filename.fileextension”, scene, function(newMeshes){

// https://playground.babylonjs.com/#2KRNG9#4

Any hint is appreciated.

Thank you very much for your time and patience,

Greetings,

Ortiz

Blender 3.6.0 360 hello world babylonjs babylon.js

2

If you can’t import mesh in your pg that is because there is CORS error. Try to import mesh locally

3 Likes
3

If you would open the console you’ll see the CORS error
image

If you want to use Playground try to upload your assets to some host which supports CORS policy, like described here - Using External Assets In the Playground | Babylon.js Documentation

I changed your example just to show how to load models from Github - https://playground.babylonjs.com/#2KRNG9#2794

3 Likes
4

Thanks a lot Guys!

The final block is this one:

var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 10, BABYLON.Vector3.Zero(), scene);

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;

// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
let groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);
ground.material = groundMaterial;
let groundTexture = new BABYLON.Texture("textures/floor.png", scene);
ground.material.diffuseTexture = groundTexture;

BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/chicortiz/glb/main/", 'su.glb', scene, function(newMeshes){
});

return scene;

};

Published at: prototipe.com.br/html_3d/suzannebabylonjs.html

Blender 3.6.0 360 hello world babylonjs babylon.js

2 Likes