How to use the TrackballControls function from three

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

three.TrackballControls is a three.js plugin that allows the user to control the camera with mouse or touch inputs.

chemview.js

62
63
64
65
66
67
68
69
70
71
this.scene.add(directionalLight1);
this.scene.add(directionalLight2);
this.scene.add(ambientLight);
//this.scene.add(this.camera);

//this.controls = new THREE.TrackballControls(this.camera, this.container);
this.controls = new THREE.ArcballControls(this.camera, this.container.get(
        0));
this.controls.zoomInto = function() {};
this.controls.handleResize = function() {};

+ 20 other calls in file

Canvas.js

GitHub: pymor/K3D-jupyter

31
32
33
34
35
36
37
38
39
40
        self.render();
    });
}

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

    controls.type = cameraModes.trackball;
    controls.rotateSpeed = K3D.parameters.cameraRotateSpeed;
    controls.zoomSpeed = K3D.parameters.cameraZoomSpeed;

117

+ 3 other calls in file

How does three.TrackballControls work?

three.TrackballControls is a library in Three.js that provides a way to interactively control a 3D camera's position and orientation using mouse and touch input. It uses quaternions to represent the camera's rotation, and allows for zooming, panning, and rotating the camera around a target point in the 3D scene. The library calculates the appropriate camera transformations based on the user's input and applies them to the camera matrix to update the 3D scene.

render.js

GitHub: hobuinc/usgs-lidar

194
195
196
197
198
199
200
201
202
203

	this.active = null;
}

CameraControl.prototype.addCamera = function(name, camera, noRotate, noPan, noZoom) {
	var controls = new THREE.TrackballControls(camera, this.container);

	controls.noRotate = (noRotate === undefined ? false : noRotate);
	controls.noPan = (noPan === undefined ? false : noPan);
	controls.noZoom = (noZoom === undefined ? false : noZoom);

110

trackBallControl.js

GitHub: HongpengM/Code_Archive_Public

611
612
613
614
615
616
617
618


};


THREE.TrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.TrackballControls.prototype.constructor = THREE.TrackballControls;
export default THREE.TrackballControls;

+ 49 other calls in file

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 { TrackballControls } from "three/examples/jsm/controls/TrackballControls.js";

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;

const controls = new TrackballControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

In this example, we import TrackballControls from the Three.js examples directory, create a new instance of TrackballControls, and pass in the camera and renderer.domElement as arguments. We then call the update() method on the controls object inside the animate() function to update the camera's position based on the user's input, and render the scene using the renderer.render() method.

Other functions in three

Sorted by popularity

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

Other popular packages:

Home

About