Fill three.js scene with a grid

Question

What I am looking for

Display a grid within a three.js scene that fills the entire scene. In this case, the scene is the whole window.

This grid represents a surface in 3D and can be moved around with the mouse using THREE.TrackballControls This grid is facing the camera so initially it looks like a flat (2D) surface until the trackball is pulled around with the mouse.

The width of the grid lines should equal to the width of the renderer.

What I did

I have setup a working jsFiddle for what I have done so far.

First I find the bounds of the scene (all of this is in the jsFiddle),

App = function(sceneContainerName) {
   this.sceneContainerName = sceneContainerName;

   this.SCREEN_WIDTH = window.innerWidth;
   this.SCREEN_HEIGHT = window.innerHeight;

   this.MAX_X = this.SCREEN_WIDTH / 2;
   this.MIN_X = 0 - (this.SCREEN_WIDTH / 2);
   this.MAX_Y = this.SCREEN_HEIGHT / 2;
   this.MIN_Y = 0 - (this.SCREEN_HEIGHT / 2);

   this.NUM_HORIZONTAL_LINES = 50;

   this.init();

};

Setup three.js

init: function() {
   // init scene
   this.scene = new THREE.Scene();

   // init camera
   // View Angle, Aspect, Near, Far
   this.camera = new THREE.PerspectiveCamera(45, this.SCREEN_WIDTH / this.SCREEN_HEIGHT, 1, 10000);
   // set camera position
   this.camera.position.z = 1000;
   this.camera.position.y = 0;

   // add the camera to the scene
   this.scene.add(this.camera);

   this.projector = new THREE.Projector();

   // init renderer
   this.renderer = new THREE.CanvasRenderer();
   // start the renderer
   this.renderer.setSize(this.SCREEN_WIDTH, this.SCREEN_HEIGHT);

   this.drawGrid(this.NUM_HORIZONTAL_LINES);

   this.trackball = new THREE.TrackballControls(this.camera, this.renderer.domElement);
   this.trackball.staticMoving = true;

   var me = this;

   this.trackball.addEventListener('change', function() {
       me.render();
   });

   // attach the render-supplied DOM element
   var container = document.getElementById(this.sceneContainerName);
   container.appendChild(this.renderer.domElement);

   this.animate();
},

These functions provide a vector for each screen corner,

getNWScreenVector: function() {
    return new THREE.Vector3(this.MIN_X, this.MAX_Y, 0);
},

getNEScreenVector: function() {
    return new THREE.Vector3(this.MAX_X, this.MAX_Y, 0);
},

getSWScreenVector: function() {
    return new THREE.Vector3(this.MIN_X, this.MIN_Y, 0);
},

getSEScreenVector: function() {
    return new THREE.Vector3(this.MAX_X, this.MIN_Y, 0);
},

I create some geometry that will represent a line at the very top of the screen, and try to draw lines starting from the top and going down to the bottom of the screen.

// drawGrid will determine blocksize based on the 
// amount of horizontal gridlines to draw
drawGrid: function(numHorizontalGridLines) {

    // Determine the size of a grid block (square)
    this.gridBlockSize = this.SCREEN_HEIGHT / numHorizontalGridLines;

    var geometry = new THREE.Geometry();
    geometry.vertices.push(this.getNWScreenVector());
    geometry.vertices.push(this.getNEScreenVector());

    var material = new THREE.LineBasicMaterial({
        color: 0x000000,
        opacity: 0.2
    });

    for (var c = 0; c <= numHorizontalGridLines; c++) {
        var line = new THREE.Line(geometry, material);
        line.position.y = this.MAX_Y - (c * this.gridBlockSize);
        this.scene.add(line);
    }
}

The problem

This method does not work, in the jsFiddle the first line starts off the screen and the width of the lines do not fill the screen width.

Solution 1

So there are two bugs in your code.

First, you're starting with the line at MAX_Y and then putting each line a fixed distance below the last. The relatively minor bug is that in getNWScreenVector and getNEScreenVector you're putting the line's vertices at a height of MAX_Y, then in

line.position.y = this.MAX_Y - (c * this.gridBlockSize);

you're adding a translation to the line of MAX_Y - (c * this.gridBlockSize), which gives a final y position of MAX_Y + MAX_Y - (c * this.gridBlockSize), which is one MAX_Y too many. If it makes sense to your program to start with lines descending from getNWScreenVector and getNEScreenVector, then you should change the line.position.y line to just

line.position.y = -c * this.gridBlockSize;

You can see that the lines are now centered on jsFiddle, but they're still sized incorrectly. This is because you aren't accounting for the fact that your scene is in perspective. Your lines all have their z coordinates set to 0, so when you set this.camera.position.z = 1000, they are 1000 units away from the camera. There is no reason to assume that something with the same width as the pixel width of the canvas will have the same width when drawn in perspective from 1000 units away.

Instead, we can calculate how big they need to be. I won't go in to a full explanation of perspective here, but we can figure out how big an area the lines need to cover to cover the screen. You've specified a vertical FOV of 45 degrees in your camera constructor and a distance of 1000 between the camera and your lines. Three.js basically shows the solution if you peak into how it creates the perspective matrix: makePerspective

First, we need the vertical distance of the upper half of the screen, since 0 is at the center of the screen. Math.tan(45 / 2 * (Math.PI / 180)) (tangent of half the angle, converted to radians) gives the vertical distance divided by the distance away from the camera, so you can calculate the height with

halfDisplayHeight = 1000 * Math.tan(45 / 2 * (Math.PI / 180));

or double it to

this.DISPLAY_HEIGHT = 2 * 1000 * Math.tan(45 / 2 * (Math.PI / 180));

The horizontal FOV is not the same unless the canvas is square, but the width and height ratio of the line area will be proportional to the width and height ratio of the screen. Like three.js does, you can just multiply by the aspect ratio you also provided to the camera constructor to figure out the width:

this.DISPLAY_WIDTH = this.DISPLAY_HEIGHT * (this.SCREEN_WIDTH / this.SCREEN_HEIGHT);

These are the values that you should use for placing your lines. All together:

this.DISPLAY_HEIGHT = 2 * 1000 * Math.tan(45 / 2 * (Math.PI / 180));
this.DISPLAY_WIDTH = this.DISPLAY_HEIGHT * (this.SCREEN_WIDTH / this.SCREEN_HEIGHT);
this.MAX_X = this.DISPLAY_WIDTH / 2;
this.MIN_X = 0 - (this.DISPLAY_WIDTH / 2);
this.MAX_Y = this.DISPLAY_HEIGHT / 2;
this.MIN_Y = 0 - (this.DISPLAY_HEIGHT / 2);

Finally, you'll want to spread the lines over the full area, so you should set

this.gridBlockSize = this.DISPLAY_HEIGHT / numHorizontalGridLines;

You can see that working here: http://jsfiddle.net/pa46hxwo/

There is another way to do this, though, which is to keep the lines the same, but move the camera closer to your lines so that the width of the lines just happens to equal the pixel width of the canvas at that distance. The formula is just a reworking of the above for DISPLAY_HEIGHT, but instead of solving for height, we solve for a distance when the height equals the screen height:

this.camera.position.z = this.SCREEN_HEIGHT / (2 * Math.tan(45 / 2 * (Math.PI / 180)));

You can see that here: http://jsfiddle.net/0jtykgrL/

It's a much smaller change to your code, but it means that the camera position will change depending on how big the canvas is, which could affect other content which you need to place precisely, so the choice is yours.

Solution 2

Since ThreeJS r57 onwards, there is a helper called GridHelper using which you can easily draw a nice grid, just like any other geometric object.

GridHelper takes 2 parameters. First one is the size of the grid and the 2nd one is the size of the step between 2 lines

Below is the code to draw the grid on the scene, with the size = 100 and step = 10

var grid = new THREE.GridHelper(100, 10);
scene.add(grid);

In your case, you can avoid having a method called drawGrid and directly replace that with the above two lines code, or you can add these above two lines of code with in the drawgrid method.

A live example is available here in the following link

Grid Helper Example

Solution 3

You can draw a grid like this.

// each square
var planeW = 50; // pixels
var planeH = 50; // pixels 
var numW = 50; // how many wide (50*50 = 2500 pixels wide)
var numH = 50; // how many tall (50*50 = 2500 pixels tall)
var plane = new THREE.Mesh(
    new THREE.PlaneGeometry( planeW*numW, planeH*numH, planeW, planeH ),
    new THREE.MeshBasicMaterial( {
        color: 0x000000,
        wireframe: true
    } )
);

scene.add(plane);

Comments

[cs_brandt]

Brendan, superb answer! I appreciate the math, this answer is a good reference. Before I saw your answer I came up with a solution based on some code for unprojecting mouse coordinates for detecting mouse position in the 3D world using projector.unprojectVector to get the corners of the screen. Here is the jsFiddle for that. The grid matches up perfectly but everything I draw on the scene relative to that grid seems to be stuck on the outer edge of the trackball making scene navigation not so intuitive. Your solutions will help.

[heffaklump]

Great explanation! Thanks mate!

[Eric]

Note this now draws diagonal lines

[8protons]

I don't believe that this works as intended anymore.