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