D3 Examples - sketch

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>sketch 02</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="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/orbitcontrols.js"></script>
    <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
    
    
    <script>
      
      var camera, scene, renderer;
      var ambientLight, light;
      var cameraControls;
      var mesh;
      var street;
      var line;
      
      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 = 1200;
        cameraControls.maxDistance = 2000;
        cameraControls.minPolarAngle = Math.PI/8;
        cameraControls.maxPolarAngle = Math.PI/2.1;
        cameraControls.minAzimuthAngle = Math.PI/-1.5;
        cameraControls.maxAzimuthAngle = Math.PI/1.5;
        
        //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
        
      }
      
      
      
      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");
        
      }
      
      
      //all parametric elements
      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);
        
        //createBox from input width, height, depth
        createBox(params.wide*12, params.deep*12, params.high*12);
        
        //creat street plane
        createStreet();
      }
      
      
      function render(){
        
      }
      
      function createBox(wide, deep, high){
        
        if (mesh !== undefined){
          mesh.geometry.dispose();
          scene.remove(mesh);
        }
        
        if (line !== undefined){
          scene.remove(line);
        }
        
        var geometry = new THREE.BoxBufferGeometry(wide, high, deep);
        var edges = new THREE.EdgesGeometry(geometry);
        mesh = new THREE.Mesh(geometry, flatMaterial);
        line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:0x4a4a4a}));
        mesh.position.y = high/2;
        mesh.position.z = -deep/2;
        line.position.y = high/2;
        line.position.z = -deep/2;
        
        scene.add(mesh);
        scene.add(line);
       
      }
      
      function createStreet(){
        if (street !== undefined){
          street.geometry.dispose();
          scene.remove(street);
        }
        
        var streetShape = new THREE.Shape();
        streetShape.moveTo(-1200, -100);
        streetShape.lineTo(1200, -100);
        streetShape.lineTo(1200, 1100);
        streetShape.lineTo(1200, -100);
        streetShape.lineTo(-1200, 1100);
        
        var streetGeom = new THREE.ShapeBufferGeometry(streetShape);
        
        street = new THREE.Mesh(streetGeom, flatMaterial);
        street.rotation.x = Math.PI/-2;
        
        scene.add(street);
        
      }
      
      function createContext(){
        var meshGroup = [];
      }
      
    </script>
  </body>
    