You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
566 lines
30 KiB
566 lines
30 KiB
<!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="/manual/resources/lesson.css">
|
|
<link rel="stylesheet" href="/manual/resources/lang.css">
|
|
<!-- Import maps polyfill -->
|
|
<!-- Remove this when import maps will be widely supported -->
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
|
|
|
<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({canvas});
|
|
+const renderer = new THREE.WebGLRenderer({
|
|
+ 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="/manual/resources/prettify.js"></script>
|
|
<script src="/manual/resources/lesson.js"></script>
|
|
|
|
|
|
|
|
|
|
</body></html>
|