evidanary · August 29, 2015 14:09
diff --git a/basic.webgl.html b/basic.webgl.html
 # Example of webgl rendered with orbitcontrols
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>Vorcel</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script src="js/jquery.js"></script>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>

    <script>
      var renderer, scene, camera, stats;
      var sphere, uniforms, attributes;
      var noise = [];

      var WIDTH = window.innerWidth;
      var HEIGHT = window.innerHeight;

      init();
      render();
      animate();

      function init() {
        //Create Page Elements (basic)
        container = document.createElement( 'div' );
        document.body.appendChild( container );

        //Create page Header Elements (basic)
        var info = document.createElement( 'div' );
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = '<strong>Vorcel</strong>';
        container.appendChild( info );

        //Generate the scene (basic)
        scene = new THREE.Scene();
        //scene.fog = new THREE.FogExp2( 0xcccccc, 0.0002 );

        // Lights
        var ambientLight = new THREE.AmbientLight( 0x606060 );
        scene.add( ambientLight );
        var directionalLight = new THREE.DirectionalLight( 0xffffff );
        directionalLight.position.set( -1, 0.75, 0.5 ).normalize();
        scene.add( directionalLight );


        //Create Camera (basic)
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
        //initialize the camera position at startup
        camera.position.x = 500;
        camera.position.y = -500;
        camera.position.z = 500;
        camera.lookAt( scene.position );

        //Set the Controls (basic)
        controls = new THREE.OrbitControls( camera );
        controls.damping = 0.5;
        //controls.target = new THREE.Vector3(0,0,0);

        //Add Object to the scene (basic)
        var geometry = new THREE.SphereGeometry( 50, 50, 50 );
        var material = new THREE.MeshLambertMaterial( { color: 0xfeb74c, ambient: 0x00ff80 } );
        var sphere = new THREE.Mesh( geometry, material );
        sphere.position.x = 0;
        sphere.position.y = 0;
        sphere.position.z = 0;
        scene.add( sphere );


        //Renderer (basic)
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setClearColor( 0xf0f0f0 );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

      }

      //Animate the scene (basic)
      function animate() {
        requestAnimationFrame( animate );
        controls.update();
        render();
      }

      //Render the scene (basic)
      function render() {
        renderer.render(scene, camera);
        //stats.update();
      }



    </script>
  </body>
 </html>
	# Example of webgl rendered with orbitcontrols
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Vorcel</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	font-family: Monospace;
	background-color: #f0f0f0;
	margin: 0px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<script src="js/jquery.js"></script>
	<script src="js/three.js"></script>
	<script src="js/OrbitControls.js"></script>

	<script>
	var renderer, scene, camera, stats;
	var sphere, uniforms, attributes;
	var noise = [];

	var WIDTH = window.innerWidth;
	var HEIGHT = window.innerHeight;

	init();
	render();
	animate();

	function init() {
	//Create Page Elements (basic)
	container = document.createElement( 'div' );
	document.body.appendChild( container );

	//Create page Header Elements (basic)
	var info = document.createElement( 'div' );
	info.style.position = 'absolute';
	info.style.top = '10px';
	info.style.width = '100%';
	info.style.textAlign = 'center';
	info.innerHTML = '<strong>Vorcel</strong>';
	container.appendChild( info );

	//Generate the scene (basic)
	scene = new THREE.Scene();
	//scene.fog = new THREE.FogExp2( 0xcccccc, 0.0002 );

	// Lights
	var ambientLight = new THREE.AmbientLight( 0x606060 );
	scene.add( ambientLight );
	var directionalLight = new THREE.DirectionalLight( 0xffffff );
	directionalLight.position.set( -1, 0.75, 0.5 ).normalize();
	scene.add( directionalLight );


	//Create Camera (basic)
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
	//initialize the camera position at startup
	camera.position.x = 500;
	camera.position.y = -500;
	camera.position.z = 500;
	camera.lookAt( scene.position );

	//Set the Controls (basic)
	controls = new THREE.OrbitControls( camera );
	controls.damping = 0.5;
	//controls.target = new THREE.Vector3(0,0,0);

	//Add Object to the scene (basic)
	var geometry = new THREE.SphereGeometry( 50, 50, 50 );
	var material = new THREE.MeshLambertMaterial( { color: 0xfeb74c, ambient: 0x00ff80 } );
	var sphere = new THREE.Mesh( geometry, material );
	sphere.position.x = 0;
	sphere.position.y = 0;
	sphere.position.z = 0;
	scene.add( sphere );


	//Renderer (basic)
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setClearColor( 0xf0f0f0 );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );

	}

	//Animate the scene (basic)
	function animate() {
	requestAnimationFrame( animate );
	controls.update();
	render();
	}

	//Render the scene (basic)
	function render() {
	renderer.render(scene, camera);
	//stats.update();
	}



	</script>
	</body>
	</html>