BillyBHWong/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>sketch 01</title>
    <meta charset="etf-8">
    <meta name="viewport" content="width=device-width, usesr-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>
      body{
        margin: 0px;
        background-color: #000000;
        overflow: hidden;
      }
    </style>
  </head>

  <body>

    <script src="http://threejs.org/build/three.js"></script>

    <script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

    <script src="http://threejs.org/examples/js/libs/dat.gui.min.js"></script>

    <script>

      var camera, scene, renderer;
      var ambientLight, light;
      var cameraControls;
      var mesh;

      var wireMaterial, flatMaterial;

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

      function init() {

        //orthographic camera
        /*
        camera = new THREE.OrthographicCamera(window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, 1, 1000);
        camera.position.x = 200;
        camera.position.y = 200;
        camera.position.z = 200;
        */

        //perspective camera

        camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 5000);
        camera.position.x = 1000;
        camera.position.y = 1000;
        camera.position.z = 1000;

        //lights
        ambientLight = new THREE.AmbientLight(0x333333);

        light = new THREE.DirectionalLight(0xffffff, 1.0);
        light.position.set(100,200,100);
        light.color.setHSL(0, 50, 255);

        //texture
        //var texture = new THREE.TextureLoader().load('image.gif')

        //renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        document.body.appendChild(renderer.domElement);

        //events
        window.addEventListener('resize', onWindowResize, false);

        //controls
        cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
        cameraControls.addEventListener('change', render);
        cameraControls.minDistance = 1000;
        cameraControls.maxDistance = 2000;
        cameraControls.minPolarAngle = Math.PI/4;
        cameraControls.maxPolarAngle = Math.PI/2;

        //scene
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);

        scene.add(ambientLight);
        scene.add(light);

        //materials
        var materialColor = new THREE.Color();
				materialColor.setRGB( 1.0, 1.0, 1.0 );
				wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } ) ;
        flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );


        setupGui();

        //createBox from input width, height, depth
        var wt = params.wide;
        var ht = params.high;
        var dt = params.deep;
        mesh = createBox(wt*12,ht*12,dt*12);

      }


      function onWindowResize(){

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function setupGui(){

        params = {
          wide: 16,
          deep: 40,
          high: 38,
        };

        var h;

        var gui = new dat.GUI();

        h = gui.addFolder("Dimensions");

        h.add(params, "wide", 16.0, 32.0, 0.5).name("Width");
        h.add(params, "deep", 30.0, 50.0, 0.5).name("Depth");
        h.add(params, "high", 12.0, 38.0, 0.5).name("Height");

      }

      function animate(){

        requestAnimationFrame(animate);


        //mesh.rotation.x += 0.01;
        //mesh.rotation.y += 0.01;
        //mesh.position.x += 1;
        //mesh.position.y += 1;


        renderer.render(scene, camera);
      }


      function render(){

      }

      function createBox(){

        var geometry = new THREE.BoxBufferGeometry(wide, deep, high);
        var edges = new THREE.EdgesGeometry(geometry);
        var mesh = new THREE.Mesh(geometry, flatMaterial);
        var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:0x4a4a4a}));

        if (mesh!== undefined) {
          mesh.geometry.dispose();
          scene.remove(mesh);
        }

        scene.add(mesh);
        scene.add(line);
      }

      function createStreet(){

      }

    </script>
  </body>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>sketch 01</title>
	<meta charset="etf-8">
	<meta name="viewport" content="width=device-width, usesr-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

	<style>
	body{
	margin: 0px;
	background-color: #000000;
	overflow: hidden;
	}
	</style>
	</head>

	<body>

	<script src="http://threejs.org/build/three.js"></script>

	<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

	<script src="http://threejs.org/examples/js/libs/dat.gui.min.js"></script>

	<script>

	var camera, scene, renderer;
	var ambientLight, light;
	var cameraControls;
	var mesh;

	var wireMaterial, flatMaterial;

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

	function init() {

	//orthographic camera
	/*
	camera = new THREE.OrthographicCamera(window.innerWidth/-2, window.innerWidth/2, window.innerHeight/2, window.innerHeight/-2, 1, 1000);
	camera.position.x = 200;
	camera.position.y = 200;
	camera.position.z = 200;
	*/

	//perspective camera

	camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 1, 5000);
	camera.position.x = 1000;
	camera.position.y = 1000;
	camera.position.z = 1000;

	//lights
	ambientLight = new THREE.AmbientLight(0x333333);

	light = new THREE.DirectionalLight(0xffffff, 1.0);
	light.position.set(100,200,100);
	light.color.setHSL(0, 50, 255);

	//texture
	//var texture = new THREE.TextureLoader().load('image.gif')

	//renderer
	renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.gammaInput = true;
	renderer.gammaOutput = true;
	document.body.appendChild(renderer.domElement);

	//events
	window.addEventListener('resize', onWindowResize, false);

	//controls
	cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
	cameraControls.addEventListener('change', render);
	cameraControls.minDistance = 1000;
	cameraControls.maxDistance = 2000;
	cameraControls.minPolarAngle = Math.PI/4;
	cameraControls.maxPolarAngle = Math.PI/2;

	//scene
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0x000000);

	scene.add(ambientLight);
	scene.add(light);

	//materials
	var materialColor = new THREE.Color();
	materialColor.setRGB( 1.0, 1.0, 1.0 );
	wireMaterial = new THREE.MeshBasicMaterial( { color: 0xFFFFFF, wireframe: true } ) ;
	flatMaterial = new THREE.MeshPhongMaterial( { color: materialColor, specular: 0x000000, flatShading: true, side: THREE.DoubleSide } );


	setupGui();

	//createBox from input width, height, depth
	var wt = params.wide;
	var ht = params.high;
	var dt = params.deep;
	mesh = createBox(wt12,ht12,dt*12);

	}



	function onWindowResize(){

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize(window.innerWidth, window.innerHeight);

	}

	function setupGui(){

	params = {
	wide: 16,
	deep: 40,
	high: 38,
	};

	var h;

	var gui = new dat.GUI();

	h = gui.addFolder("Dimensions");

	h.add(params, "wide", 16.0, 32.0, 0.5).name("Width");
	h.add(params, "deep", 30.0, 50.0, 0.5).name("Depth");
	h.add(params, "high", 12.0, 38.0, 0.5).name("Height");

	}

	function animate(){

	requestAnimationFrame(animate);


	//mesh.rotation.x += 0.01;
	//mesh.rotation.y += 0.01;
	//mesh.position.x += 1;
	//mesh.position.y += 1;


	renderer.render(scene, camera);
	}


	function render(){

	}

	function createBox(){

	var geometry = new THREE.BoxBufferGeometry(wide, deep, high);
	var edges = new THREE.EdgesGeometry(geometry);
	var mesh = new THREE.Mesh(geometry, flatMaterial);
	var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:0x4a4a4a}));

	if (mesh!== undefined) {
	mesh.geometry.dispose();
	scene.remove(mesh);
	}

	scene.add(mesh);
	scene.add(line);
	}

	function createStreet(){

	}

	</script>
	</body>