123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563 |
- <!DOCTYPE html><html lang="en"><head>
- <meta charset="utf-8">
- <title>Cameras</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – Cameras">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>Cameras</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>This article is one in a series of articles about three.js.
- The first article was <a href="fundamentals.html">about fundamentals</a>.
- If you haven't read that yet you might want to start there.</p>
- <p>Let's talk about cameras in three.js. We covered some of this in the <a href="fundamentals.html">first article</a> but we'll cover it in more detail here.</p>
- <p>The most common camera in three.js and the one we've been using up to this point is
- the <a href="/docs/#api/en/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a>. It gives a 3d view where things in the distance appear
- smaller than things up close.</p>
- <p>The <a href="/docs/#api/en/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a> defines a <em>frustum</em>. <a href="https://en.wikipedia.org/wiki/Frustum">A <em>frustum</em> is a solid pyramid shape with
- the tip cut off</a>.
- By name of a solid I mean for example a cube, a cone, a sphere, a cylinder,
- and a frustum are all names of different kinds of solids.</p>
- <div class="spread">
- <div><div data-diagram="shapeCube"></div><div>cube</div></div>
- <div><div data-diagram="shapeCone"></div><div>cone</div></div>
- <div><div data-diagram="shapeSphere"></div><div>sphere</div></div>
- <div><div data-diagram="shapeCylinder"></div><div>cylinder</div></div>
- <div><div data-diagram="shapeFrustum"></div><div>frustum</div></div>
- </div>
- <p>I only point that out because I didn't know it for years. Some book or page would mention
- <em>frustum</em> and my eyes would glaze over. Understanding it's the name of a type of solid
- shape made those descriptions suddenly make more sense 😅</p>
- <p>A <a href="/docs/#api/en/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a> defines its frustum based on 4 properties. <code class="notranslate" translate="no">near</code> defines where the
- front of the frustum starts. <code class="notranslate" translate="no">far</code> defines where it ends. <code class="notranslate" translate="no">fov</code>, the field of view, defines
- how tall the front and back of the frustum are by computing the correct height to get
- the specified field of view at <code class="notranslate" translate="no">near</code> units from the camera. The <code class="notranslate" translate="no">aspect</code> defines how
- wide the front and back of the frustum are. The width of the frustum is just the height
- multiplied by the aspect.</p>
- <p><img src="../resources/frustum-3d.svg" width="500" class="threejs_center"></p>
- <p>Let's use the scene from <a href="lights.html">the previous article</a> that has a ground
- plane, a sphere, and a cube and make it so we can adjust the camera's settings.</p>
- <p>To do that we'll make a <code class="notranslate" translate="no">MinMaxGUIHelper</code> for the <code class="notranslate" translate="no">near</code> and <code class="notranslate" translate="no">far</code> settings so <code class="notranslate" translate="no">far</code>
- is always greater than <code class="notranslate" translate="no">near</code>. It will have <code class="notranslate" translate="no">min</code> and <code class="notranslate" translate="no">max</code> properties that lil-gui
- will adjust. When adjusted they'll set the 2 properties we specify.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class MinMaxGUIHelper {
- constructor(obj, minProp, maxProp, minDif) {
- this.obj = obj;
- this.minProp = minProp;
- this.maxProp = maxProp;
- this.minDif = minDif;
- }
- get min() {
- return this.obj[this.minProp];
- }
- set min(v) {
- this.obj[this.minProp] = v;
- this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
- }
- get max() {
- return this.obj[this.maxProp];
- }
- set max(v) {
- this.obj[this.maxProp] = v;
- this.min = this.min; // this will call the min setter
- }
- }
- </pre>
- <p>Now we can setup our GUI like this</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function updateCamera() {
- camera.updateProjectionMatrix();
- }
- const gui = new GUI();
- gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
- const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
- gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
- gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
- </pre>
- <p>Anytime the camera's settings change we need to call the camera's
- <a href="/docs/#api/en/cameras/PerspectiveCamera#updateProjectionMatrix"><code class="notranslate" translate="no">updateProjectionMatrix</code></a> function
- so we made a function called <code class="notranslate" translate="no">updateCamera</code> add passed it to lil-gui to call it when things change.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-perspective.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-perspective.html" target="_blank">click here to open in a separate window</a>
- </div>
- <p></p>
- <p>You can adjust the values and see how they work. Note we didn't make <code class="notranslate" translate="no">aspect</code> settable since
- it's taken from the size of the window so if you want to adjust the aspect open the example
- in a new window and then size the window.</p>
- <p>Still, I think it's a little hard to see so let's change the example so it has 2 cameras.
- One will show our scene as we see it above, the other will show another camera looking at the
- scene the first camera is drawing and showing that camera's frustum.</p>
- <p>To do this we can use the scissor function of three.js.
- Let's change it to draw 2 scenes with 2 cameras side by side using the scissor function</p>
- <p>First off let's use some HTML and CSS to define 2 side by side elements. This will also
- help us with events so both cameras can easily have their own <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>.</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><body>
- <canvas id="c"></canvas>
- + <div class="split">
- + <div id="view1" tabindex="1"></div>
- + <div id="view2" tabindex="2"></div>
- + </div>
- </body>
- </pre>
- <p>And the CSS that will make those 2 views show up side by side overlaid on top of
- the canvas</p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">.split {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- }
- .split>div {
- width: 100%;
- height: 100%;
- }
- </pre>
- <p>Then in our code we'll add a <a href="/docs/#api/en/helpers/CameraHelper"><code class="notranslate" translate="no">CameraHelper</code></a>. A <a href="/docs/#api/en/helpers/CameraHelper"><code class="notranslate" translate="no">CameraHelper</code></a> draws the frustum for a <a href="/docs/#api/en/cameras/Camera"><code class="notranslate" translate="no">Camera</code></a></p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cameraHelper = new THREE.CameraHelper(camera);
- ...
- scene.add(cameraHelper);
- </pre>
- <p>Now let's look up the 2 view elements.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const view1Elem = document.querySelector('#view1');
- const view2Elem = document.querySelector('#view2');
- </pre>
- <p>And we'll set our existing <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> to respond to the first
- view element only.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const controls = new OrbitControls(camera, canvas);
- +const controls = new OrbitControls(camera, view1Elem);
- </pre>
- <p>Let's make a second <a href="/docs/#api/en/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a> and a second <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>.
- The second <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> is tied to the second camera and gets input
- from the second view element.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera2 = new THREE.PerspectiveCamera(
- 60, // fov
- 2, // aspect
- 0.1, // near
- 500, // far
- );
- camera2.position.set(40, 10, 30);
- camera2.lookAt(0, 5, 0);
- const controls2 = new OrbitControls(camera2, view2Elem);
- controls2.target.set(0, 5, 0);
- controls2.update();
- </pre>
- <p>Finally we need to render the scene from the point of view of each
- camera using the scissor function to only render to part of the canvas.</p>
- <p>Here is a function that given an element will compute the rectangle
- of that element that overlaps the canvas. It will then set the scissor
- and viewport to that rectangle and return the aspect for that size.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function setScissorForElement(elem) {
- const canvasRect = canvas.getBoundingClientRect();
- const elemRect = elem.getBoundingClientRect();
- // compute a canvas relative rectangle
- const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
- const left = Math.max(0, elemRect.left - canvasRect.left);
- const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
- const top = Math.max(0, elemRect.top - canvasRect.top);
- const width = Math.min(canvasRect.width, right - left);
- const height = Math.min(canvasRect.height, bottom - top);
- // setup the scissor to only render to that part of the canvas
- const positiveYUpBottom = canvasRect.height - bottom;
- renderer.setScissor(left, positiveYUpBottom, width, height);
- renderer.setViewport(left, positiveYUpBottom, width, height);
- // return the aspect
- return width / height;
- }
- </pre>
- <p>And now we can use that function to draw the scene twice in our <code class="notranslate" translate="no">render</code> function</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no"> function render() {
- - if (resizeRendererToDisplaySize(renderer)) {
- - const canvas = renderer.domElement;
- - camera.aspect = canvas.clientWidth / canvas.clientHeight;
- - camera.updateProjectionMatrix();
- - }
- + resizeRendererToDisplaySize(renderer);
- +
- + // turn on the scissor
- + renderer.setScissorTest(true);
- +
- + // render the original view
- + {
- + const aspect = setScissorForElement(view1Elem);
- +
- + // adjust the camera for this aspect
- + camera.aspect = aspect;
- + camera.updateProjectionMatrix();
- + cameraHelper.update();
- +
- + // don't draw the camera helper in the original view
- + cameraHelper.visible = false;
- +
- + scene.background.set(0x000000);
- +
- + // render
- + renderer.render(scene, camera);
- + }
- +
- + // render from the 2nd camera
- + {
- + const aspect = setScissorForElement(view2Elem);
- +
- + // adjust the camera for this aspect
- + camera2.aspect = aspect;
- + camera2.updateProjectionMatrix();
- +
- + // draw the camera helper in the 2nd view
- + cameraHelper.visible = true;
- +
- + scene.background.set(0x000040);
- +
- + renderer.render(scene, camera2);
- + }
- - renderer.render(scene, camera);
- requestAnimationFrame(render);
- }
- requestAnimationFrame(render);
- }
- </pre>
- <p>The code above sets the background color of the scene when rendering the
- second view to dark blue just to make it easier to distinguish the two views.</p>
- <p>We can also remove our <code class="notranslate" translate="no">updateCamera</code> code since we're updating everything
- in the <code class="notranslate" translate="no">render</code> function.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function updateCamera() {
- - camera.updateProjectionMatrix();
- -}
- const gui = new GUI();
- -gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
- +gui.add(camera, 'fov', 1, 180);
- const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
- -gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
- -gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
- +gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
- +gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
- </pre>
- <p>And now you can use one view to see the frustum of the other.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-perspective-2-scenes.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-perspective-2-scenes.html" target="_blank">click here to open in a separate window</a>
- </div>
- <p></p>
- <p>On the left you can see the original view and on the right you can
- see a view showing the frustum of the camera on the left. As you adjust
- <code class="notranslate" translate="no">near</code>, <code class="notranslate" translate="no">far</code>, <code class="notranslate" translate="no">fov</code> and move the camera with mouse you can see that
- only what's inside the frustum shown on the right appears in the scene on
- the left.</p>
- <p>Adjust <code class="notranslate" translate="no">near</code> up to around 20 and you'll easily see the front of objects
- disappear as they are no longer in the frustum. Adjust <code class="notranslate" translate="no">far</code> below about 35
- and you'll start to see the ground plane disappear as it's no longer in
- the frustum.</p>
- <p>This brings up the question, why not just set <code class="notranslate" translate="no">near</code> to 0.0000000001 and <code class="notranslate" translate="no">far</code>
- to 10000000000000 or something like that so you can just see everything?
- The reason is your GPU only has so much precision to decide if something
- is in front or behind something else. That precision is spread out between
- <code class="notranslate" translate="no">near</code> and <code class="notranslate" translate="no">far</code>. Worse, by default the precision close the camera is detailed
- and the precision far from the camera is coarse. The units start with <code class="notranslate" translate="no">near</code>
- and slowly expand as they approach <code class="notranslate" translate="no">far</code>.</p>
- <p>Starting with the top example, let's change the code to insert 20 spheres in a
- row.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const sphereRadius = 3;
- const sphereWidthDivisions = 32;
- const sphereHeightDivisions = 16;
- const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
- const numSpheres = 20;
- for (let i = 0; i < numSpheres; ++i) {
- const sphereMat = new THREE.MeshPhongMaterial();
- sphereMat.color.setHSL(i * .73, 1, 0.5);
- const mesh = new THREE.Mesh(sphereGeo, sphereMat);
- mesh.position.set(-sphereRadius - 1, sphereRadius + 2, i * sphereRadius * -2.2);
- scene.add(mesh);
- }
- }
- </pre>
- <p>and let's set <code class="notranslate" translate="no">near</code> to 0.00001</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 45;
- const aspect = 2; // the canvas default
- -const near = 0.1;
- +const near = 0.00001;
- const far = 100;
- const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- </pre>
- <p>We also need to tweak the GUI code a little to allow 0.00001 if the value is edited</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
- +gui.add(minMaxGUIHelper, 'min', 0.00001, 50, 0.00001).name('near').onChange(updateCamera);
- </pre>
- <p>What do you think will happen?</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-z-fighting.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-z-fighting.html" target="_blank">click here to open in a separate window</a>
- </div>
- <p></p>
- <p>This is an example of <em>z fighting</em> where the GPU on your computer does not have
- enough precision to decide which pixels are in front and which pixels are behind.</p>
- <p>Just in case the issue doesn't show on your machine here's what I see on mine</p>
- <div class="threejs_center"><img src="../resources/images/z-fighting.png" style="width: 570px;"></div>
- <p>One solution is to tell three.js use to a different method to compute which
- pixels are in front and which are behind. We can do that by enabling
- <code class="notranslate" translate="no">logarithmicDepthBuffer</code> when we create the <a href="/docs/#api/en/renderers/WebGLRenderer"><code class="notranslate" translate="no">WebGLRenderer</code></a></p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
- +const renderer = new THREE.WebGLRenderer({
- + antialias: true,
- + canvas,
- + logarithmicDepthBuffer: true,
- +});
- </pre>
- <p>and with that it might work</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-logarithmic-depth-buffer.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-logarithmic-depth-buffer.html" target="_blank">click here to open in a separate window</a>
- </div>
- <p></p>
- <p>If this didn't fix the issue for you then you've run into one reason why
- you can't always use this solution. That reason is because only certain GPUs
- support it. As of September 2018 almost no mobile devices support this
- solution whereas most desktops do.</p>
- <p>Another reason not to choose this solution is it can be significantly slower
- than the standard solution.</p>
- <p>Even with this solution there is still limited resolution. Make <code class="notranslate" translate="no">near</code> even
- smaller or <code class="notranslate" translate="no">far</code> even bigger and you'll eventually run into the same issues.</p>
- <p>What that means is that you should always make an effort to choose a <code class="notranslate" translate="no">near</code>
- and <code class="notranslate" translate="no">far</code> setting that fits your use case. Set <code class="notranslate" translate="no">near</code> as far away from the camera
- as you can and not have things disappear. Set <code class="notranslate" translate="no">far</code> as close to the camera
- as you can and not have things disappear. If you're trying to draw a giant
- scene and show a close up of someone's face so you can see their eyelashes
- while in the background you can see all the way to mountains 50 kilometers
- in the distance well then you'll need to find other creative solutions that
- maybe we'll go over later. For now, just be aware you should take care
- to choose appropriate <code class="notranslate" translate="no">near</code> and <code class="notranslate" translate="no">far</code> values for your needs.</p>
- <p>The 2nd most common camera is the <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>. Rather than
- specify a frustum it specifies a box with the settings <code class="notranslate" translate="no">left</code>, <code class="notranslate" translate="no">right</code>
- <code class="notranslate" translate="no">top</code>, <code class="notranslate" translate="no">bottom</code>, <code class="notranslate" translate="no">near</code>, and <code class="notranslate" translate="no">far</code>. Because it's projecting a box
- there is no perspective.</p>
- <p>Let's change the 2 view example above to use an <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>
- in the first view.</p>
- <p>First let's setup an <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const left = -1;
- const right = 1;
- const top = 1;
- const bottom = -1;
- const near = 5;
- const far = 50;
- const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
- camera.zoom = 0.2;
- </pre>
- <p>We set <code class="notranslate" translate="no">left</code> and <code class="notranslate" translate="no">bottom</code> to -1 and <code class="notranslate" translate="no">right</code> and <code class="notranslate" translate="no">top</code> to 1. This would make
- a box 2 units wide and 2 units tall but we're going to adjust the <code class="notranslate" translate="no">left</code> and <code class="notranslate" translate="no">top</code>
- by the aspect of the rectangle we're drawing to. We'll use the <code class="notranslate" translate="no">zoom</code> property
- to make it easy to adjust how many units are actually shown by the camera.</p>
- <p>Let's add a GUI setting for <code class="notranslate" translate="no">zoom</code></p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
- +gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
- </pre>
- <p>The call to <code class="notranslate" translate="no">listen</code> tells lil-gui to watch for changes. This is here because
- the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a> can also control zoom. For example the scroll wheel on
- a mouse will zoom via the <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>.</p>
- <p>Last we just need to change the part that renders the left
- side to update the <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const aspect = setScissorForElement(view1Elem);
- // update the camera for this aspect
- - camera.aspect = aspect;
- + camera.left = -aspect;
- + camera.right = aspect;
- camera.updateProjectionMatrix();
- cameraHelper.update();
- // don't draw the camera helper in the original view
- cameraHelper.visible = false;
- scene.background.set(0x000000);
- renderer.render(scene, camera);
- }
- </pre>
- <p>and now you can see an <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a> at work.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-orthographic-2-scenes.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-orthographic-2-scenes.html" target="_blank">click here to open in a separate window</a>
- </div>
- <p></p>
- <p>An <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a> is most often used if using three.js
- to draw 2D things. You'd decide how many units you want the camera
- to show. For example if you want one pixel of canvas to match
- one unit in the camera you could do something like</p>
- <p>To put the origin at the center and have 1 pixel = 1 three.js unit
- something like</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">camera.left = -canvas.width / 2;
- camera.right = canvas.width / 2;
- camera.top = canvas.height / 2;
- camera.bottom = -canvas.height / 2;
- camera.near = -1;
- camera.far = 1;
- camera.zoom = 1;
- </pre>
- <p>Or if we wanted the origin to be in the top left just like a
- 2D canvas we could use this</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">camera.left = 0;
- camera.right = canvas.width;
- camera.top = 0;
- camera.bottom = canvas.height;
- camera.near = -1;
- camera.far = 1;
- camera.zoom = 1;
- </pre>
- <p>In which case the top left corner would be 0,0 just like a 2D canvas</p>
- <p>Let's try it! First let's set the camera up</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const left = 0;
- const right = 300; // default canvas size
- const top = 0;
- const bottom = 150; // default canvas size
- const near = -1;
- const far = 1;
- const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
- camera.zoom = 1;
- </pre>
- <p>Then let's load 6 textures and make 6 planes, one for each texture.
- We'll parent each plane to a <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">THREE.Object3D</code></a> to make it easy to offset
- the plane so its center appears to be at its top left corner.</p>
- <p>If you're running locally you'll also need to have <a href="setup.html">setup</a>.
- You might also want to read about <a href="textures.html">using textures</a>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
- const textures = [
- loader.load('resources/images/flower-1.jpg'),
- loader.load('resources/images/flower-2.jpg'),
- loader.load('resources/images/flower-3.jpg'),
- loader.load('resources/images/flower-4.jpg'),
- loader.load('resources/images/flower-5.jpg'),
- loader.load('resources/images/flower-6.jpg'),
- ];
- const planeSize = 256;
- const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
- const planes = textures.map((texture) => {
- const planePivot = new THREE.Object3D();
- scene.add(planePivot);
- texture.magFilter = THREE.NearestFilter;
- const planeMat = new THREE.MeshBasicMaterial({
- map: texture,
- side: THREE.DoubleSide,
- });
- const mesh = new THREE.Mesh(planeGeo, planeMat);
- planePivot.add(mesh);
- // move plane so top left corner is origin
- mesh.position.set(planeSize / 2, planeSize / 2, 0);
- return planePivot;
- });
- </pre>
- <p>and we need to update the camera if the size of the canvas
- changes.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render() {
- if (resizeRendererToDisplaySize(renderer)) {
- camera.right = canvas.width;
- camera.bottom = canvas.height;
- camera.updateProjectionMatrix();
- }
- ...
- </pre>
- <p><code class="notranslate" translate="no">planes</code> is an array of <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">THREE.Mesh</code></a>, one for each plane.
- Let's move them around based on the time.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
- time *= 0.001; // convert to seconds;
- ...
- const distAcross = Math.max(20, canvas.width - planeSize);
- const distDown = Math.max(20, canvas.height - planeSize);
- // total distance to move across and back
- const xRange = distAcross * 2;
- const yRange = distDown * 2;
- const speed = 180;
- planes.forEach((plane, ndx) => {
- // compute a unique time for each plane
- const t = time * speed + ndx * 300;
- // get a value between 0 and range
- const xt = t % xRange;
- const yt = t % yRange;
- // set our position going forward if 0 to half of range
- // and backward if half of range to range
- const x = xt < distAcross ? xt : xRange - xt;
- const y = yt < distDown ? yt : yRange - yt;
- plane.position.set(x, y, 0);
- });
- renderer.render(scene, camera);
- </pre>
- <p>And you can see the images bounce pixel perfect off the edges of the
- canvas using pixel math just like a 2D canvas</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-orthographic-canvas-top-left-origin.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-orthographic-canvas-top-left-origin.html" target="_blank">click here to open in a separate window</a>
- </div>
- <p></p>
- <p>Another common use for an <a href="/docs/#api/en/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a> is to draw the
- up, down, left, right, front, back views of a 3D modeling
- program or a game engine's editor.</p>
- <div class="threejs_center"><img src="../resources/images/quad-viewport.png" style="width: 574px;"></div>
- <p>In the screenshot above you can see 1 view is a perspective view and 3 views are
- orthographic views.</p>
- <p>That's the fundamentals of cameras. We'll cover a few common ways to move cameras
- in other articles. For now let's move on to <a href="shadows.html">shadows</a>.</p>
- <p><canvas id="c"></canvas></p>
- <script type="module" src="../resources/threejs-cameras.js"></script>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|