Interacting with three.js using the "requestAnimationFrame" function when clicking

I would like the camera to rotate continuously when pressing the button + = And it seems that there is a trigger for 2 seconds (with a click) and then stops.

let btn = document.querySelector('.btn--left');
btn.addEventListener('click',function(event) {
     camera.position.x+=(3*Math.sin(angle/6));
     camera.position.z+=(3*Math.cos(angle/6));
});

let angle = 0;

const animate = function () {
     requestAnimationFrame( animate );
     angle-=Math.PI/180*2;

     renderer.render( scene, camera );
     controls.update();
     camera.updateProjectionMatrix();
};

animate();

Answer №1

It seems like what you are looking for is here: https://codepen.io/adelriosantiago/pen/QWEpvLg?editors=1010

https://i.sstatic.net/TjzWU.png

In essence, there's a variable called shouldRotate that determines when the camera should rotate. By default, it is set to false.

Within the animate function, we check if shouldRotate === true, and if it is, the rotation takes place.

if (shouldRotate) {
  angle -= Math.PI/180*2;
  camera.position.x+=(3*Math.sin(angle/6));
  camera.position.z+=(3*Math.cos(angle/6));
}

When the button is clicked, a setTimeout of 2 seconds is initiated. Once the timer expires, shouldRotate = false is executed. Here's how it works:

btn.addEventListener('click',function(event) {
  shouldRotate = true;
  setTimeout(() => {
    shouldRotate = false;
  }, 2000)
});

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

Ways to transfer information from the server to the user interface in a WordPress extension

I am currently developing a WordPress plugin and have successfully created a form in the admin panel. Now, I am looking to transfer the data collected from that form to my Frontend JavaScript file. Is there a way to achieve this, and if so, what steps shou ...

Adapt your content to match the current slide of the dynamic Bootstrap Carousel

I recently implemented the basic carousel from the bootstrap website into my web application and encountered a challenge. I want to adjust the content on my site based on the active slide of the carousel... is this achievable? My goal is to display div On ...

The efficiency of Testing Library findBy* queries is optimized when utilized alongside async/await functionality

After reviewing the documentation, it was noted that queries made using findBy return a Promise. Interestingly, utilizing these queries with Promise.prototype.catch() seems ineffective in comparison to pairing them with async/await + try...catch. An insta ...

How can you personalize the dropdown button in dx-toolbar using DevExtreme?

Currently, I am working with the DevExtreme(v20.1.4) toolbar component within Angular(v8.2.14). However, when implementing a dx-toolbar and specifying locateInMenu="always" for the toolbar items, a dropdown button featuring the dx-icon-overflow i ...

Unable to add chosen elements to array - Angular material mat select allowing multiple selections

Can anyone assist me in figuring out what I am doing wrong when attempting to push data to an empty array? I am trying to only add selected values (i.e. those with checked as true), but I can't seem to get inside the loop This is the current conditi ...

What is the best way to include JavaScript in a web view within an Ionic Android application?

I'm in the process of incorporating a header bar into the web view for my app. Utilizing the cordova inAppBrowser plugin to achieve this, I tested using the following code: var win = window.open( URL, "_blank", 'location=yes' ); win.addEven ...

Using the jQuery/JavaScript operator is similar to the SQL LIKE query with the wildcard %

Is there a way to search for a specific part of my input using JavaScript/jQuery? I've tried two different methods, but neither yielded any results. <script type="text/javascript> $("#button").click(function () { $("#DivToToggle").toggle(); ...

A useful guide on how to fetch information in the front end from res.send and dynamically generate a page for every item in the database

I have a variable named data which holds an Array where each item has a unique ID. app.get('/products/:id', function (req, res) { res.send(data.map(data => "" + data.id + "")) //retrieves data of the element in the Array ...

Why is React App showing up twice on the webpage?

After successfully creating a React app based on Free Code Camp's Drum Machine project that passed all tests on Code Pen, I encountered an issue when transferring the code to Visual Studio. Surprisingly, the app now fails one test (#6) even though it ...

What is causing this JavaScript function to output '2'?

Recently, I came across an unusual JavaScript function: (function f(){ function f(){ return 1; } return f(); function f(){ return 2; } })(); To my surprise, it returns 2 instead of crashing the browsers as expected due to recursion. Curious ...

Display a thumbnail image using a v-for loop

Looking for help with implementing a photo preview in my code using BootstrapVue. The Vue devtools show that the form-file contains the image, but my 'watch' isn't functioning properly. Any assistance would be greatly appreciated! Here is ...

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

Switch between dropdowns with jQuery

Issue at Hand: In the scenario illustrated below, there is a side navigation bar containing options that reveal a toggled section upon clicking. Specifically, if you select the third item labeled "Dolar" from the menu, a dropdown with three additional cho ...

Tips for preventing HTTP Status 415 when sending an ajax request to the server

I am struggling with an AJAX call that should be returning a JSON document function fetchData() { $.ajax({ url: '/x', type: 'GET', data: "json", success: function (data) { // code is miss ...

Dilemma arises from conflicting javascript codes

Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds. In addition, th ...

Transition from FadeOut to loading content and displaying it

Is there a way to simply display the content after loading without using fadeIn? $(function() { $('.hovers').click(function(event) { var target = $(this).attr('href'); window.location.hash = target; $.ajax({ url: ...

Guide to incorporating a scroll-follow effect in multiple directions

I am facing a challenge with managing an array of divs that exceed the dimensions of their container. I have set overflow to hidden on the container and used JQuery Overscroll to achieve an iPhone-like scrolling effect on the map. The problem I'm try ...

What is the best way to use ajax for uploading multiple images at once?

I'm having trouble uploading multiple image files. Can someone please review my code? <form id="fileupload" method="POST" enctype="multipart/form-data"> <input type="file" name="files[]" multiple="multiple" id="images_input"> & ...

Recursive function in JavaScript with error handling using try-catch block

Within my nodejs script, I have implemented a system to generate dynamic tables and views based on the temperature data recorded for the day. On some occasions, the creation of these tables is hindered if the temperature falls outside of the normal range ...

Creating a border around a div element using JavaScript

Is there a way to set a border for a div box using JavaScript similar to using border:2px solid #000; in CSS? Can this be done within the following for loop? elements = document.getElementsByClassName("box"); for (var i = 0; i < elements.length; i++) ...