StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFill three.js scene with a grid
text
Body
copied!<h2>What I am looking for</h2> <p>Display a grid within a three.js scene that fills the entire scene. In this case, the scene is the whole window.</p> <p>This grid represents a surface in 3D and can be moved around with the mouse using <code>THREE.TrackballControls</code> This grid is facing the camera so initially it looks like a flat (2D) surface until the trackball is pulled around with the mouse.</p> <p>The width of the grid lines should equal to the width of the renderer.</p> <h2>What I did</h2> <p>I have setup a working <a href="http://jsfiddle.net/cs_brandt/SeNDk/" rel="noreferrer">jsFiddle</a> for what I have done so far. </p> <p>First I find the bounds of the scene (all of this is in the jsFiddle),</p> <pre><code>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(); </code></pre> <p>};</p> <p>Setup three.js</p> <pre><code>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(); }, </code></pre> <p>These functions provide a vector for each screen corner,</p> <pre><code>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); }, </code></pre> <p>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.</p> <pre><code>// 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); } } </code></pre> <h2>The problem</h2> <p>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. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload