Cube in Babylon.js

Babylon.js Hispano

by Michael Prosser

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.3.0/babylon.js"></script>

<canvas id="texture" width="300" height="100" style="width:300px;height:100px;position:fixed;z-index:9;"></canvas>
<canvas id="main"></canvas>

CSS

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

JavaScript

var canvas = document.getElementById("main");
var engine = new BABYLON.Engine(canvas);
var scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.6,0.6,0.6);

function renderLoop(){

 scene.render();
}
engine.runRenderLoop(renderLoop);

var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0,0,-10),scene);

var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10,10,0),scene);



var ctx = document.getElementById('texture');
if (ctx.getContext) {

	ctx = ctx.getContext('2d');

  //Loading of the home test image - img1
  var img1 = new Image();

  //drawing of the test image - img1
  img1.onload = function () {
    //draw background image
    ctx.drawImage(img1, 0, 0);
    //draw a box over the top
    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
    ctx.fillRect(0, 0, 500, 500);
    
    
    
    // create particle system to mimic the image
var w = 300;
var h = 100;

var particleSystem = new BABYLON.ParticleSystem("particles", w*h, scene);

    particleSystem.particleTexture = new BABYLON.Texture("https://sleekinteractive.com/assets/logo.rough.png", scene);

    particleSystem.emitter = new BABYLON.Vector3(0,0,0); // the starting object, the emitter

    particleSystem.minEmitBox = new BABYLON.Vector3(0, -0.5, 0); // To...

    particleSystem.maxEmitBox = new BABYLON.Vector3(0, -0.25, 0); // To...

    particleSystem.color1 = new BABYLON.Color4(1, 0, 0.2, 1);

    particleSystem.color2 = new BABYLON.Color4(0, 1, 0.2, 1);

    particleSystem.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0);

    particleSystem.minSize = 0.01;

    particleSystem.maxSize = 0.01;

    particleSystem.minLifeTime = 222222225;

    particleSystem.maxLifeTime = 222222226;
	  
	particleSystem.billboardMode = 0;
	  
	particleSystem.minAngularSpeed = 0.1;

    particleSystem.maxAngularSpeed = Math.PI;
	  
	  particleSystem.isBillboardBased = false;
	  
	 particleSystem.emitRate = 10000;

	//particleSystem.manualEmitCount = 10;

   ...