cs_brandt - 9 months ago 33

Javascript Question

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`

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

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);

}

}

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.

Answer

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

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

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.