How to use the Camera function from three

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

three.Camera is a base class for different types of cameras used in Three.js 3D rendering library.

296
297
298
299
300
301
302
303
304

this.render = function ( scene, camera ) {

	if ( camera instanceof THREE.Camera === false ) {

		console.error( 'CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
		return;

	}
fork icon183
star icon861
watch icon0

+ 2 other calls in file

49
50
51
52
53
54
55
56
57
58
//     alert( 'No EXT_blend_minmax support!' );
//     // return;
// }

_scene = new THREE.Scene();
_camera = new THREE.Camera();
_camera.position.z = 1;

_copyShader = new THREE.RawShaderMaterial({
    uniforms: {
fork icon34
star icon217
watch icon0

+ 13 other calls in file

How does three.Camera work?

three.Camera is a base class for defining a camera view in a 3D scene by defining its position, orientation, and projection parameters. It provides properties and methods for setting up and manipulating the camera's position, orientation, and view matrix, as well as projection-related parameters such as the field of view, aspect ratio, and near/far clipping planes.

25
26
27
28
29
30
31
32
33
Define a new instance of THREE.CubemapToEquirectangular.
```js
// create renderer, scene, camera, etc.
var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera = new THREE.Camera( /* ... */ );

// Create a managed CubemapToEquirectangular
var equiManaged = new CubemapToEquirectangular( renderer, true );
fork icon37
star icon178
watch icon0

+ 11 other calls in file

24
25
26
27
28
29
30
31
32

precisionPrefix = 'precision ' + renderer.capabilities.precision + ' float;\n'
// precisionPrefix = 'precision mediump float;\n'

_scene = new THREE.Scene()
_camera = new THREE.Camera()
_camera.position.z = 1

vertexShader = precisionPrefix + glslify('../glsl/quad.vert')
fork icon18
star icon1
watch icon3

+ 3 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
import * as THREE from "three";

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(0, 0, 10);

This creates a new PerspectiveCamera object with a field of view of 45 degrees, an aspect ratio equal to the window width divided by the window height, a near clipping plane of 1 unit, and a far clipping plane of 1000 units. The camera is positioned at (0, 0, 10) in 3D space.

40
41
42
43
44
45
46
47
48
49
    alert( 'No OES_texture_float support for float textures!' );
    return;
}

_fboScene = new THREE.Scene();
_fboCamera = new THREE.Camera();
_fboCamera.position.z = 1;

_copyShader = new THREE.ShaderMaterial({
    uniforms: {
fork icon18
star icon0
watch icon2

64
65
66
67
68
69
70
71
72
73

_motionRenderTarget = fboHelper.createRenderTarget(1, 1, THREE.RGBAFormat, THREE.FloatType);
_motionRenderTarget.depthBuffer = true;

_linesRenderTarget = fboHelper.createRenderTarget(1, 1, THREE.RGBAFormat, THREE.FloatType);
_linesCamera = new THREE.Camera();
_linesCamera.position.z = 1.0;
_linesScene = new THREE.Scene();

_super.init.call(this, {
fork icon159
star icon0
watch icon1

532
533
534
535
536
537
538
539
540
541
542
  }
}


export default class Robot {
  scene: THREE.Scene;
  camera: THREE.Camera;
  renderer: THREE.Renderer;
  targetProxies: Array<THREE.Object3D> = [];
  rotationControls: Array<THREE.Object3D> = [];
  debugLog: string => void;
fork icon0
star icon3
watch icon0

134
135
136
137
138
139
140
141
142
143
_this.seaLevel = new THREE.Object3D(); // target is on seaLevel's z axis and target.position.z is the DEM altitude

_this.target = new THREE.Object3D();
_this.target.rotation.order = 'ZXY'; // camera look at target

_this.camera = new THREE.Camera();

_this.add(_this.seaLevel);

_this.seaLevel.add(_this.target);
fork icon0
star icon1
watch icon1

+ 10 other calls in file

54
55
56
57
58
59
60
61
62
renderer.setSize(video.width, video.height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.Camera();
camera.matrixAutoUpdate = false;
camera.projectionMatrix.copy(cameraProjectionMatrix);
scene.add(camera);
fork icon0
star icon0
watch icon7

149
150
151
152
153
154
155
156
157
158
  this._svg.style.backgroundColor = this.getSvgColor( this._clearColor, this._clearAlpha );
};

render = function ( scene:THREE.Scene, camera:THREE.Camera ) {
  if ( camera instanceof THREE.Camera === false ) {
    console.error( 'THREE.SVGRenderer.render: camera is not an instance of THREE.Camera.' );
    return;
  }
  var background = scene.background;
  if ( background && background['isColor'] ) {
fork icon0
star icon0
watch icon3

Other functions in three

Sorted by popularity

function icon

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