Gui framework based on BABYLON.GUI?

grayflow · January 7, 2020, 3:33am

BABYLON.GUI is low level, do we have something like react based on it?

brianzinn · January 7, 2020, 4:45am

I’m not aware of any declarative way to build GUI with a supported babylonjs framework. There is a react renderer, since you asked specifically about react. I’m linking to my own project storyboard here - click on the boxes and a babylon.GUI is generated and displayed:
https://brianzinn.github.io/react-babylonjs/?path=/story/with-vr--simple-2d-gui

You can see the source code here:

github.com

brianzinn/react-babylonjs/blob/master/stories/babylonjs/2-withVR/with2DGUI.stories.js

import React, { Component } from 'react'
import { storiesOf } from '@storybook/react'
import { Vector3, Color3, Color4, Animation, ExponentialEase, EasingFunction } from '@babylonjs/core'
import { Control } from '@babylonjs/gui'
import { Engine, Scene, Button } from '../../../dist/react-babylonjs.es5'

import '../../style.css'

export class With2DUI extends Component {
  constructor () {
    super()

    this.state = {
      plane: undefined,
      showModal: false,
      clickMeshName: undefined,
      allowedMeshes: [
        'red box',
        'blue box',
        'green box'

This file has been truncated. show original

If you’re not looking to use React and you want to build your own declarative loader (like JSON) let me know and I can walk through some of the gotchas. Main thing is to get the order right for adding controls, especially in 3D GUI where there is a manager. Also, declaratively adding keyboard, transformNode, shadows, etc. had a few tricks. Cheers.

Null · January 7, 2020, 8:00am

Perhaps the XML loader might help? Use the Xml Loader - Babylon.js Documentation . It simply allows to separate the layouts from business logic + some bindings so nothing fancy, but maybe it fits for your needs.

Topic		Replies	Views
How to use HTML react GUI Questions react , gui	6	1033	April 14, 2022
Any way to learn how to integrate React with Babylon? Questions react	7	1551	January 26, 2023
Mixing vanilla js and react questions Questions	4	1063	November 2, 2022
Babylon UI - ReactJS DOM or 2D Canvas? Questions	3	1835	January 7, 2019
GUI with tree view Questions	8	1526	July 7, 2019

Gui framework based on BABYLON.GUI?

Related Topics