Home

Index

How to use the OrbitControls function from three

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

three.OrbitControls is a utility in the Three.js library that enables users to easily control the camera position and orientation in a 3D scene with mouse and touch events.

main.js

32
33
34
35
36
37
38
39
40
41
var manager = new THREE.LoadingManager();

var onProgress = function(xhr) {};
var onError = function() {};

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;

robotic_top_down.toggleRotateCamera = function() {
  controls.autoRotate = !controls.autoRotate;

209

font-preview.js

GitHub: donmccurdy/msdf-bmfont-web

46
47
48
49
50
51
52
53
54
55

const renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(2 /* whatever */);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.enableZoom = false;

const textureLoader = new THREE.TextureLoader();

120

How does three.OrbitControls work?

three.OrbitControls is a built-in Three.js class that enables the user to interactively manipulate the camera position and orientation in a 3D scene by providing mouse and touch controls for zooming, rotating and panning around the scene. Internally, it listens to user input events, computes the desired changes in camera parameters, and updates the camera accordingly. It also provides features like damping and limits to the rotations and zooming, and supports different camera types.

index.js

GitHub: avin/generative

144
145
146
147
148
149
150
151
152
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;
controls.maxDistance = 40;
controls.target.set(0, 2, 0);

+ 5 other calls in file

renderer.js

GitHub: dennisss/tansa

111
112
113
114
115
116
117
118
119
el.appendChild(renderer.domElement);
this.renderer = renderer;


// Controls
var controls = new THREE.OrbitControls(pCamera, renderer.domElement);
controls.damping = 0.2;
controls.addEventListener('change', () => this._dirty = true);
this.controls = controls;

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
29
30
31
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

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 controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

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);
  controls.update();
  renderer.render(scene, camera);
}
animate();

In this example, we import OrbitControls from three/examples/jsm/controls/OrbitControls and create an instance of it with the camera and renderer.domElement. We enable damping to make the movement smoother. We then create a basic cube mesh and add it to the scene. Finally, we set the camera's initial position, start the animation loop, and call controls.update() to update the camera's position based on user input.

index.js

GitHub: shrekshao/ParticleProjector

153
154
155
156
157
158
159
160
161
camera.position.x = -60;
camera.position.y = 0;

// camera.lookAt( new THREE.Vector3(0, 0, 0) );

// controls = new THREE.OrbitControls( camera, renderer.domElement );

+ 2 other calls in file

index.js

GitHub: papermashea/cosmos

68
69
70
71
72
73
74
75
76
77
// STAR DATA
stars.init(scene, universeScale);
constll.init(scene, camera, universeScale);

// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls = new THREE.FirstPersonControls(camera);
//controls.movementSpeed = 1;
//controls.lookSpeed = 0.125;
//controls.lookVertical = true;

OrbitControls.js

GitHub: MozillaReality/mred

918
919
920
921
922
923
924
925
926
927
928
929
930
931
    this.update();


};


OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
OrbitControls.prototype.constructor = THREE.OrbitControls;


Object.defineProperties( OrbitControls.prototype, {


    center: {

spotlightview_new.js

GitHub: audunsh/evince

3126
3127
3128
3129
3130
3131
3132
3133
3134
3135


this.renderer.antialias = true;
this.renderer.xr.enabled = true;

let controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
this.controls = controls;

this.init_changed();
this.el.append(this.renderer.domElement);

+ 17 other calls in file

OrbitControls.js

GitHub: OpenSlicer/OpenSlicer

905
906
907
908
909
910
911
912
913
914
915
916
917
918
    this.update()


}


OrbitControls.prototype = Object.create(THREE.EventDispatcher.prototype)
OrbitControls.prototype.constructor = THREE.OrbitControls


Object.defineProperties(OrbitControls.prototype, {


    center: {

ThreeFactory.js

GitHub: zhouzhili/webGL-webGIS-Learning

62
63
64
65
66
67
68
69
70
71
  this.renderer.setPixelRatio(window.devicePixelRatio)
  this.renderer.setSize(window.innerWidth, window.innerHeight)
}

_initController() {
  const controls = new THREE.OrbitControls(this.camera, this.renderer.domElement)
  controls.enablePan = true
  controls.keyPanSpeed = 7.0
  this.controls = controls
}

preview.js

GitHub: lyxnter/DuetWebControl

188
189
190
191
192
193
194
195
196
197
var buildVolume = new THREE.Mesh(geometry, material);

buildVolume.position.y = 300;
//this.previewScene.add(buildVolume);

this.previewControls = new THREE.OrbitControls(this.previewCamera, $("#threeDisplay")[0]);

var gridPrimeGeo = new THREE.Geometry();
var gridSecGeo = new THREE.Geometry();
var materPrime = new THREE.LineBasicMaterial({

+ 2 other calls in file

orbitcontrols.js

GitHub: teerzo/btx-face

940
941
942
943
944
945
946
947
948
949
950
951
952
953
	this.update();


};


THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;


Object.defineProperties( THREE.OrbitControls.prototype, {


	center: {

+ 2 other calls in file

visualizer.js

GitHub: ASLS-org/studio

286
287
288
289
290
291
292
293
294
295
 * Prepares Visualizer's camera controls
 * 
 * @public
 */
prepareControls() {
  this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
  this.controls.screenSpacePannning = false
  this.controls.minDistance = 5;
  this.controls.maxDistance = 100;
  this.controls.maxPolarAngle = Math.PI / 2.1;

+ 3 other calls in file

moveable.js

GitHub: andrenanninga/tomb-raider

26
27
28
29
30
31
32
33
34
35
// var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 10000);
camera.position.x = 200;
camera.position.y = 200;
camera.position.z = 200;

var controls = new THREE.OrbitControls(camera);
controls.damping = 0.2;

var stats = new Stats();
stats.domElement.style.position = 'absolute';

index.js

GitHub: onlymg/webgl-react

98
99
100
101
102
103
104
105
106
107

// append canvas
this.container.appendChild(this.renderer.domElement)

// controls
this.controls = new three.OrbitControls(this.camera, this.renderer.domElement)
this.controls.enableDamping = true
this.controls.dampingFactor = 0.1
this.controls.enableZoom = true
this.controls.rotateSpeed = 0.05

mc-model-viewer.js

GitHub: BinarSkugga/PlaceableItems-Wiki

70
71
72
73
74
75
76
77
78
79
this.renderer.setSize(rect.width, rect.height)


// controls

this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement)
this.controls.dampingFactor = 0.2
this.controls.zoomSpeed = 1.4
this.controls.rotateSpeed = 0.6
this.controls.enableKeys = false

Canvas.js

GitHub: pymor/K3D-jupyter

51
52
53
54
55
56
57
58
59

    return controls;
}

function createOrbitControls(self, K3D) {
    const controls = new THREE.OrbitControls(self.camera, self.renderer.domElement);

    controls.type = cameraModes.orbit;
    controls.rotateSpeed = K3D.parameters.cameraRotateSpeed;

117

OLS3D.react.js

GitHub: kevinmcalear/explained-visually

104
105
106
107
108
109
110
111
112
113
var cameraPos = new THREE.Vector3(0, 0, 3.3)
cameraPos.applyAxisAngle(new THREE.Vector3(0, 1, 0), 0)
state.objects.camera.position.copy(cameraPos)
state.objects.camera.lookAt(new THREE.Vector3(0, 0, 0))

var controls = new THREE.OrbitControls(camera, state.renderer.domElement)
controls.noZoom = true
controls.noPan = true
controls.autoRotateSpeed = 1.0
controls.autoRotate = true

scene.js

GitHub: demo3d/threejs-mapping

29
30
31
32
33
34
35
36
37
38
light.position.x = 120;
light.position.y = -100;
light.position.z = 120;
scene.add(light);

controls = new THREE.OrbitControls(camera);
controls.damping = 0.2;
controls.addEventListener('change', render);

container.appendChild(renderer.domElement);

+ 3 other calls in file

viewer.js

GitHub: PerspectivesLab/three-gltf-viewer

112
113
114
115
116
117
118
119
120
121


this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize( el.clientWidth, el.clientHeight );

this.controls = new THREE.OrbitControls( this.defaultCamera, this.renderer.domElement );
this.controls.autoRotate = false;
this.controls.autoRotateSpeed = -10;

this.background = createVignetteBackground({

460

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About