Three.Js - Orthographic Camera

Three.js - Orthographic camera

The pattern for instantiating an orthographic camera in three.js is:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

where width and height are the width and height of the camera's cuboid-shaped frustum measured in world-space units.

near and far are the world-space distances to the near and far planes of the frustum. Both near and far should be greater than zero.

To prevent distortion, you will typically want the aspect ratio of the orthographic camera ( width / height ) to match the aspect ratio of the render's canvas. (see *Note below)

It is unfortunate that many of the three.js examples pass window.innerWidth and window.innerHeight as args to this constructor. Doing so only makes sense if the orthographic camera is used for rendering to a texture, or if the world units for your orthographic scene are in pixels.

---

*Note: Actually, the camera aspect ratio should match the aspect ratio of the renderer's viewport. The viewport can be a sub-region of the canvas. If you do not set the renderer's viewport directly using renderer.setViewport(), the viewport will be the same size as the canvas, and hence have the same aspect ratio as the canvas.

three.js r.73

How does one position an orthographic camera for a side view centered in the viewport?

It is hard to say why, without looking into your code. The parts of code, that you provided are not sufficient to figure it out.

However making side view is somewhat trivial, you can find example here:
https://jsfiddle.net/mmalex/Lphjwvzq/

var renderer;
var camera;
var controls;
var scene = new THREE.Scene();
var width = 10;
var height = 10;
camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
scene.add(camera);
renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xffffff));
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
camera.position.x = 15;
camera.position.y = 0;
camera.position.z = 0;
camera.lookAt(0, 0, 0);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
  color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var size = 10;
var divisions = 10;
var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);
var animate = function() {
  requestAnimationFrame(animate);
  // controls.update();
  renderer.render(scene, camera);
};
animate();

Three.js Line Using Orthographic Camera

This is a know issue, see https://github.com/spite/THREE.MeshLine/issues/118.

The wide line implementation of three.js does support orthographic cameras, though.

ThreeJS raycasting problem with an Orthographic camera in isometric-like view

Raycaster only detects objects in front of the camera, and your camera is located near the origin. Move the camera back.

Also, the near value of your orthographic camera is invalid. From the documentation:

The valid range is between 0 and the current value of the far plane.

Negative values are not supported.

const sceneWidth = window.innerWidth;
const sceneHeight = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-sceneWidth / 2, sceneWidth / 2, sceneHeight / 2, -sceneHeight / 2, 0.1, 1000);

camera.rotation.set(
  -Math.PI / 12,
  Math.PI / 12,
  Math.PI / 24
);
camera.position.set(100, 100, 500);
camera.zoom = 2;
camera.updateProjectionMatrix();

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(sceneWidth, sceneHeight);
document.body.appendChild(renderer.domElement);

const whiteMaterial = new THREE.MeshBasicMaterial();

const redMaterial = new THREE.MeshBasicMaterial({
  color: 0xFF0000
});

const size = 100;
const geometry = new THREE.PlaneGeometry(size, size, 10, 10);

for (let x = 0; x < 2; x++) {
  for (let z = 0; z < 2; z++) {
    let mesh = new THREE.Mesh(geometry, ((x + z) % 2 ? whiteMaterial : redMaterial));

    mesh.rotation.set(
      -Math.PI / 2,
      0,
      0
    );
    mesh.position.set(
      x * size,
      0,
      z * size
    )
    scene.add(mesh);
  }
}

const raycaster = new THREE.Raycaster();
const screenPos = new THREE.Vector2();

renderer.domElement.addEventListener("pointerup", function(e) {

  screenPos.x = (e.clientX / window.innerWidth) * 2 - 1;
  screenPos.y = -(e.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(screenPos, camera);

  const intersections = raycaster.intersectObject(scene, true);

  for (let i = 0; i < intersections.length; i++) {
    scene.remove(intersections[i].object);
  }
});

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

body {
    margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.129/build/three.js"></script>

Why doesn't THREE.js LineGeometry work with orthographic camera?

When using the LineGeometry in three.js, make sure to also set the viewport size for the line material shader either in the update loop or on window resize.

myLineMaterial.resolution.set(window.clientWidth, window.clientHeight);

Imprecise raycast with orthographic camera in three.js

The intersection detection of lines depends on the .linePrecision property of the Raycaster.

e.g.

raycaster.linePrecision = 0.1;
const intersects = raycaster.intersectObjects(scene.children);

The parameter has to be set dependent on the scale of the scene. The value of 0.1 is an empirical value, which gives good results for your example. Sadly there is not further information provided in the documentation (perhaps I've overlooked something, but I didn't find one).

How to change the camera in three.js / editor using only scripts?

It is not possible to do what you are looking for since cameras are handled within the editor. You can't use scripts to change the type of camera used for rendering.

In general, there is no full support for orthographic cameras in the editor. For example the editor's controls only support perspective cameras as well as the app player that playbacks exported/published applications. However, there is a feature request at GitHub that tracks the improvement of orthographic camera support:

https://github.com/mrdoob/three.js/issues/16008

---

Related Topics