haehn/index.html

## index.html
<html>
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

    <style>
      html, body {
        background-color: #000;
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden !important;
      }
      #r1 {
        width:50%;
        height:100%;
        float: left;
      }
      #r2 {
        width:50%;
        height:100%;
        float:left;
      }
    </style>

    <script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
    <script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>

    <script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
    <script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
    <script type="text/javascript">

      var r,c;
      var scene, camera, renderer, ambientLight, light, cube;

      window.onload = function() {

        // XTK
        r = new X.renderer3D();
        r.container = 'r1';
        r.init();

        c = new X.cube();
        r.add(c);

        r.render();


        // Three.js
        r2 = document.getElementById('r2');

        scene = new THREE.Scene();

        var fov = 75;
        var ratio = r2.clientWidth / r2.clientHeight;
        var zNear = 1;
        var zFar = 10000;
        camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
        camera.position.set( 0, 0, 100);

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize( r2.clientWidth, r2.clientHeight );
        r2.appendChild( renderer.domElement );

        ambientLight = new THREE.AmbientLight();
        scene.add( ambientLight );

        light = new THREE.DirectionalLight( 0xffffff, 5.0 );
        light.position.set( 10, 100, 10 );
        scene.add( light );

        // now we add the cube
        var geometry = new THREE.BoxBufferGeometry( 20, 20, 20);
        var material = new THREE.MeshStandardMaterial({ color: 0xffffff });
        cube = new THREE.Mesh( geometry, material);
        scene.add(cube);

        controls = new THREE.TrackballControls( camera, r2 );

        animate();


        // GUI
        var controller = {
          'rotateX': function() {
            c.transform.rotateX(20);
            cube.rotateX(20);
          },
          'rotateY': function() {
            c.transform.rotateY(20);
            cube.rotateY(20);
          },
          'rotateZ': function() {
            c.transform.rotateZ(20);
            cube.rotateZ(20);
          },
          'add new': function() {

            c2 = new X.cube();
            c2.center = [50, 50, 50];
            r.add(c2);

            cube2 = new THREE.Mesh( geometry, material);
            cube2.position.set(50, 50, 50);
            scene.add(cube2);

          },
          'threejs_color': 0xffffff

        };

        var gui = new dat.GUI();
        var cube1 = gui.addFolder('XTK Cube');
        cube1.add(c, 'visible');
        cube1.add(c, 'opacity', 0, 1);
        cube1.addColor(c, 'color');
        cube1.open();


        var cube2 = gui.addFolder('Three.js Cube');
        cube2.add(cube, 'visible');
        cube2.add(cube.material, 'opacity', 0, 1).onChange( function() {
          cube.material.transparent = true;
        });
        cube2.addColor(controller, 'threejs_color').onChange( function() {
                     cube.material.color.set( controller.threejs_color );
                   } );
        cube2.open();

        var both = gui.addFolder('Both Cubes');
        both.add(controller, 'rotateX');
        both.add(controller, 'rotateY');
        both.add(controller, 'rotateZ');
        both.add(controller, 'add new');
        both.open();


      };

      function animate() {

        requestAnimationFrame( animate );

        controls.update();
        renderer.render( scene, camera );

      };

    </script>


  </head>

  <body>
    <div id='r1'></div>
    <div id='r2'></div>
  </body>

</html>
	<html>
	<head>
	<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
	<meta content="utf-8" http-equiv="encoding">

	<style>
	html, body {
	background-color: #000;
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden !important;
	}
	#r1 {
	width:50%;
	height:100%;
	float: left;
	}
	#r2 {
	width:50%;
	height:100%;
	float:left;
	}
	</style>

	<script type="text/javascript" src="https://get.goXTK.com/xtk_edge.js"></script>
	<script type="text/javascript" src="https://get.goXTK.com/xtk_xdat.gui.js"></script>

	<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
	<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
	<script type="text/javascript">

	var r,c;
	var scene, camera, renderer, ambientLight, light, cube;

	window.onload = function() {

	// XTK
	r = new X.renderer3D();
	r.container = 'r1';
	r.init();

	c = new X.cube();
	r.add(c);

	r.render();



	// Three.js
	r2 = document.getElementById('r2');

	scene = new THREE.Scene();

	var fov = 75;
	var ratio = r2.clientWidth / r2.clientHeight;
	var zNear = 1;
	var zFar = 10000;
	camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
	camera.position.set( 0, 0, 100);

	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setSize( r2.clientWidth, r2.clientHeight );
	r2.appendChild( renderer.domElement );

	ambientLight = new THREE.AmbientLight();
	scene.add( ambientLight );

	light = new THREE.DirectionalLight( 0xffffff, 5.0 );
	light.position.set( 10, 100, 10 );
	scene.add( light );

	// now we add the cube
	var geometry = new THREE.BoxBufferGeometry( 20, 20, 20);
	var material = new THREE.MeshStandardMaterial({ color: 0xffffff });
	cube = new THREE.Mesh( geometry, material);
	scene.add(cube);

	controls = new THREE.TrackballControls( camera, r2 );

	animate();




	// GUI
	var controller = {
	'rotateX': function() {
	c.transform.rotateX(20);
	cube.rotateX(20);
	},
	'rotateY': function() {
	c.transform.rotateY(20);
	cube.rotateY(20);
	},
	'rotateZ': function() {
	c.transform.rotateZ(20);
	cube.rotateZ(20);
	},
	'add new': function() {

	c2 = new X.cube();
	c2.center = [50, 50, 50];
	r.add(c2);

	cube2 = new THREE.Mesh( geometry, material);
	cube2.position.set(50, 50, 50);
	scene.add(cube2);

	},
	'threejs_color': 0xffffff

	};

	var gui = new dat.GUI();
	var cube1 = gui.addFolder('XTK Cube');
	cube1.add(c, 'visible');
	cube1.add(c, 'opacity', 0, 1);
	cube1.addColor(c, 'color');
	cube1.open();


	var cube2 = gui.addFolder('Three.js Cube');
	cube2.add(cube, 'visible');
	cube2.add(cube.material, 'opacity', 0, 1).onChange( function() {
	cube.material.transparent = true;
	});
	cube2.addColor(controller, 'threejs_color').onChange( function() {
	cube.material.color.set( controller.threejs_color );
	} );
	cube2.open();

	var both = gui.addFolder('Both Cubes');
	both.add(controller, 'rotateX');
	both.add(controller, 'rotateY');
	both.add(controller, 'rotateZ');
	both.add(controller, 'add new');
	both.open();


	};

	function animate() {

	requestAnimationFrame( animate );

	controls.update();
	renderer.render( scene, camera );

	};

	</script>


	</head>

	<body>
	<div id='r1'></div>
	<div id='r2'></div>
	</body>

	</html>