Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>So there are two bugs in your code.</p> <p>First, you're starting with the line at <code>MAX_Y</code> and then putting each line a fixed distance below the last. The relatively minor bug is that in <code>getNWScreenVector</code> and <code>getNEScreenVector</code> you're putting the line's vertices at a height of <code>MAX_Y</code>, then in</p> <pre><code>line.position.y = this.MAX_Y - (c * this.gridBlockSize); </code></pre> <p>you're adding a translation to the line of <code>MAX_Y - (c * this.gridBlockSize)</code>, which gives a final y position of <code>MAX_Y + MAX_Y - (c * this.gridBlockSize)</code>, which is one <code>MAX_Y</code> too many. If it makes sense to your program to start with lines descending from <code>getNWScreenVector</code> and <code>getNEScreenVector</code>, then you should change the <code>line.position.y</code> line to just</p> <pre><code>line.position.y = -c * this.gridBlockSize; </code></pre> <p>You can see that the lines are now centered on <a href="http://jsfiddle.net/SeNDk/54/" rel="noreferrer">jsFiddle</a>, 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 <code>this.camera.position.z = 1000</code>, 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.</p> <p>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: <a href="https://github.com/mrdoob/three.js/blob/master/src/core/Matrix4.js#L1001" rel="noreferrer">makePerspective</a> </p> <p>First, we need the vertical distance of the upper half of the screen, since 0 is at the center of the screen. <code>Math.tan(45 / 2 * (Math.PI / 180))</code> (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</p> <pre><code>halfDisplayHeight = 1000 * Math.tan(45 / 2 * (Math.PI / 180)); </code></pre> <p>or double it to</p> <pre><code>this.DISPLAY_HEIGHT = 2 * 1000 * Math.tan(45 / 2 * (Math.PI / 180)); </code></pre> <p>The horizontal FOV is <em>not</em> 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:</p> <pre><code>this.DISPLAY_WIDTH = this.DISPLAY_HEIGHT * (this.SCREEN_WIDTH / this.SCREEN_HEIGHT); </code></pre> <p>These are the values that you should use for placing your lines. All together:</p> <pre><code>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); </code></pre> <p>Finally, you'll want to spread the lines over the full area, so you should set</p> <pre><code>this.gridBlockSize = this.DISPLAY_HEIGHT / numHorizontalGridLines; </code></pre> <p>You can see that working here: <a href="http://jsfiddle.net/SeNDk/55/" rel="noreferrer">http://jsfiddle.net/SeNDk/55/</a></p> <p>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 <code>DISPLAY_HEIGHT</code>, but instead of solving for height, we solve for a distance when the height equals the screen height:</p> <pre><code>this.camera.position.z = this.SCREEN_HEIGHT / (2 * Math.tan(45 / 2 * (Math.PI / 180))); </code></pre> <p>You can see that here: <a href="http://jsfiddle.net/SeNDk/53/" rel="noreferrer">http://jsfiddle.net/SeNDk/53/</a></p> <p>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.</p>
    singulars
    1. This table or related slice is empty.
    1. POFill three.js scene with a grid
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USBrendan Kenny
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POFill three.js scene with a grid
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COBrendan, 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](http://jsfiddle.net/cs_brandt/cu5EX/) 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.
      singulars
      1. PO
      1. UScs_brandt
    2. COGreat explanation! Thanks mate!
      singulars
      1. PO
      1. USheffaklump
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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