JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://www.aninoob.com/2.0/games/framework.editor.3.1/js/dependencies/babylon.js"></script>
<canvas id="renderCanvas" touch-action="none"></canvas>

CSS

html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }

JavaScript

var start = { x: 0, y: 0, z: 0 };
var segments = 3;
var width = 0;
var widthInc = 0.2;
var height = 0;
var heightInc = 0.4;
var depth = 0;
var depthInc = 0.4;

var pointer = { x: 0, y: 0, z: 0 };

var positions = Array();

var i = 0;

while(i < 100){

	positions.push({ x: pointer.x, y: pointer.y, z: pointer.z });
	positions.push({ x: pointer.x-widthInc, y: pointer.y+heightInc, z: pointer.z+depthInc } );
	positions.push({ x: pointer.x, y: pointer.y+heightInc, z: pointer.z+depthInc } );
  
  positions.push({ x: pointer.x, y: pointer.y, z: pointer.z });
	positions.push({ x: pointer.x+widthInc, y: pointer.y+heightInc, z: pointer.z+depthInc } );
	positions.push({ x: pointer.x, y: pointer.y+heightInc, z: pointer.z+depthInc } );
  
  pointer.y+=heightInc;
  
  i++;

}

console.log(positions);

var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D 

var createScene = function () {

    // Create the scene space
    var scene = new BABYLON.Scene(engine);
    
    scene.clearColor = new BABYLON.Color3(0,0,0);

    // Add a camera to the scene and attach it to the canvas
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Add lights to the scene
    
    var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

    // This is where you create and manipulate meshes
   var mesh_1 = new BABYLON.MeshBuilder.CreateTube("tube", { path: Array( new BABYLON.Vector3(5, 0, 0),new BABYLON.Vector3(0, 1, 0.1),new BABYLON.Vector3(-4, 6, 0.2)), radius: 0.1, tessellation: 4, arc: 1 }, scene);
mesh_1.position = new BABYLON.Vector3(0,0,0);
mesh_1.rotation = new BABYLON.Vector3(0,0,0);
mesh_1.scaling = new BABYLON.Vector3(1,1,1);
mesh_1.isVisible = true;
mesh_1.id = "tube";

    return scene;

};

createScene();