Using React with Blender4Web
18 February 2018 15:53
Hello,
Does anyone have an example of using React with blender4web?
I have exported my scene to JSON and added it to my project, but can't get it to load in the Iframe.
Any advice would be great.
Does anyone have an example of using React with blender4web?
I have exported my scene to JSON and added it to my project, but can't get it to load in the Iframe.
Any advice would be great.
19 February 2018 12:43
Hello,Hello and welcome to the forum!
Does anyone have an example of using React with blender4web?
I have exported my scene to JSON and added it to my project, but can't get it to load in the Iframe.
Any advice would be great.
We started a little discussion in this thread https://www.blend4web.com/en/forums/topic/4177/
19 February 2018 18:36
Thanks for the reply.
I have been following this tutorial and got a scene working https://www.blend4web.com/en/community/article/408/.
After that, I built an app using React and a node js backend. The code I am using is pretty similar, but when it comes to calling load ( this.load in react) I always get a cannot read property undefined.
I'm thinking it could be something to do with passing a bad path across.
The link you provided gives me an access denied 403
I have been following this tutorial and got a scene working https://www.blend4web.com/en/community/article/408/.
After that, I built an app using React and a node js backend. The code I am using is pretty similar, but when it comes to calling load ( this.load in react) I always get a cannot read property undefined.
I'm thinking it could be something to do with passing a bad path across.
init_cb(canvas_elem, success) {
if (!success) {
console.log("b4w init failure");
return;
}
m_preloader.create_preloader();
// ignore right-click on the canvas element
canvas_elem.oncontextmenu = function (e) {
e.preventDefault();
e.stopPropagation();
return false;
};
//here is the error
this.load();
}
load() {
m_data.load(APP_ASSETS_PATH + "dinburgh.json", this.load_cb, this.preloader_cb);
}
preloader_cb(percentage) {
m_preloader.update_preloader(percentage);
}
load_cb(data_id, success) {
The link you provided gives me an access denied 403
28 February 2018 07:39
I had to wrap the init in a function, B4W dev's pointed out that there is a bug in react where it tries to load twice.
Then at the end export the init function
export { b4w_app_init };
//Note: the Else is if you hit refresh in the browser.
const b4w_app_init = () => {
if (!ALREADY_RUNNING) {
ALREADY_RUNNING = true;
m_app.init({
canvas_container_id: "b4w",
callback: init_cb,
autoresize: true,
pause_invisible:true,
physics_enabled: true
});
} else {
m_data.unload();
m_app.init({
canvas_container_id: "b4w",
callback: init_cb,
autoresize: true,
pause_invisible:true
})
}
};
Then at the end export the init function
export { b4w_app_init };
//Note: the Else is if you hit refresh in the browser.
28 February 2018 07:42
code in App.js
import { b4w_app_init} from './b4wPage';
componentDidMount() {
b4w_app_init();
}
render() {
return (
<div className="b4w" id="b4w"></div>
);
}
}
28 February 2018 07:48
check attached, voice enabled game demo using react and B4W ;)
28 February 2018 10:54
check attached, voice enabled game demo using react and B4W ;)
Very interesting
Alexander (Blend4Web Team)
twitter
28 February 2018 19:24
Ah right I see, that's really interesting.
I got it to work using the React lifecycle hooks in one component, but there is an unusual bug which causes the app to restart the first couple times I run the WebGL component.
Having read your second comment though I'm almost sure that's what happens with mine.
Will have to give this a try - here is a look at how I got it to work.
https://github.com/JohnDun89/MyDeveloperReactSite/blob/master/client/src/containers/webGl.js
I got it to work using the React lifecycle hooks in one component, but there is an unusual bug which causes the app to restart the first couple times I run the WebGL component.
Having read your second comment though I'm almost sure that's what happens with mine.
Will have to give this a try - here is a look at how I got it to work.
https://github.com/JohnDun89/MyDeveloperReactSite/blob/master/client/src/containers/webGl.js