Prevent vertical axis rotation in OrbitControls with THREE.js

In my three.js project, I have a scene with OrbitControls that allows me to rotate the camera around the origin at position 0,0,0.

I am attempting to restrict the camera rotation to only rotate vertically along the y-axis infinitely (up or down).

You can view the scene I am working on by clicking the link below:

I have tried setting the following properties, but it does not allow for a complete round rotation and is not infinite:

  controls.minAzimuthAngle = 0;
  controls.maxAzimuthAngle = 0;

I found a related question that explains how to lock the camera rotation on the x-axis, but I need help modifying it to lock rotation on the y-axis only: Lock x axis rotation when using OrbitControls - Three.js

javascriptthree.js

Answer №1

employ 

controls.minPolarAngle=controls.maxPolarAngle=1.57079

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Two Ajax Requests Simultaneously

I am currently faced with the challenge of handling two requests simultaneously. The first request involves executing a lengthy PHP script that takes 10 minutes to complete (I cannot modify it using JavaScript, so that's not an option). The second ...

javascriptphpjqueryhtmlajax

Determine the aspect ratio of the image and incorporate it into the query string

In my current code, I am extracting the dimensions of an image obtained from a cropper tool. I then calculate the aspect ratio of the image by dividing the height by the width. This value is then incorporated into the query string url: urlLocation + imag ...

javascriptjquery

"Utilizing Vue.js to make an AJAX request and trigger another method within a

How can I include another method within a jQuery ajax call? methods : { calert(type,msg="",error=""){ console.log("call me"); }, getData(){ $.ajax({ type: "GET", success: function(data){ / ...

javascriptjqueryvue.jsvuejs2components

Tips for maintaining the backslash character while transforming a string into a regular expression

Received some regular expressions in a JSON object like this: { config: { regEx: "/^$/" } } Attempting to convert the string into a regex: const re = new RegExp(config.regEx); The issue is that RegExp escapes the / characters resulting in //^$ ...

javascriptjsonregex

Managing control among various child popups

In the situation I am facing, a parent window with login fields is present. In order to manage its controls, I have stored the window handle using: String parentWindow = idriver.getWindowHandle(); After entering the login credentials, a new popup (let&ap ...

javascriptjqueryseleniumpopup

What could be causing the Autocomplete feature to display as undefined?

I'm encountering an issue where the Autocomplete box displays "undefined" even though it returns the expected results. How can I resolve this problem? import { Drawer, List, Typography, Switch, ListItem, ListItemText, ListItemSecondaryAction, TextFiel ...

javascriptreactjsmaterial-ui

Is there a way to implement Bootstrap 5 toast in Vue.js and navigate to a different page, such as after submitting a form?

Is there a way to incorporate the bootstrap5 toast in vuejs while also redirecting to another page? For example, after submitting a form and being redirected to a new page, I would like a toast message to appear with the statement "Your form has been sub ...

javascriptvue.jsvuejs3bootstrap-5

Changing the Color of an Object3D Mesh in Three.js

Seeking advice on how to update the color of a Three.js Object3D. Initially created using MeshStandardMaterial, this object is later retrieved from the scene by its ID. Is it possible to change the color of the Mesh at this stage? If needing to replace th ...

javascriptthree.js

How can we replicate user input in React for unit testing purposes?

Struggling to unit test a React component that accepts user input, specifically the onChange function within the component. Unable to set the input value despite trying various methods found online. Below is the component under test: class Input extends C ...

javascriptunit-testingreactjsjestjsenzyme

Grails is experiencing a surge of duplicate events being triggered simultaneously

In my _test.gsp layout, I have a 'click event' that is triggered when the layout is rendered as shown below. <div id="testid"> <g:render template="test"/> </div> When I click on the event in the _test.gsp layout, it trigge ...

javascriptjqueryhtmlgrails

Managing POST request data in Express: A step-by-step guide

Currently, I am facing an issue with my alert button on the client side, which has an event listener that is supposed to send data to the server. Below is the code snippet for the client side: alertBtn.addEventListener("click", () => { axios ...

javascriptnode.jsexpress

Showing data in json format using Angular

I have designed a data table that showcases a list of individuals along with their information. However, when I click on the datatable, it keeps opening a chat box displaying the details of the last person clicked, overriding all other chat boxes. 1. Is t ...

javascriptjqueryjsonangularjs

Step-by-step guide on how to effectively send a NodeJS request and stream it into a separate response

Currently, I am in the process of developing an API to interact with a specific map service that requires the use of an API key. It is crucial for me to keep this API key private. To achieve this, I plan to make internal calls within my server's own A ...

javascriptnode.jsnext.js

When the user presses the enter key to submit data, the Ajax page reloads

I am facing an issue with a simple form for sending messages from one person to another using AJAX method POST to prevent page reload. The problem arises when the user hits [ENTER] in the field, causing the page to reload instead of the AJAX working as int ...

javascriptajaxforms

Substitute the specific class title with the present class

Here is a sample class (supposed to be immutable): class A { normalMethod1(): A{ const instance = this.staticMethod1(); return instance; } static staticMethod1: A(){ return new this(); } } The code above works fine, but how can I re ...

javascripttypescriptclass

Vue.js - Error: Module not found: Cannot locate module 'lottie-vuejs'

I've been attempting to integrate lottie-vuejs into my project. After running the npm install command and following the steps outlined here, I encountered an issue. Unfortunately, I received the following error message: Module not found: Error: Can ...

javascriptvue.jsvuejs2vue-component

The function .load callback was triggered on five separate occasions

I'm currently working with the code below and I have a feeling that I'm overlooking something important but just can't seem to figure it out. Basically, when the user clicks a button, a fragment of the page is loaded. Once this loading is s ...

javascriptjqueryajaxjquery-callback

Having trouble connecting to the library? Encounter ERROR: THREE NOT DEFINED

Despite all my attempts, I am unable to successfully integrate the three.js library into my script. I have tried various methods, from linking to the CDN website to downloading and saving the library in my directory, but none seem to work. Whenever I attem ...

three.js

The conditional statement for ajax is malfunctioning

I am encountering an issue with some ajax coding. The if condition is not working as expected - whenever the program runs, only the else statement gets executed even when the if statement should be satisfied. <script type="text/javascript> funct ...

javascriptphpajaxif-statement

Guide to utilizing the app.locals parameter in JavaScript?

Currently I am in the process of developing a node.js application. In my app.js file, I have loaded a JSON file as app.locals.parameter and now I am attempting to utilize it in my index.hbs. Let's assume: app.locals.componentData = require('./m ...

javascripthtmlnode.jsjson