Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three.js & OrbitControls.js - Can I change the input configuration?

Tags:

three.js

I'm working on a simple Three.js demo that uses OrbitControls.js. Currently, the left mouse button orbits, the right mouse button pans, and the middle mouse button/scroll wheel dollies (zooms). But I'd like to swap orbit and pan so that they are controlled by the right mouse button and left mouse button, respectively. Are there configuration settings to change this functionality? Or will I have to dive into the code to change this?

like image 745
Justin Avatar asked Oct 03 '14 17:10

Justin


People also ask

What is three js used for?

three. js is a JavaScript-based WebGL engine that can run GPU-powered games and other graphics-powered apps straight from the browser. The three. js library provides many features and APIs for drawing 3D scenes in your browser.

Is Three js worth learning?

Three. js is a powerful library that many web developers are including in their projects to give their website that three-dimensional edge. It's incredibly easy to use, and we're sure that you'll find somewhere on your site to throw in a 3D model or two, so make sure to look more into Three.

How difficult is 3 js?

As programming goes, three. js isn't hard to get into so if you're interested it would be quite a good way to get started. There will be plenty of great tutorials online.

Is Three js a framework?

This abstraction helps to make WebGL development easier and more productive. We will discuss several WebGL frameworks in the next chapter. In this chapter we will concentrate on one of the most widely used frameworks — Three. js.


1 Answers

By now you can Configure the Mouse-Controls very easily. Just get the Control-Object and then change the Mouse-Button Configuration like this:

this._controls = new OrbitControls(world._engine._camera, world._container);
// Mouse buttons
this._controls.mouseButtons = { ORBIT: THREE.MOUSE.RIGHT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.LEFT };
like image 84
braandl Avatar answered Sep 28 '22 17:09

braandl