Twist on the perimeter rather than the middle

Currently using ThreeJS Library along with the option to incorporate Tween as well

At the moment, I have a pole that is rotating around its center. My goal is to make it rotate around the center of the world (at 0, 0, 0), but I am struggling to figure out how to achieve this effectively. Think of it as a pool cue rotating around the white ball. Any assistance on how to achieve this would be greatly appreciated.

I believe I need to adjust its position based on the current angle it's at, but I'm unsure of the exact steps to take. There might be a simpler way to achieve the same outcome, but so far, I haven't found one.

In my render loop, I am currently animating the rotation using the following code:

//Animation
pole.rotateOnAxis(getAxis(angle), -Math.PI/2 - 0.1);
angle += 0.025;
pole.rotateOnAxis(getAxis(angle), Math.PI/2 + 0.1);

function getAxis(angle){
 return new THREE.Vector3(-Math.sin(angle), 0, Math.cos(angle));
}

Due to the amount of code, I have placed it on JSFiddle here.

Answer №1

const animate = () => {
    requestAnimationFrame(animate);

    rotation += 0.03;
    object.position.x = 6 * Math.sin(rotation);
    object.position.z = 6 * Math.cos(rotation);
    object.rotation.y = rotation - Math.PI/4;

    renderer.render(scene, camera);
};

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

I am interested in incorporating pinia state management into my Vue 3 project

I'm currently working on implementing pinia state management in Vue 3, but I've encountered the following error: Module not found: Error: Can't resolve 'src/stores/cart' in 'C:\Users\Ali Haider\theme-project&b ...

Warning users before navigating away from a page with an incomplete form (Code restructuring)

Creating a code that alerts the user when they have any "unsaved" form in the View Check out this script: import { __ } from "./translation"; export class Unsave { private unsaved: boolean = false; public register(): void { $(":button, ...

AngularJs setPristine() not resetting the invalid status of a form

Is there anyone who can assist with the provided Plunker code? All you need to do is submit the form with just one required field filled out. This action will result in validation errors being displayed. When you reset the form by calling both setPristine ...

Unable to fetch new data from props after making an AJAX call in React

Looking for a function that can send data to the server. addRemark(id,e) { var remarktext = this.state.popUpText; this.props.addRemark(id,remarktext); // this function sends data to the server this.props.closePopUp(); setTimeout(function() { this ...

Embedding a YouTube video in a view player using HTML5

So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...

When a div in jQuery is clicked, it binds an effect to a textbox that is

HTML: <div class="infoBox2 blackBoxHover"> <h2>Link: </h2> <input class="fileInput" type="text" id="linkText" name="linkText" /> </div> JAVASCRIPT: $('#linkText').parent('div').click(function () ...

Creating a TypeScript class with methods to export as an object

Just dipping my toes into Typescript and I've encountered a bit of a challenge. I have a generic class that looks like this: export class Sample { a: number; b: number; doSomething(): any { // return something } } My issue ari ...

Is the × symbol added from JavaScript not able to be clicked on?

In my javascript code, I have added HTML content dynamically using the following method: var response = { message: "sample messsage" }; $('#main-content').append( '<div class="alert alert-danger alert-dismissable">'+ & ...

I am seeking to showcase an image in a window, and upon the image being clicked, execute the code in a separate window

I am looking to showcase the image provided below. <img src="http://gfx.myview.com/MyView/skins/livesample/image/livesample.gif" alt="" border="0"><a/> Once the image is clicked, I want it to execute the following code. How can I ensure that ...

Steps to convert a phone number into JSON format

The primary focus Upon receiving an MQTT packet, it is displayed as an ASCII array in the buffer after being printed using stringify: packet = { "cmd": "publish", "retain": true, "qos": 1, "dup& ...

JavaScript encountered an issue while parsing XML: the format is not well-formed

I keep seeing an error message saying "Error parsing XML: not well-formed" when I encounter this line in my javascript code: for (var i=1; i<=totalImgs; i++) If I remove the < character from the line, the parsing error goes away. However, the javas ...

Having trouble with a link not working correctly after concealing the file extension with htaccess?

I've configured the ht-access file to hide the .php file extension. Here's the code inside the .htaccess file: # Apache Rewrite Rules <IfModule mod_rewrite.c> Options +FollowSymLinks RewriteEngine On RewriteBase / # Add trailing slash to U ...

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

Implementing Pagination for a JSON Object using Javascript and Jquery

I am looking for the most effective way to implement pagination in my current situation: I am using "$('body').append(htmlText);" to display the items from a JSON object. How can I set up pagination so that each page displays only one item based ...

Error has been thrown in module.js at line 471

I have been struggling with this issue all day and I am at my wit's end. NPM is not functioning properly and every time I try to use it, I receive the following error: C:\Users\Bernh\Desktop\Coding Projects> npm -v module.js ...

I possess an array of objects that includes both images and documents. My goal is to examine the mime_type of each object and select the first element in React to be displayed within an <img> tag

I have an array of objects that contain images and documents. My goal is to display the first image only if the mime_type is 'image/jpeg' or 'image/png'. I am working with React. Despite my attempts, I keep encountering undefined resul ...

AngularJS, Promise in Jasmine test fails to resolve

My tests are failing because I can't get my promise to resolve. Within my application, I have two essential services: 1- The first service is called ServerApiService and it is responsible for making calls to the server: angular.module('test&apo ...

Comparing the benefits of loading files via CDN versus consolidating all CSS/JS into a single compressed file

I have a particular question regarding my current requirements: My server is hosted locally, with all users and servers in the same country. It's not an Amazon AWS or Azure server where CDN services can be applied to files. Do you think it's mo ...

The printing code is not able to interpret the CSS

Having trouble with this script not reading the style properly when printing, can anyone assist in identifying the issue? <script type="text/javascript"> $(function () { $("#btnPrint").click(function () { var contents = $( ...

How can I utilize the Camera function in Cordova?

I am in the process of developing a Cordova app that will be compatible with both iOS and Android platforms. One of the key features of the app is the ability to display a camera within a specified frame. Below the camera frame, there will be a button labe ...