BabylonJS and ThreeJS - start project
Project to fork to test BabylonJS and/or ThreeJS
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
<script src="https://rawgit.com/BabylonJS/Babylon.js/v1.14/babylon.1.14.js"></script>
<canvas id="renderCanvas"></canvas>
CSS
#renderCanvas {
width: 100%;
height: 50%;
min-height: 50%;
}
JavaScript
// BabylonJS
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
var cube = BABYLON.Mesh.CreateBox("Box", 2, scene);
var alpha = 0;
cube.scaling.x = 0.5;
cube.scaling.z = 3.5;
scene.beforeRender = function() {
cube.rotation.x = alpha;
cube.rotation.y = alpha;
alpha += 0.01;
};
// Material
var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.5);
cube.material = material;
// Render loop
var renderLoop = function () {
scene.render();
};
// Launch render loop
engine.runRenderLoop(renderLoop);
}
// ThreeJS
var sceneTJS = new THREE.Scene();
var cameraTJS = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight / 2 );
//document.body.appendChild( renderer.domElement );
renderer.domElement = document.getElementById("renderCanvas");
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var materialTJS = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cubeTJS = new THREE.Mesh( geometry, materialTJS );
sceneTJS.add( cubeTJS );
cameraTJS.position.z = 5;
cubeTJS.scale.x = 0.5;
cubeTJS.scale.z = 3.5;
var render = function () {
requestAnimationFrame( render );
cubeTJS.rotation.x += 0.1;
cubeTJS.rotation.y += 0.1;
cubeTJS.rotation.x = alpha;
cubeTJS.rotation.y = alpha;
renderer.render(sceneTJS, cameraTJS);
};
render();