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.
GitHub: wkentaro/morefusion
![wkentaro profile picture](/wkentaro.png?size=40)
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;
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();
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.
GitHub: avin/generative
![avin profile picture](/avin.png?size=40)
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
GitHub: dennisss/tansa
![dennisss profile picture](/dennisss.png?size=40)
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.
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
GitHub: papermashea/cosmos
![papermashea profile picture](/papermashea.png?size=40)
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;
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: {
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
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: {
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 }
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
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
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
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';
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
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
GitHub: pymor/K3D-jupyter
![pymor profile picture](/pymor.png?size=40)
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;
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
GitHub: demo3d/threejs-mapping
![demo3d profile picture](/demo3d.png?size=40)
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
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({
three.Vector3 is the most popular function in three (22341 examples)