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?
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.
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.
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.
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.
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 };
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With