Rotating an object in Three.js: Animate back and forth along two different azimuth angles

My three.js project features a 3D object that is meant to be viewed from the front only, as it appears as a single plane and is transparent from the back...

Using orbitControls, I have restricted movement of both azimuth and polar angle...

To enhance the visual appeal of the 3D object, I want it to begin rotating...

function animate() {
    if ( mesh ) {
        mesh.rotation.y += .005;
    }
    requestAnimationFrame( animate );
    render();
}

How can I constrain the motion to move between -90° and 90° in both directions?

javascriptanimationthree.jsazimuth

Answer №1

You have the option to utilize the Math.sin() method.

function move() {
    requestAnimationFrame( move );

    if ( obj ) {
        obj.rotation.x = Math.sin(Date.now() * 0.002) * Math.PI * 0.3;
    }

    draw();
}

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

When using react-router-dom, a blank page may appear for routes that contain more than one path segment followed by a single forward slash "/"

Whenever I attempt to set up a route with more than one "/" (e.g. "/testing/test"), React simply displays a blank page instead of showing the Test component along with the navigation bar and footer. Interestingly, the route "/testi ...

javascriptreactjsreact-router-dom

Node.js offers a simple and effective way to redirect users to another page after they have

I am experiencing an issue when trying to redirect the client to the confirm page after a successful login process. I keep encountering some errors. view screenshot router.post('/sign_in', urlend, function(req, res) { var email = req.body.user ...

javascriptnode.js

The prefixes for Ruby on Rails routes are not properly preprocessed in the .erb.js file

I'm currently working with Rails 4 and encountering an issue with the following file: // apps/assets/javascripts/products.js.erb var getColoursAndMaterialsData = function(onSuccess) { var fd = formdata(); $.post( '<%= data_products_ ...

javascriptrubyruby-on-rails-4erb

Comparing angular.isDefined and typeof

Is there an angular equivalent to the typeof operator in JavaScript that can detect variables not defined? I am specifically interested in the behavior of angular.isDefined() and how it differs from typeof. In the example below, the variable x is not Defin ...

javascriptangularjs

Functionality in Three.js that involves selecting nearby objects with an event handler and ensuring that the self object is

I have spent countless hours today diving deep into the documentation, tutorials, and stackoverflow questions in pursuit of a solution to this issue. I am pleading for your assistance – please take pity on me and help! The problem at hand involves a wat ...

javascript3dthree.jsgeometryplane

What is the best way to utilize Typescript when making queries to Firebase?

I have successfully integrated push notifications for my app using Firebase Cloud Functions. Now, I am looking to enhance the user experience by updating the app's badge count alongside the push notifications. I understand that this can only be achiev ...

javascripttypescriptgoogle-cloud-functions

What is the reason that the attr function fails to function in this particular scenario?

I want to implement a functionality where clicking on an input field clears its value, but I can't seem to make it work. Here is the HTML code: <input id='input' type="text" name="phppostvar" value="clear this"></input> This i ...

javascriptjqueryhtml

Activate the submission button on AngularJS once a correctly formatted email is provided

Currently working on an AngularJS demo to better understand its functionalities. The next task on my list is to enable the submit button only when a valid email address is entered. I'm seeking guidance on how to approach this and what concepts I need ...

javascriptangularjs

Issue with dialogue not appearing when clicking on a table cell

UPDATE: I am facing a challenge with this code not displaying a dialog upon click.: The issue lies in the fact that nothing happens when the Title is clicked. Any suggestions? The data is present, as removing the .hidden CSS class reveals it. $(". ...

javascriptjqueryajaxxml

Issue with Selenium webdriver's element.click() method not operating as anticipated in Chrome while using Mocha framework

While testing the log in feature of a website, I encountered an issue where the .click() method did not perform as expected despite being able to locate the Login button. Here is the relevant JavaScript test code: driver.sleep(1000) driver.findElement(By ...

javascriptunit-testingseleniumselenium-webdriverautomated-tests

Is there a way to send map data using props in React?

I just want to store and pass the current props.url to the videomodal so I can show the same active video on the video modal. I can't use useState in the map. How can I pass it? Or is there any other solution? Videos.tsx ( props.url must be in the &l ...

javascriptreactjstypescriptnext.js

Updating JavaScript files generated from TypeScript in IntelliJ; encountering issues with js not being refreshed

Struggling with a puzzling issue in IntelliJ related to the automatic deployment of changes while my server is running (specifically Spring Boot). I've made sure to enable the "Build project automatically" option in my IntelliJ settings. Whenever I ...

javascripttypescriptspring-bootintellij-idea

You must include an argument for 'model' in the Angular service

My service requires an id parameter for a route, but when I tried to access the route with the id, I encountered the error mentioned above. Any suggestions on how to resolve this issue? https://i.sstatic.net/FEcqo.png #request const apiBaseUrl = `${envir ...

javascriptangularjstypescript

What is the method for sending raw put data using the request npm package in a Node.js environment

How can I hit an API using the "require" npm package in Node? The API requires raw PUT data instead of PUT fields. Can anyone please guide me on how to achieve this using the request npm package? For example, here is the raw PUT data that needs to be sent ...

javascriptnode.jsrequestnpmput

filter supabase to only show items with numbers greater than or equal to a

Hey there! Currently, I am in the process of setting up a store using nextjs pages router and supabase. However, I have encountered a peculiar bug with my product filtering system when dealing with numbers exceeding 4 digits (e.g., 11000). The structure o ...

javascriptnext.jssupabase

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

javascripthtmlcssnode.jsexpress

What is the best way to omit a field from my query if the associated variable is empty?

I need help creating a dynamic MongoDB query function that can handle multiple field values, including cases where some fields may be empty strings. In these instances, I want MongoDB to disregard those parts of the query. Here is my current query functio ...

javascriptmongodb

What are the steps to implement Lazy loading in Node.js?

const posts = await Post.find().populate("receiver").populate("author") try { res.json({ status: true, message: 'All posts fetched', data: posts.reverse() ...

javascriptnode.jsmongodblazy-loading

Enhancements to managing universal configuration object across the entire application

My current project involves working on an application with multiple products. To streamline product-specific configuration and eliminate the need for excessive if-else statements, I am looking to implement product-specific config keys that are consistently ...

javascripttypescriptsingle-page-application

Simultaneously updating the states in both the child and parent components when clicked

In my code, I have two components: the parent component where a prop is passed in for changing state and the child component where the function is called. The function changes the state of the parent component based on an index. changeState={() => this ...

javascriptreactjssetstate