Home

Index

How to use the PerspectiveCamera function from three

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

three.PerspectiveCamera is a type of camera in the Three.js library that simulates perspective projection as in real-world cameras.

index.js

57
58
59
60
61
62
63
64
65
66
  controller.enabled = true
  this.controller = controller
}

_createCamera () {
  let camera = new THREE.PerspectiveCamera(40, this.width / this.height, 0.1, 1000)
  // camera.position.set(0, 0, -28)
  camera.position.set(3.55, 0, -328)
  this.scene.add(camera) // this is required cause there is a light under camera
  this.camera = camera

280

main.js

GitHub: wkentaro/morefusion

14
15
16
17
18
19
20
21
22
23
  camera.up.set(0, 0, 1);
}

var div = document.getElementById("reconstruction-robotic-top-down")

var camera = new THREE.PerspectiveCamera(30, 640 / 480, 0.01, 1000);
robotic_top_down.resetCamera();

var ambientLight = new THREE.AmbientLight(0xffffff, 1.5);
scene.add(ambientLight);

209

How does three.PerspectiveCamera work?

three.PerspectiveCamera is a constructor function in the Three.js library that creates a camera object with a perspective projection matrix based on its properties such as field of view, aspect ratio, and clipping planes. The camera is used to define the perspective through which a scene is viewed and rendered.

README.md?plain=1

GitHub: StrandedKitty/three-csm

33
34
35
36
37
38
39
40
41
42
```

## Basic usage

```javascript
let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // or any other type of shadowmap

191

font-preview.js

GitHub: donmccurdy/msdf-bmfont-web

37
38
39
40
41
42
43
44
45
canvas.style.height = this.height + 'px';
canvas.style.width = this.width + 'px';
this.$el.appendChild(canvas);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, this.width / this.height, 1, 500);
camera.position.y = 100;
camera.position.z = 150;
camera.lookAt(new THREE.Vector3(0, 0, 0));

120

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

In this example, a PerspectiveCamera is created with a field of view of 75 degrees, an aspect ratio of window.innerWidth / window.innerHeight, a near clipping plane of 0.1, and a far clipping plane of 1000. The camera is positioned 5 units away from the center of the scene. The animate() function is called in a loop to continuously render the scene with the camera.

chemview.js

GitHub: gabrielelanaro/chemview

27
28
29
30
31
32
33
34
35
36
        // 'stereo': new THREE.StereoEffect(this.renderer),
        'none': this.renderer,
};

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();

+ 20 other calls in file

main.js

GitHub: kentywang/Agamari

40
41
42
43
44
45
46
47
48
49

let { players, food } = store.getState();

// initialize THREE scene, camera, renderer
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(65,
                                     window.innerWidth / window.innerHeight,
                                     1,
                                     2500);
canvas = document.getElementById('canvas');

+ 15 other calls in file

README.md?plain=1

GitHub: akira-cn/node-canvas-webgl

13
14
15
16
17
18
19
20
21
22

const width = 512,
  height = 512;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const canvas = createCanvas(width, height);

const renderer = new THREE.WebGLRenderer({

renderer.js

GitHub: dennisss/tansa

50
51
52
53
54
55
56
57
58
59


var scene = new THREE.Scene();
this.scene = scene;

var pCamera = new THREE.PerspectiveCamera(70, width / height, 0.1, 20);
scene.add(pCamera);
this.pCamera = pCamera;

pCamera.up.set(0, 0, 1);

render.js

GitHub: hobuinc/usgs-lidar

1185
1186
1187
1188
1189
1190
1191
1192
1193
1194

// instantiate camera control instance with the container we'd like it to use
getCameraControl(render_container);

// setup cameras
getCameraControl().addCamera("perspective", new THREE.PerspectiveCamera(60, w/h, 1, 10000));
getCameraControl().addCamera("ortho", new THREE.OrthographicCamera(-w/2, w/2, h/2, -h/2, 1, 10000));
getCameraControl().addCamera("top", new THREE.OrthographicCamera(-w/2, w/2, h/2, -h/2, 1, 10000), true, true, true);

getCameraControl().onchange = function() {

110

index.js

GitHub: avin/generative

141
142
143
144
145
146
147
148
149
150
renderer.setClearColor('hsl(200, 90%, 10%)', 1);
// renderer.setClearColor('#182026', 1);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

const camera = new THREE.PerspectiveCamera(25, 2, 0.01, 100);
camera.position.set(10, 5, 5);

const controls = new THREE.OrbitControls(camera, context.canvas);
controls.minDistance = 3;

+ 5 other calls in file

index.js

GitHub: maxogden/stl-obj-viewer

67
68
69
70
71
72
73
74
75

function init() {
  var width = 500
  var height = 500

  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000)
  camera.position.z = 500

  scene = new THREE.Scene()

+ 14 other calls in file

VREffect.js

GitHub: MozillaReality/puzzle-rain

164
165
166
167
168
169
170
171
172
173
// render

var cameraL = new THREE.PerspectiveCamera();
cameraL.layers.enable(1);

var cameraR = new THREE.PerspectiveCamera();
cameraR.layers.enable(2);

this.render = function (scene, camera, renderTarget, forceClear) {
  if (vrDisplay && scope.isPresenting) {

+ 3 other calls in file

index.js

GitHub: ASSERT-KTH/ci-hackathon

21
22
23
24
25
26
27
28
29
30

const boxSize = [300, 500, 300];


var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, roomCanvas.width / roomCanvas.height, 0.1, 1000 );

camera.position.x = 0;
camera.position.y = 50;
camera.position.z = 300;

+ 2 other calls in file

example.js

GitHub: dividab/three-x3d-loader

-1

shark_viewer.js

GitHub: JaneliaSciComp/SharkViewer

918
919
920
921
922
923
924
925
926
927
axesCanvas.style.bottom = "5px";
axesCanvas.style.right = "5px";



const axesCamera = new THREE.PerspectiveCamera( 50, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
axesCamera.up = this.camera.up; // important!
this.axesCamera = axesCamera;

const axesScene = new THREE.Scene();

+ 7 other calls in file

index.js

GitHub: shrekshao/ParticleProjector

143
144
145
146
147
148
149
150
151
152

window.addEventListener('resize', onWindowResize, false);


// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );



camera.position.z = 160;

+ 2 other calls in file

GLTFLoader.js

GitHub: XvisionAS/FieldTwin-Integration-Demo

2463
2464
2465
2466
2467
2468
2469
2470
2471
2472
  console.warn("THREE.GLTFLoader: Missing camera parameters.");
  return;
}

if (cameraDef.type === "perspective") {
  camera = new THREE.PerspectiveCamera(
    THREE.Math.radToDeg(params.yfov),
    params.aspectRatio || 1,
    params.znear || 1,
    params.zfar || 2e6

+ 14 other calls in file

spotlightview_new.js

GitHub: audunsh/evince

3093
3094
3095
3096
3097
3098
3099
3100
3101
3102
const scene = new THREE.Scene();
const postprocessing = {};
this.scene = scene;


let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
this.camera = camera;
this.camera.position.z = 5;

//console.log("init scene");

+ 17 other calls in file

fashionview.js

GitHub: audunsh/evince

64
65
66
67
68
69
70
71
72
73
      

      let selectedObject = null;
      

let camera = new THREE.PerspectiveCamera( 75, document.activeElement.clientWidth/(document.activeElement.clientWidth*.6), 0.1, 1000 );
      this.camera = camera;
      this.camera.position.z = 5;

      this.camera.aspect = document.activeElement.clientWidth/(document.activeElement.clientWidth*.6);

+ 2 other calls in file

denseview.js

GitHub: audunsh/evince

60
61
62
63
64
65
66
67
68
69

      this.pos = this.model.get('pos');

      let camera = new THREE.PerspectiveCamera( 50, document.activeElement.clientWidth/(document.activeElement.clientWidth*.65), 0.1, 1000 );
      
      //let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
this.camera = camera;
this.camera.position.z = 5;

      const renderer = new THREE.WebGLRenderer();

+ 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