Calculating the rotation angle of a spinning cylinder in Three.js animations

I'm struggling with this Math problem and my skills are failing me. To see my progress so far, you can view the working example here.

After extracting the y and z positions from the rotating cylinder, I've managed to pause the animation when the number 1 is visible. However, my current method feels clunky:

if (p > 75 && p < 90 && pp > 155 && pp < 165){

Upon further observation of the y and z values, I've noticed significant changes in value (try running the sample multiple times) prompting the need for a specific range check.

Since there are 8 faces on the cylinder, I was hoping to simply identify which face is "front-facing" or determine the angle of rotation during animation. I'm unsure how to output the angle during the rotation process.

If anyone has any hints or tips, it would be greatly appreciated.

javascriptthree.js

Answer №1

I wanted to share a brand new code snippet that I have created: http://jsfiddle.net/5vxvLdub/3/

Here is the relevant section of the code:

    function fuzzyEqual( num1, num2 ) {
        var epsilon = .01;
        return ( num1 - epsilon < num2 ) && ( num1 + epsilon > num2 );
    }

    var desiredNumber = 3,
        numFaces = 8,
        angle = Math.PI * 2 * ( numFaces - desiredNumber - 5.5 ) / numFaces,
        destY = Math.cos( angle ),
        destZ = Math.sin( angle );

    // requesting a new frame
    requestAnimationFrame(function(){
        // not the best method :p
        if ( fuzzyEqual( object.y, destY ) && fuzzyEqual( object.z, destZ ) ){
            return;
        }
        animate(time);
    });

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

What is the best approach for managing multiple socket rooms?

I have been working on developing a chat application that supports multiple chat rooms. After watching several tutorials, I have devised a way to handle this. const io = require("socket.io")(http); io.on("connection", (socket) => { ...

javascriptnode.jsexpresssocket.io

Setting up a Variable with an Object Attribute in Angular

I am attempting to create a variable that will set a specific property of an object retrieved through the get method. While using console.log in the subscribe function, I am able to retrieve the entire array value. However, as a beginner, I am struggling ...

javascriptangulartypescript

Guide to switching from test mode to live mode and enabling live mode in stripe with nodejs

I have encountered an issue with the stripe form I am currently using for payments. When the form is loading, it displays "test mode" in the top right corner. I am unsure how to switch it to live mode and cannot find any option on the stripe dashboard to d ...

javascriptnode.jstestingstripe-payments

Leveraging the power of jVectorMap

Currently, I am implementing jVectormap for a project involving offices located in the USA, Netherlands, and Singapore. Is there a way to display only these specific countries on the map, while still being able to place markers indicating the office loca ...

javascriptjvectormap

Steps for choosing an option in MUI select list using jest

I am looking for a way to automate tests for a Material UI select component using Jest. Is there a way to select an option from the list of options in the Material UI component and confirm that its value has been successfully populated in Jest? I have se ...

javascriptreactjsjestjsmaterial-ui

Submitting data with ajax in MVC when an option is chosen in a dropdown menu

Within my form, I have multiple dropdown lists. Whenever a user selects an option from one of these dropdowns, I want that value to be saved in the backend database. To avoid reloading the page, I believe using Ajax is the best approach, but I need assista ...

javascriptajaxasp.net-mvcmodel-view-controllerasp.net-mvc-ajax

transmitting information to Laravel via ajax

Is it possible to send a multi-step form data separately to the Laravel controller in order to store them into MySQL? An example would be sending the inputs data shown below: <ul> <li> <input type="radio" class="step1r1" value ...

javascriptphpjqueryajaxlaravel

Master the art of handling JSON data within an Angular controller

I've been spending a day attempting to manipulate a JSON in order to display a table, but I can't seem to achieve the desired outcome. My goal is to showcase statistics in a table for each town. If a town has multiple lines, I want to display a ...

javascriptangularjsjson

Creating a customized bundle with Bootstrap using the Rollup tool

In the official Bootstrap 5 documentation, it mentions that we can import pre-compiled js files from bootstrap/js/dist and create a custom bundle using tools like Webpack or rollup. https://getbootstrap.com/docs/5.0/getting-started/javascript/#individual- ...

javascriptrollupbootstrap-5

Modifying the class of multiple images within an array

I am excited to share my first post here and express my gratitude for all the solutions I have found on this platform. I encountered an issue with using .removeClass and .addClass in my recent program. I am loading multiple pictures into an array called F ...

javascriptjqueryarraysaddclassremoveclass

Send information from a web page's elements to PHP with the help of AJAX

My goal is to integrate AJAX, HTML, and PHP to create a seamless user experience. I am currently facing difficulty in passing variables to the PHP form. The method I've employed seems a bit complex, especially since this is my first attempt at using A ...

phpjavascripthtmlajax

Adjust the dimensions of a Three.js generated 3D cube dynamically during execution

Is it possible to dynamically change the dimensions (width/height/length) of a 3D Cube created with Three.js? For example, I found a Fiddle on Stack Overflow that changes the color of a Cube at runtime: http://jsfiddle.net/mpXrv/1/ Similarly, can we modi ...

javascriptjquerythree.js

Making adjustments to regular expressions

In my asp.net application, I have a text box where users input a URL and I am using a regular expression for validation. The current regular expression looks like this: ^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(&bsol ...

javascriptasp.netregex

Is a missing dependency causing an issue with the React Hook useEffect?

I've encountered an issue with the following code snippet, which seems to only depend on [page]. Despite this, I am receiving the error message: React Hook useEffect has a missing dependency I've come across similar discussions suggesting to com ...

javascriptreactjs

Step-by-step guide on utilizing the .change method in order to deactivate a

Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...

javascripthtml

JavaScript Deviance

I am facing an issue with my JS code while trying to send form data to a .php file via AJAX. The problem occurs when the input fields are filled - for some reason, my client-side page refreshes and the php file does not get executed. However, everything wo ...

javascriptphphtmlajax

What is the best way to include an attribute to an object in a knockout observable array and ensure a notification is triggered?

Implementing Knockout.js in my project, I have an observable array included in the view model. function MyViewModel() { var self = this; this.getMoreInfo = function(thing){ var updatedThing = jQuery.extend(true, {}, thing); ...

javascriptjqueryhtmlknockout.js

Managing route rendering in nuxtjs: A guide

I came across Goldpage, a tool that allows for route rendering control. Render Control - With Goldpage, you have the flexibility to choose how and when your pages are rendered. For example, one page can be rendered to both HTML and the DOM (classic serv ...

javascriptvue.jssingle-page-applicationnuxt.jsserver-side-rendering

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

I encountered this issue with my code and I'm unsure how to resolve it. DeprecationWarning: Unhandled promise rejections are deprecated. In the future, unhandled promise rejections will terminate the Node.js process with a non-zero exit code. This ...

javascriptnode.jsmongodbexpress

What steps can I take to ensure that my initial Ajax Get request is completed before proceeding with the next one?

Having two methods that return promises is not enough. I am attempting to make the second method execute only after the first one has obtained and manipulated data, but I have struggled to find a solution despite others asking this question before me. Here ...

javascriptjqueryajax