d2k.js - layerization - hello world (babylon.js x three.js)

d2k.js is a primitive builder that will helps you to create 3d scene in an intuitive and functional way. github: https://github.com/monsieurbadia/d2k.js

by _monsieurbadia

HTML

<script src="https://raw.githack.com/monsieurbadia/d2k.js/master/build/d2k.js"></script>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<canvas id="viewRendering" touch-action="none"></canvas>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  position: absolute;
}

JavaScript

window.addEventListener( 'DOMContentLoaded', function () {

        var THREEstarter = d2k
          .onstarter( { canvas: 'viewRendering' } )
          .use( THREE )
          .withCamera( {
            name: 'current',
            config: {
              args: [ 75, window.innerWidth / window.innerHeight, 0.1, 1000 ],
              position: [ 0, 0, 100 ],
              type: 'perspective'
            }
          } )
          .withMesh( {
            name: 'myMeshName',
            config: [ {
              geometry: {
                args: [ 20, 20, 20 ],
                type: 'box-buffer'
              },
              material: {
                type: 'mesh-normal'
              },
              position: [ -20, 0, 0 ],
            },
            {
              geometry: {
                args: [ 20, 20, 20 ],
                type: 'box'
              },
              material: {
                type: 'mesh-normal'
              },
              position: [ 20, 0, 0 ],
            } ]
          } )
          .withRenderer( {
            name: 'current',
            config: {
              autoClear: true,
              pixelRatio: window.devicePixelRatio,
              size: [ window.innerWidth, window.innerHeight ],
            }
          } )
          .withScene( {
            name: 'mySceneName'
          } )
          .composify( {
            config: {
              start: false,
              scene: {
                main: 'mySceneName',
              },
              mesh: [ { name: 'myMeshName', sceneParent: 'main' } ],
              camera: {
                main: 'current',
              },
              renderer: 'current'
            }
          } )
          .value();

        var BABYLONstarter = d2k.onstarter( { canvas: 'viewRendering' } )
          .use( BABYLON )
          .withEngine( {
            name: 'current'
          } )
          .withScene( {
            name: 'mySceneName',
            config: {
              autoClear: false
 ...