Unable to increase the thickness of PositionGizmo in React-Babylon

Hi,

So I am able to increase the thickness of the position gizmo in one of the examples on forum

https://www.babylonjs-playground.com/#31M2AP#6

var gizmo = new BABYLON.PositionGizmo(utilLayer,10);
gizmo.attachedMesh = sphere;

But the same is not increasing the thickness in my react-babylon project is there a miss somewhere in the API

moveGizmo = new PositionGizmo(utilLayer, 10);

Adding @Cedric our gizmo master to the topic.

I guess the react-babylon is not using a recent version of babylonjs

1 Like

@brianzinn any idea about the next deployment ?

BabylonJS is a peer dependency, so using the version in package.json. In other words, it’s using the version in @nipundavid 's project. Does the utility layer thickness start from a specific version?

Hi below are my dependencies

"dependencies": {
    "@babylonjs/core": "^4.1.0",
    "@babylonjs/gui": "^4.1.0",
    "@babylonjs/inspector": "^4.1.0",
    "@babylonjs/loaders": "^4.1.0",
    "@babylonjs/materials": "^4.1.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "babylonjs": "^4.1.0",
    "babylonjs-gui": "^4.1.0",
    "babylonjs-inspector": "^4.1.0",
    "babylonjs-loaders": "^4.1.0",
    "babylonjs-materials": "^4.1.0",
    "bootstrap": "^4.5.2",
    "dexie": "^3.0.1",
    "log4js": "^6.3.0",
    "node-fetch": "^2.6.0",
    "node-json-transform": "^1.1.1",
    "pretty": "^2.0.0",
    "react-babylonjs": "^2.2.1",
    "react-bootstrap": "^1.3.0",
    "react-fade-in": "^1.1.0",
    "react-loading": "^2.0.3",
    "react-lottie": "^1.2.3",
    "react-reconciler": "^0.25.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "rxjs": "^6.6.2"
  }

regards,
Nipun David

Gizmo thickness landed in master July 20 and following release is 4.2.0-alpha.26 from July 22

1 Like

So, you should remove these dependencies, since you are doubling your dependencies and only need the ES6 ones:

and change your import to:

import * as BABYLON from '@babylonjs/core/Legacy/legacy';

To get the thickness working then upgrade your @babylonjs/* to latest 4.2.

Hi @brianzinn,

thanks for the tip, but there is no official roll out of ver 4.2 on npm

Am I missing something?

regards,
Nipun David

@Cedric, is there any chance that we can change how the gizmos look completely, i mean is there any scope for it in API like in the screenshot below
hqdefault

regards,
Nipun David

We can do anything with the gizmo with some work. Do you have some ideas in particular?

for rotation I have something which I shared above, I mean API should provide developer a feature to add rings on rotation gizmos and move them away or close to the pivot of the object, yes there would be an off set in that case, but yeah that is that I have in mind.

May I can contribute to this feature in Babylon gitHub :sweat_smile:
hqdefault

babylonjs is opensource so you are highly invited to propose changes and do PR.
I’ll be happy to review them :slight_smile:

1 Like

yarn add @babylonjs/core@preview

You can see all the 4.2 versions here:

Hey @brianzinn thanks for the release, but I am getting issues in my project after this update.

index.js:1 BJS - [18:31:03]: Unable to import meshes from blob:http://localhost:3000/d3ad6114-0965-4113-b56e-1102a8da4906: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse
console.<computed> @ index.js:1
Logger._ErrorEnabled @ logger.ts:83
errorHandler @ sceneLoader.ts:639
importMesh @ babylonFileLoader.ts:656
(anonymous) @ sceneLoader.ts:681
dataCallback @ sceneLoader.ts:441
successCallback @ sceneLoader.ts:470
onReadyStateChange @ fileTools.ts:396
XMLHttpRequest.send (async)
WebRequest.send @ webRequest.ts:122
retryLoop @ fileTools.ts:421
requestFile @ fileTools.ts:424
FileTools.RequestFile @ fileTools.ts:460
Scene._requestFile @ scene.ts:4669
manifestChecked @ sceneLoader.ts:477
Database @ database.ts:69
push.../node_modules/@babylonjs/core/Offline/database.js._Engines_engine__WEBPACK_IMPORTED_MODULE_3__.Engine.OfflineProviderFactory @ database.ts:10
SceneLoader._loadData @ sceneLoader.ts:502
SceneLoader.ImportMesh @ sceneLoader.ts:670
(anonymous) @ OnSceneMount.js:89
LoadMeshes @ OnSceneMount.js:87
_Initialize6 @ OnSceneMount.js:44
Initialize @ OnSceneMount.js:281
onSceneMount @ ThreeDViewer.js:76
(anonymous) @ react-babylonjs.js:15
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
(anonymous) @ react-dom.development.js:22699
workLoop @ scheduler.development.js:597
flushWork @ scheduler.development.js:552
performWorkUntilDeadline @ scheduler.development.js:164
index.js:1 BJS - [18:31:03]: Unable to import meshes from https://web-configurator-api-server.herokuapp.com/v2/utility/fp_cursor.glb: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

I am creating React lib and using that lib in my main project.

Please share your thoughts

regards,
Nipun David

The glb file isn’t JSON, so looks like you maybe didn’t side-load the loaders?
import '@babylonjs/loaders';

Make sure you loaders version matches core. With the .glb extension you should have a loader registered for the binary format (via gltf), but to be honest I’ve never tried from a blob. You will need to share your calling code if above doesn’t work.

I made a library recently called react-babylonjs-loaders that handles that and provides fallbacks for Suspense as well. It doesn’t need the main react-babylonjs library (but works with it), but does use babylon-hooks - it only needs context with a scene to work. It’s all in a bit of flux as I’m working on a v3 that is redesigned, but maybe it will be useful for you.

@brianzinn, thanks for getting back

The glb file isn’t JSON, so looks like you maybe didn’t side-load the loaders?
import '@babylonjs/loaders';

models were loading fine before, yes I am loading them as GLB and converting them into blob to save them in browser…then each time when page load I check if they are there in the db if not then I req my api server. I also added the import statement in my file where I am loading meshes but still same issue. Any thoughts?

Make sure you loaders version matches core. With the .glb extension you should have a loader registered for the binary format (via gltf), but to be honest I’ve never tried from a blob. You will need to share your calling code if above doesn’t work.

How to update loader ? current version

    "@babylonjs/core": "^4.2.0-beta.15",
    "@babylonjs/gui": "^4.1.0",
    "@babylonjs/inspector": "^4.1.0",
    "@babylonjs/loaders": "^4.1.0",
    "@babylonjs/materials": "^4.1.0",

I made a library recently called react-babylonjs-loaders that handles that and provides fallbacks for Suspense as well. It doesn’t need the main react-babylonjs library (but works with it), but does use babylon-hooks - it only needs context with a scene to work. It’s all in a bit of flux as I’m working on a v3 that is redesigned, but maybe it will be useful for you.

We can discuss more on this, I can even support you if you need extra pair of hands to code and get it up as soon as possoble :smiley:

regards,
Nipun David

Everything should be using the same version eg in your case 4.2.0-beta.15 but I would recommend beta 16 :wink:

1 Like

You need to yarn add @babylonjs/*@preview where * is loader,core, etc.

The other thing is that you are loading from a blob, so probably the SceneLoader can’t determine the type of file. There is a parameter to supply the file extension - I think you need to send “.glb”. You should be able to repro this in the playground and more people would be able to help, if it’s not the version mismatch or missing fileExtension param.

Thanks @brianzinn, now my gizmos are looking great…

@sebavan how should I install the beta 16 as the command I use us
npm install @babylonjs/loaders@preview

there is no explicit way to load a beta version
your thoughts,

regard,
Nipun David

1 Like