Can we render threejs component and babylonjs component in the same scene or on same canvas ??If possible can you provide some demo??
To make this work, you would have to share a WebGL rendering context across both renderers. Since three.js does not know how BabylonJS manages the WebGL state and vice verca, I don’t recommend mixing WebGL engines. This can quickly lead to undefined behavior.
1 Like
The chance of this Frankenstein kind of idea to work without a lot effort or at all is pretty low like @Mugen87 pointed out. Asides i’m not sure if there would be any reason to attempt this, could you explain what you want to archive?
It also depends on what exactly you mean with “component”, as THREE is designed more flexible than Babylon for example, you can quite easy use parts of THREE for other systems such as the Object3D base class for a scene hierarchy. But i wouldn’t start mixing the WebGL state as you can easily run into conflicts or leaks.
1 Like
I have create a project in react-babylonjs, now I need to do same a similar project using react- three-fibre. So I was wondering to reuse my component if possible.
Do you mean you want to render using both Babylon and three.js at the same time, on the same web page?
Or do you mean that you want to switch to three.js and reuse code that you wrote for the Babylon React component?
Yes , If it is possible
1 Like
Which of the two things do you want to do?
I want to render using both Babylon and three.js at the same time, on the same web page.
You can render a Babylon canvas and a THREE canvas, but mixing them doesn’t really make sense depends on what exactly you want to mix in detail and would require a lot work that might not even work in the end. You can port your project clean to THREE though, i would rather recommend than mixing 2 frameworks for the same purpose.
Could stacking two canvases work?
<div id="graphics">
<canvas id="threejs"/>
<canvas id="babylonjs"/>
</div>
If this can help : https://github.com/monsieurbadia/d2k.js
to do layerization between THREE and BABYLON from a json config file
you can see example of the config file you have to follow here
window.addEventListener( 'DOMContentLoaded', _ => {
const operations = [
fetch( 'my-endpoint/scene/babylon' ).then( response => response.json() ),
fetch( 'my-endpoint/api/scene/three' ).then( response => response.json() )
];
Promise.all( operations ).then( data => {
const BABYLONscene = data[ 0 ].scene;
const THREEscene = data[ 1 ].scene;
const THREEstarter = d2k
.onstarter( { canvas: 'viewRendering' } )
.use( THREE )
.withCamera( THREEscene.camera )
.withRenderer( THREEscene.renderer )
.withMesh( THREEscene.mesh )
.withLight( THREEscene.light )
.withScene( THREEscene.scene )
.composify( THREEscene.composify )
.value();
const BABYLONstarter = d2k
.onstarter( { canvas: 'viewRendering' } )
.use( BABYLON )
.withEngine( BABYLONscene.engine )
.withScene( BABYLONscene.scene )
.withCamera( BABYLONscene.camera )
.withLight( BABYLONscene.light )
.withMesh( BABYLONscene.mesh )
.composify( BABYLONscene.scene )
.value();
d2k
.onrender( {
renderer: THREEstarter.renderer.myRendererName,
scene: THREEstarter.scene.mySceneName,
camera: THREEstarter.camera.myCameraName
}, {
engine: BABYLONstarter.engine.myEngineName,
scene: BABYLONstarter.scene.mySceneName
} );
THREEstarter.mesh.myMeshName.onrender( time => {
THREEstarter.mesh.myMeshName.rotation.x -= time;
THREEstarter.mesh.myMeshName.rotation.y -= time;
} );
BABYLONstarter.mesh.myMeshName.onrender( time => {
BABYLONstarter.mesh.myMeshName.rotation.x += time + 0.009;
BABYLONstarter.mesh.myMeshName.rotation.y += time + 0.009;
} );
} );
}, false );
Hope it will help you