Home

Index

How to use the OrthographicCamera function from three

Find comprehensive JavaScript three.OrthographicCamera code examples handpicked from public code repositorys.

three.OrthographicCamera is a camera in Three.js that uses orthographic projection to render 3D objects on a 2D plane.

SSAAChunkedRender.js

73
74
75
76
77
78
79
80
81
82
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: true,
});

const camera2 = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const scene2 = new THREE.Scene();
const quad2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), copyMaterial);

quad2.frustumCulled = false;

119

813

Volume.js

GitHub: K3D-tools/K3D-jupyter

235
236
237
238
239
240
241
242
243
244

// for clipping planes
quadRTT.applyMatrix4(modelMatrix);
quadRTT.updateMatrixWorld();

cameraRTT = new THREE.OrthographicCamera(
    lightMapRenderTargetSize / -2,
    lightMapRenderTargetSize / 2,
    lightMapRenderTargetSize / 2,
    lightMapRenderTargetSize / -2,

115

803

How does three.OrthographicCamera work?

The three.OrthographicCamera is a type of camera in the Three.js library that creates a camera with a fixed, orthographic view, allowing for 2D-style rendering of 3D scenes by projecting 3D objects onto a 2D plane without perspective distortion. This camera has parameters such as left, right, top, bottom, near, and far planes that define the boundaries of the orthographic view, and is typically used for 2D games or simulations, user interfaces, or technical drawings.

chemview.js

GitHub: gabrielelanaro/chemview

31
32
33
34
35
36
37
38
39
40
this.camera_z = -150;
this.perspectiveCamera = new THREE.PerspectiveCamera(20, this.container.whratio,
        0.1, 800);
this.perspectiveCamera.position.set(0, 0, this.camera_z);
this.perspectiveCamera.lookAt(new THREE.Vector3(0, 0, 0));
this.orthographicCamera = new THREE.OrthographicCamera();
this.orthographicCamera.position.set(0, 0, this.camera_z);
this.orthographicCamera.lookAt(new THREE.Vector3(0, 0, 0));
this.cameras = {
        perspective: this.perspectiveCamera,

+ 20 other calls in file

Simulation.js

GitHub: shrekshao/ParticleProjector

27
28
29
30
31
32
33
34
35
36

// var _size = _renderer.getSize();

// TODO: properly handle windowResize
// camera used for texture buffer rendering
var _cameraRTT = new THREE.OrthographicCamera( 
    // _size.width / - 2, 
    // _size.width / 2, 
    // _size.height / 2, 
    // _size.height / - 2,

+ 9 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as THREE from "three";

const camera = new THREE.OrthographicCamera(
  // left
  window.innerWidth / -2,
  // right
  window.innerWidth / 2,
  // top
  window.innerHeight / 2,
  // bottom
  window.innerHeight / -2,
  // near
  0.1,
  // far
  1000
);

This code creates a new OrthographicCamera instance with the specified parameters. The camera will have an orthographic projection, meaning that it will display the scene without any perspective distortion. The left, right, top, and bottom parameters define the view frustum of the camera, while near and far specify the range of distances that will be rendered.

index.js

GitHub: nfbinteractive/Bear71VR_OpenSource

29
30
31
32
33
34
35
36
37
params = defaults(params, defaultParams);
var scene = new THREE.Scene();
var ripplePointCloud = new RipplePointCloud(params);
scene.add(ripplePointCloud);

var camera = new THREE.OrthographicCamera(0, 128, 128, 0, 32, -32);
scene.add(camera);
THREE.WebGLRenderTarget.call(this, params.size, params.size, params.imageOptions);
this.texture.generateMipmaps = false;

+ 3 other calls in file

Screen2D.js

GitHub: peter-hutsul/h5tiny

-3

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2470
2471
2472
2473
2474
2475
2476
2477
2478
2479
    params.aspectRatio || 1,
    params.znear || 1,
    params.zfar || 2e6
  );
} else if (cameraDef.type === "orthographic") {
  camera = new THREE.OrthographicCamera(
    params.xmag / -2,
    params.xmag / 2,
    params.ymag / 2,
    params.ymag / -2,

+ 14 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

647
648
649
650
651
652
653
654
655
	}

} // Helper for passes that need to fill the viewport with a single quad.


const _camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 ); // https://github.com/mrdoob/three.js/pull/21358


const _geometry = new THREE.BufferGeometry();

+ 35 other calls in file

cardboard-distorter.js

GitHub: arturitu/webvr-template

77
78
79
80
81
82
83
84
85
  uniforms: this.uniforms,
  vertexShader: shader.vertexShader,
  fragmentShader: shader.fragmentShader
});

this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.scene  = new THREE.Scene();
this.quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), null);
this.scene.add(this.quad);

+ 9 other calls in file

renderer.js

GitHub: alan-wu/ZincJS

422
423
424
425
426
427
428
429
430
431
if (sceneOrtho == undefined)
	sceneOrtho = new THREE.Scene();
if (cameraOrtho == undefined) {
	const width = this.getDrawingWidth();
	const height = this.getDrawingHeight();
	cameraOrtho = new THREE.OrthographicCamera( -width / 2,
			width / 2, height/ 2, -height / 2, 1, 10 );
	cameraOrtho.position.z = 10;
}
sceneOrtho.add(object)

THREE.FBOHelper.js

GitHub: josazar/DailyXP

107
108
109
110
111
112
113
114
115
this.list = document.createElement( 'ul' );
this.list.setAttribute( 'id', 'fboh-fbos-list' );
document.body.appendChild( this.list );

this.scene = new THREE.Scene();
this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, .000001, 1000 );

this.raycaster = new THREE.Raycaster();
this.mouse = new THREE.Vector2();

+ 6 other calls in file

init.js

GitHub: ykob/sketch-threejs

17
18
19
20
21
22
23
24
25
26
  canvas: canvas,
});
const renderBack = new THREE.WebGLRenderTarget(document.body.clientWidth, window.innerHeight);
const scene = new THREE.Scene();
const sceneBack = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const cameraBack = new THREE.PerspectiveCamera(45, document.body.clientWidth / window.innerHeight, 1, 10000);
const clock = new THREE.Clock();

const titleObject = new TitleObject();

259

renderer.js

GitHub: dennisss/tansa

62
63
64
65
66
67
68
69
70
pCamera.position.z = 2;


var swidth = 30;
var sheight = (height / width) * swidth;
var oCamera = new THREE.OrthographicCamera(swidth / - 2, swidth / 2, sheight / 2, sheight / - 2, 0.1, 1000);
oCamera.visible = false;
scene.add(oCamera);
this.oCamera = oCamera;

render.js

GitHub: hobuinc/usgs-lidar

606
607
608
609
610
611
612
613
614
615
				});
	});

	this._sprites = [];
	this.orthoScene = new THREE.Scene();
	this.orthoCamera = new THREE.OrthographicCamera(-1, 1.0, 1.0, -1.0, 1, 10);
	this.orthoCamera.position.z = 10;
}

PointCollector.prototype._2dProj = function(p, proj) {

110

+ 3 other calls in file

main.js

GitHub: mattdesl/filmic-gl

179
180
181
182
183
184
185
186
187
188
    fragmentShader: lensShader.fragment
});

postQuad = new THREE.Mesh(new THREE.PlaneGeometry( 2, 2 ), postMaterial);

postCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
postCamera.updateProjectionMatrix();

postScene = new THREE.Scene();
postScene.add(postQuad);

screenShot.js

GitHub: plan8/sonicumbrella

31
32
33
34
35
36
37
38
39
40
      });

      window.material = material;
      window.cubeCamera = cubeCamera;

      var orthoCamera = new THREE.OrthographicCamera(0.5 * camScale * width / -height, 0.5 * camScale * width / height, camScale * 0.5, camScale * -0.5, 0.1, 100);

camera.add(orthoCamera);
      renderer.render(scene, orthoCamera);
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(camScale * width / height, camScale * 1), material);

+ 9 other calls in file

GLTFLoader.js

GitHub: disasteroftheuniverse/zdoom-navmesh-generator

3407
3408
3409
3410
3411
3412
3413
3414
3415
3416

    camera = new THREE.PerspectiveCamera( THREE.MathUtils.radToDeg( params.yfov ), params.aspectRatio || 1, params.znear || 1, params.zfar || 2e6 );

} else if ( cameraDef.type === 'orthographic' ) {

    camera = new THREE.OrthographicCamera( - params.xmag, params.xmag, params.ymag, - params.ymag, params.znear, params.zfar );

}

if ( cameraDef.name ) camera.name = this.createUniqueName( cameraDef.name );

index.cjs

GitHub: Brakebein/node-three-gltf

2144
2145
2146
2147
2148
2149
2150
2151
2152
2153
}
if (cameraDef.type === 'perspective') {
    camera = new three.PerspectiveCamera(three.MathUtils.radToDeg(params.yfov), params.aspectRatio || 1, params.znear || 1, params.zfar || 2e6);
}
else if (cameraDef.type === 'orthographic') {
    camera = new three.OrthographicCamera(-params.xmag, params.xmag, params.ymag, -params.ymag, params.znear, params.zfar);
}
if (cameraDef.name)
    camera.name = this.createUniqueName(cameraDef.name);
assignExtrasToUserData(camera, cameraDef);

transformation.js

GitHub: rendoir/feup-thesis

49
50
51
52
53
54
55
56
57
58
let cameraLeft = Math.min(this.sceneBoundingBox.min.x, boundingBoxCenter.x - boundingBoxSize.y / 2) - cameraPlaneOffset;
let cameraRight = Math.max(this.sceneBoundingBox.max.x, boundingBoxCenter.x + boundingBoxSize.y / 2) + cameraPlaneOffset;
let cameraBottom = Math.min(this.sceneBoundingBox.min.y, boundingBoxCenter.y - boundingBoxSize.x / 2) - cameraPlaneOffset;
let cameraTop = Math.max(this.sceneBoundingBox.max.y, boundingBoxCenter.y + boundingBoxSize.x / 2) + cameraPlaneOffset;

let camera = new THREE.OrthographicCamera(cameraLeft, cameraRight, cameraTop, cameraBottom, -500, 500);
if ( this.shouldDisplayOverlay )
    camera.position.y += cameraPlaneOffset / 2; // Compensate for the overlay

// Save objects inside scene

+ 3 other calls in file

index.js

GitHub: andrenanninga/tomb-raider

22
23
24
25
26
27
28
29
30
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.PCFShadowMap;
document.body.appendChild(renderer.domElement);

var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000);
// var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 0;

+ 5 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About