D3 Examples - sketch

xxxxxxxxxx
 
<!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 intermediateLot(){
            //context building on the left
            var w1 = 14 * 12;
            var h1 = 30 * 12;
            var d1 = 55 * 12;
            createBox(w1, h1, d1, [-w1/2, h1/2, -d1/2]);
            
            //context building on the right
            var w2 = 18 * 12;
            var h2 = 24 * 12;
            var d2 = 50 * 12;
            createBox(w2, h2, d2, [w2/2 + frontage, h2/2, -d2/2]);
            
            //sidewalk lines
            var l3 = 100 * 12;
            var w3 = 14 * 12;
            createLine(l3, 0, [-l3/2, 0, 0]);
            createLine(l3, 0, [-l3/2, 0, w3]);
        }
        
        function cornerLot(){
            //context building on the left
            var w1 = 14 * 12;
            var h1 = 30 * 12;
            var d1 = 55 * 12;
            createBox(w1, h1, d1, [-w1/2, h1/2, -d1/2]);
            
            //sidewalk lines
            var l3 = 100 * 12;
            var w3 = 14 * 12;
            
            createLine(l3/2, 0, [-l3/2 + frontage, 0, 0]);
            createLine(l3/2, 0, [-l3/2 + frontage, 0, w3]);
            
            createLine(l3, 1, [frontage, 0, 0]);
            createLine(l3, 1, [frontage + w3, 0, 0]);
            createEllipseCurve(w3, [frontage, 0, 0])
        }
        
        function render() {
            var timer = Date.now()*0.0005;
            var totalTime = (Date.now() % 5000) / 1000;
            
            function order(t, i){
                //t = total time
                //i = end second
                if (t >= i){
                    return 1
                } else if (t <= i - 1){
                    return 0
                }else {
                    while(t >= 1){
                        t -= 1
                    }
                    return t
                }
            };
            
            renderer.render(scene, camera);
            
            createBoundary(frontage, depth);
            camera.lookAt(massPlane.position);
            createMass(frontage * order(totalTime,1), (depth - rear) * order(totalTime,2), height * order(totalTime,3));
            
            //Add text in 3D as sprite
            /*
            var spritey = makeTextSprite("Hello", {fontsize: 120});
            spritey.position.set(0,50*12,50*12);
            scene.add(spritey)
            */
        };
​
        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 material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
            
            edge = new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0x4a4a4a}));
            edge.rotation.x = Math.PI/2;
            edge.position.x = xyz[0];
            edge.position.y = xyz[1];
            edge.position.z = xyz[2];
            
            scene.add(edge);
        }
        
        //custom function, turns text into sprite
        function makeTextSprite( message, parameters ){
            if ( parameters === undefined ) parameters = {};
            var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
            var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 240;
            var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 0;
            var borderColor = parameters.hasOwnProperty("borderColor") ?parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
            var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?parameters["backgroundColor"] : { r:255, g:255, b:255, a:1.0 };
            var textColor = parameters.hasOwnProperty("textColor") ?parameters["textColor"] : { r:225, g:225, b:225, a:1.0 };
​
            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>
    