I am trying to build simple controls buttons to view a 3D shape like “Zoom In”, “Zoom Out”. It doesn’t seem possible to do it using orbitcontrols, unless I generate a mouse event programmatically to trick it. Is there a better way ?

Just fiddle around with the orbitcontrols.JS, you can customize it to your liking quite easily

I was trying to avoid not being able to seamlessly update the library. Too bad it is not available straight out of the box within the Three.js project, it is a basic functionality

It’s intended that the code from the examples should be adjusted according to project-specific requirements. It’s actually not complicated to enhance the public interface of OrbitControls with an API for your use case: Demo: https://jsfiddle.net/5aLhoypj/1/ In this example, we introduce two new pu…

Yea, that’s exactly what I was about to suggest Mugen :blush:

There is actually a npm library that extend Orbit Controls and use TweenJs to provide smooth transition for camera movement. It’s called Camera Controls. I used it to create those simple interactions. Here is the link to the npm library : camera-controls - npm . And if you want to check examples of i…

For those who can not or do not want to manipulate the library, the mentioned programmatical wheel event could look like this: //canvas object of my ThreeJS scene/a wrapper around it export const canvas = document.getElementById('canvas'); /** * Zoom in and out inside the model …

How to add a Zoom In - Zoom Out button to a scene

Questions

TacosLocos February 13, 2019, 6:56pm 4

You’re talking about having to compile three.js?

Topic		Replies	Views
How to implement smooth zoom? Questions orbit-controls , zoom	1	1758	August 3, 2022
Orbit Controls - Simple Zoom in and Zoom out Questions orbit-controls	3	7766	November 2, 2020
How do I zoom in? Questions camera	5	460	May 8, 2023
Detect changes of camera properties via OrbitControls Questions orbit-controls	9	12183	May 26, 2022
Camera zoom in and out Questions camera	16	5956	October 24, 2023

How to add a Zoom In - Zoom Out button to a scene

Related topics