sketch_03

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
        #canvas {width: 400px; height: 300px}
    </style>
</head>

<body>
    <div id="canvas"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>
    
    <script>
        var container;
        var CANVAS_WIDTH = window.innerWidth;
        var CANVAS_HEIGHT = window.innerHeight;
        //var CANVAS_WIDTH = document.getElementById("canvas").getBoundingClientRect().width;
        //var CANVAS_HEIGHT = document.getElementById("canvas").getBoundingClientRect().height;
        //var camera, scene, renderer;
        //var ambientLight, light;
        //var cameraControls;
        var mass, massEdge, massPlane, planeEdge, contextMass, contextEdge;
        var frontage = 16 * 12;
        var depth = 60 * 12;
        var height = 38 * 12;
        var rear = 9 * 12;
        var lotInt = true;
        var lotCorner = !lotInt;
        
        //temporary parameter control GUI
        var effectController = {
            Intermediate: false,
        };

init();
        if (lotInt){
            intermediateLot()
        } else if (lotCorner){
            cornerLot()
        };
        render();
        animate();

function initGUI(){
            var gui = new dat.GUI();
            gui.add(effectController, "Intermediate").onChange(function(value){lotInt = value;})
        }
        
        function init() {
            
            initGUI();

//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

var cameraDistance = 1200;
            camera = new THREE.PerspectiveCamera(30, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 5000);
            camera.position.x = cameraDistance;
            camera.position.y = cameraDistance;
            camera.position.z = cameraDistance;

//lighting
            ambientLight = new THREE.AmbientLight(0x555555);
            light = new THREE.DirectionalLight(0xffffff, 1.0);
            light.position.set(100, 200, 100);
            light.color.setHSL(0, 0, 255);

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

container = document.getElementById("canvas");
            document.body.appendChild(container);
            
            //renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            container.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(0x333333);
            scene.add(ambientLight);
            scene.add(light);

//materials
            var massColor = new THREE.Color(0xfcff00);
            var contextColor = new THREE.Color(0xffffff);
            massPlaneMaterial = new THREE.MeshBasicMaterial({
                color: massColor,
                side: THREE.DoubleSide
            });
            massMaterial = new THREE.MeshPhongMaterial({
                color: massColor, 
                specular: 0x000000, 
                flatShading: true, 
                side: THREE.DoubleSide
            });
            contextMaterial = new THREE.MeshPhongMaterial({
                color: contextColor,
                opacity: 0.25,
                transparent: true,
                specular: 0x000000, 
                flatShading: true, 
                side: THREE.DoubleSide
            });
            
            var title = makeTextSprite("RSA-5");
            title.position.set(frontage, 0, 14*12*2);
            scene.add(title);
            
            var dimFront = makeTextSprite((frontage / 12) + "ft", {fontsize: 160});
            dimFront.position.set(frontage, 0, 7 * 12);
            scene.add(dimFront);
        };

function animate() {
            requestAnimationFrame(animate);
            render();
        };

function onWindowResize(){
            camera.aspect = CANVAS_WIDTH / CANVAS_HEIGHT;
            camera.updateProjectionMatrix();
            renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
        };

function createBoundary(wide, deep){
            if (massPlane !== undefined){
                massPlane.geometry.dispose();
                scene.remove(massPlane);
            }
            
            if (planeEdge !== undefined){
                scene.remove(planeEdge);
            }

var geometry = new THREE.PlaneBufferGeometry(wide, deep);
            var edges = new THREE.EdgesGeometry(geometry);
            massPlane = new THREE.Mesh(geometry, massPlaneMaterial);
            planeEdge = new THREE.LineSegments(edges, new THREE.LineDashedMaterial({color:0xffffff, scale: 1, dashSize: 18, gapSize: 12}));
            planeEdge.computeLineDistances();
            massPlane.rotation.x = Math.PI/2;
            massPlane.position.x = wide/2;
            massPlane.position.z = -deep/2;
            massPlane.visible = false;
            planeEdge.rotation.x = Math.PI/2;
            planeEdge.position.x = wide/2;
            planeEdge.position.z = -deep/2;

scene.add(massPlane);
            scene.add(planeEdge);
        }
        
        function createMass(wide, deep, high){
            if (mass !== undefined){
                mass.geometry.dispose();
                scene.remove(mass);
            }

if (massEdge !== undefined){
                scene.remove(massEdge);
            }

var geometry = new THREE.BoxBufferGeometry(wide, high, deep);
            var edges = new THREE.EdgesGeometry(geometry);
            mass = new THREE.Mesh(geometry, massMaterial);
            massEdge = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:0x4a4a4a}));
            mass.position.x = wide/2;
            mass.position.y = high/2;
            mass.position.z = -deep/2;
            massEdge.position.x = wide/2;
            massEdge.position.y = high/2;
            massEdge.position.z = -deep/2;

scene.add(mass);
            scene.add(massEdge);
        }
        
        function createBox(w, h, d, xyz){
            var box, edge;
            
            if (box !== undefined){
                box.geometry.dispose();
                scene.remove(box);
            }

if (edge !== undefined){
                scene.remove(edge);
            }
            
            var geometry = new THREE.BoxBufferGeometry(w, h, d);
            var edges = new THREE.EdgesGeometry(geometry);
            box = new THREE.Mesh(geometry, contextMaterial);
            edge = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:0x4a4a4a}));
            box.position.x = xyz[0];
            box.position.y = xyz[1];
            box.position.z = xyz[2];
            edge.position.x = xyz[0];
            edge.position.y = xyz[1];
            edge.position.z = xyz[2];

scene.add(box);
            scene.add(edge);
        }
        
        function createLine(l, a, xyz){
            var edge;
            
            if (edge !== undefined){
                scene.remove(edge);
            }

/*
            var geometry = new THREE.PlaneBufferGeometry(w, l);
            var edges = new THREE.EdgesGeometry(geometry);
            plane = new THREE.Mesh(geometry, contextMaterial);
            edge = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({color:0x4a4a4a}));
            plane.rotation.x = Math.PI/2;
            plane.position.x = xyz[0];
            plane.position.y = xyz[1];
            plane.position.z = xyz[2];
            plane.visible = false;
            edge.rotation.x = Math.PI/2;
            edge.position.x = xyz[0];
            edge.position.y = xyz[1];
            edge.position.z = xyz[2];
            */
            
            var geometry = new THREE.Geometry();
            geometry.vertices.push(
                new THREE.Vector3(0, 0, 0),
                new THREE.Vector3(l, 0, 0)
            );
            
            edge = new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0x4a4a4a}));
            edge.rotation.y = a * Math.PI/2;
            edge.position.x = xyz[0];
            edge.position.y = xyz[1];
            edge.position.z = xyz[2];
            
            scene.add(edge);
        }
        
        function createEllipseCurve(r, xyz){
            var edge;
            
            if (edge !== undefined){
                scene.remove(edge);
            }
            
            var curve = new THREE.EllipseCurve(
                0,  0,            // ax, aY
                r, r,           // xRadius, yRadius
                0,  Math.PI/2,  // aStartAngle, aEndAngle
                false,            // aClockwise
                0                 // aRotation
            );

var points = curve.getPoints( 50 );
            var geometry = new THREE.BufferGeometry().setFromPoints( points );

var canvas = document.createElement('canvas');
            canvas.width = fontsize * 5;
            canvas.height = fontsize * 5 / 2;
            var context = canvas.getContext('2d');
            context.font = "Bold " + fontsize + "px " + fontface;
            var metrics = context.measureText( message );
            var textWidth = metrics.width;

context.fillStyle   = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")";
            context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";

context.lineWidth = borderThickness;
            //roundRect(context, borderThickness/2, borderThickness/2, (textWidth + borderThickness) * 1.1, fontsize * 1.4 + borderThickness, 8);

context.fillStyle = "rgba("+textColor.r+", "+textColor.g+", "+textColor.b+", 1.0)";
            context.fillText( message, borderThickness, fontsize + borderThickness);

var texture = new THREE.Texture(canvas) 
            texture.needsUpdate = true;

var spriteMaterial = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false } );
            var sprite = new THREE.Sprite( spriteMaterial );
            sprite.scale.set(1.5 * fontsize, 0.75 * fontsize, 1);
            return sprite;  
        }
        
        // function for drawing rounded rectangles
        function roundRect(ctx, x, y, w, h, r) {
            ctx.beginPath();
            ctx.moveTo(x+r, y);
            ctx.lineTo(x+w-r, y);
            ctx.quadraticCurveTo(x+w, y, x+w, y+r);
            ctx.lineTo(x+w, y+h-r);
            ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
            ctx.lineTo(x+r, y+h);
            ctx.quadraticCurveTo(x, y+h, x, y+h-r);
            ctx.lineTo(x, y+r);
            ctx.quadraticCurveTo(x, y, x+r, y);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();   
        }
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js