Importing mesh from github

Bugs
1

Hi everyone.
Im importing 3d mesh from github repo but the mesh size is varying when i run and check in localhost. When i upload glb file in Babylon codesand it looks fine but same file i kept in repo and importing then the file height and width is varying.
Any help please.

I have attached screenshot for reference.

mug
This is when i upload file in codesand.

mug3
mug31366×768 43 KB

This is how it looks when i run in localhost, it looks too small.

2

I guess you mean ‘sandbox’ and not ‘codesand’
The issue is your camera in your local app is not placed as you expect it.
In the sandbox, the camera distance to the object is computed so the object is fully visible and takes all possible place on the screen.

You can look at BoundingBox | Babylon.js Documentation , get the bounding volume of you object and move the camera at the extend distance from it.

1 Like
3

Thanks for response Cedric.
Yes i meant to say sandbox.

Here is the source code so far i have impletemented.

import React, { Component } from “react”;
import * as BABYLON from “babylonjs”;
import “babylonjs-loaders”;

var scene;

class BabylonScene extends Component {
constructor(props) {
super(props);
this.state = { useWireFrame: false, shouldAnimate: false };
}

componentDidMount = () => {
// start ENGINE
this.engine = new BABYLON.Engine(this.canvas, true);

//Create Scene
scene = new BABYLON.Scene(this.engine);
scene.useRightHandedSystem = true;
//--Light---
this.addLight();

//--Camera---
this.addCamera();

//--Meshes---
this.addModels();

// Add Events
window.addEventListener("resize", this.onWindowResize, false);

// Render Loop
this.engine.runRenderLoop(() => {
  scene.render();
});

};

componentWillUnmount() {
window.removeEventListener(“resize”, this.onWindowResize, false);
}

onWindowResize = event => {
this.engine.resize();
};

/* Add Lights */
addLight = () => {

// Create a basic light, aiming 0,1,0 - meaning, to the sky.
var light = new BABYLON.HemisphericLight(
  "light1",
  new BABYLON.Vector3(0, 10, 0),
  this.scene
);

};

/* Add Camera */
addCamera = () => {
// ---------------ArcRotateCamera or Orbit Control----------
var camera = new BABYLON.ArcRotateCamera(
“Camera”,
Math.PI / 4,
Math.PI / 4,
4,
BABYLON.Vector3.Zero(),
this.scene
);
camera.inertia = 0;
camera.angularSensibilityX = 250;
camera.angularSensibilityY = 250;

// This attaches the camera to the canvas
camera.attachControl(this.canvas, true);
camera.setPosition(new BABYLON.Vector3(5, 5, 5));

};

/*** Add Models */
addModels = () => {

BABYLON.SceneLoader.ImportMesh("",
"https://raw.githubusercontent.com/pavankulkarni11/3D_Meshes/main/",
"mug_glb_itr4.glb", scene, function (newMeshes) {

    console.log(newMeshes)

    const newTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png")

    console.log(scene.getMeshByName("pollow_poly").material)

    scene.getMeshByName("pollow_poly").material.albedoTexture = newTexture
    scene.createDefaultEnvironment({createGround:false, createSkybox:false})
});
// BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/pavankulkarni11/3D_Meshes/main/","mug_glb_itr4.glb", this.scene);

};
// 3D_Meshes/Photo_Frame_5x5.glb at main · pavankulkarni11/3D_Meshes · GitHub
// BABYLON.SceneLoader.ImportMesh(“”, “https://raw.githubusercontent.com/BabylonJS/Assets/master/meshes/car.glb”, this.scene);
render() {
return (
<canvas
style={{ width: window.innerWidth, height: window.innerHeight }}
ref={canvas => {
this.canvas = canvas;
}}
/>
);
}
}
export default BabylonScene;

4

You should have something like this:

BABYLON.SceneLoader.ImportMesh("", "https://raw.githubusercontent.com/BabylonJS/Assets/master/meshes/car.glb", "", this.scene, (m) => {
    m[1].computeWorldMatrix(true);
    camera.position = new BABYLON.Vector3(0,0,m[1].getBoundingInfo().boundingSphere.radiusWorld);
    camera.setTarget(m[1].getBoundingInfo().boundingSphere.centerWorld)
});
4 Likes