3d ground plane

by tom burns

HTML

<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.draggable.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.clock.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.filter.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.export.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.easing.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.shapes.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.topath.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.parser.js"></script>
<div id="container">
<div id="drawing"
  style="width:600px; height: 600px; backgroundColor:white"
></div>
</div>

CSS

html, body, #drawing {
    margin: 0;
}

#container {
  backgroundColor: black;
  width: 600px;
  height: 600px;
  border: 1;
}

JavaScript

/* create an svg drawing */
var draw = SVG('drawing')

var PERSPECTIVE=0.7

var WIDTH = 600
var HEIGHT = 600
var ENDY = 400

var originX = 300
var originY = 500

var scaleX = 500
var scaleY = -400
var scaleZ = -100

var lines = []

/* add z lines */
for (var i = -1; i <= 1; i += 0.2) {
 lines.push([i, 0, 0, i, 0, 1])
}

/* add x lines */
for (var i = 0; i <= 1; i += 0.2) {
  lines.push([-1, 0, i, 1, 0, i])
}

  draw.rect(1000,1000)


for (var i = 0; i < lines.length; i++) {
  var line = lines[i]
  // a point at -1, 0, 0.1 should be (300 + -300, HEIGHT)
  
  var p1 = (1 - PERSPECTIVE) * (2 - line[2])
  var p2 = (1 - PERSPECTIVE) * (2 - line[5])
  
  var x1 = originX + (scaleX * line[0] * p1)
  var y1 = originY + (scaleY * line[1] * p1) + (scaleZ * line[2])
  
  var x2 = originX + (scaleX * line[3] * p2)
  var y2 = originY + (scaleY * line[4] * p2) + (scaleZ * line[5])
  
  draw.line(x1, y1, x2, y2).stroke({ width: 1, color: 'white' })
}