programming / mathematics - incorrect circular item rotation

I need help arranging a sequence of planes in a circular formation, all facing toward the center. However, I seem to be experiencing issues with the rotation after crossing the 180-degree mark. While my objects are correctly positioned around the circle, the rotation is not behaving as expected. Below you can find a screenshot and the code snippet that I am using. Can anyone identify what might be causing this problem?

var circleRadius = 12;
var diameter = circleRadius*2;
var centerX = -5;
var centerZ = -2.5;

var mpi = Math.PI/180;
var startRadians = startAngle + mpi;
var totalSpheres = 8;
var incrementAngle = 360/totalSpheres;
var incrementRadians = incrementAngle * mpi;

for ( var i = 0; i < totalSpheres; i ++ ) {

    var xp = centerX + Math.sin(startRadians) * circleRadius;
    var zp = centerZ + Math.cos(startRadians) * circleRadius;

    var camObj = new THREE.Mesh( new THREE.PlaneGeometry( 1*camSize, .75*camSize ), material );

    camObj.position.x = xp;
    camObj.position.z = zp;
    camObj.rotation.y = i*incrementAngle; //MH - do this without degrees
    console.log(camObj.rotation.y);
    startRadians += incrementRadians;

    scene.add( camObj );

}

Answer №1

It is possible that my interpretation may not be accurate. I have never utilized the library before, however after reviewing it on github, it appears that rotation should be specified in radians instead of degrees.

var circleRadius = 12;
var diameter = circleRadius*2;
var centerX = -5;
var centerZ = -2.5;

var mpi = Math.PI/180;
var startRadians = startAngle + mpi;
var totalSpheres = 8;
var incrementAngle = 360/totalSpheres;
var incrementRadians = incrementAngle * mpi;

for ( var i = 0; i < totalSpheres; i ++ ) {

    var xp = centerX + Math.sin(startRadians) * circleRadius;
    var zp = centerZ + Math.cos(startRadians) * circleRadius;

    var camObj = new THREE.Mesh( new THREE.PlaneGeometry( 1*camSize, .75*camSize ), material );

    camObj.position.x = xp;
    camObj.position.z = zp;
    camObj.rotation.y = i*incrementAngle * (Math.PI/180.0); //MH - do this without degrees
    console.log(camObj.rotation.y);
    startRadians += incrementRadians;

    scene.add( camObj );

}

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

Do not activate hover on the children of parents using triggers

Check out my demonstration here: http://jsfiddle.net/x01heLm2/ I am trying to achieve two goals with this code. Goal number one is to have the mini thumbnail still appear when hovering over the .box element. However, I do not want the hover event to be tr ...

Do AngularJS applications function similarly to windows?

Do AngularJS apps behave like windows? And is it possible to add an event listener to them? I am currently working on a proof of concept to see if an Angular app can communicate with a server without impacting the host. One potential solution I have thou ...

Formatting time on the x-axis in a Chart.js graph

I've been attempting to create a scatter plot with Chart.js using some data, but no matter what I try from various internet resources, the x-axis continues to display as integers instead of dates. Here's a screenshot for reference. UPDATE: I dis ...

Attempting to develop a server component that will transmit a JSON result set from a MySQL database located on the local server. What is the best method to send the server object (RowDataPacket) to the

After successfully rendering server-side pages and creating forms with react hooks for database updates, I encountered a challenge in integrating Ag-Grid into my application. Despite being able to retrieve data from the database using the mysql2 module and ...

Exploring the Functions and Applications of Headers in Javascript

After completing a project which involved updating a JSON database from the front end, I am still uncertain about the role of the headers within the AxiosConfig. Can you explain the difference between using axios with and without it? For instance: What s ...

BufferGeometry in three.js not displaying as expected

This is my first question for a project using three.js. I hope it's not too simple, as I have already done some research without success so far. I am currently creating a Line2 and need to control the thickness of the line. Initially, I followed this ...

Observing attribute changes in AngularJS directives

How can AngularJS observe attributes on a custom directive to bind Angular values? Here is my current progress: <tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/> app.directive('tile', [function() { return ...

The placement of Bootstrap Datepicker is experiencing issues

I have integrated the Bootstrap Datepicker from Eternicode into my ASP.Net MVC website. While the functionality is working well, I am facing difficulty in positioning the datepicker modal using the orientation option mentioned in the documentation and code ...

The determination of the volume value was impossible using only the values from the object nested within an array

I am currently developing a react app that includes a button labeled Add to create a new calculation. Each calculation consists of two input fields for thickness and surface, as well as an output field for Volume. There is also a button labelled "X" to rem ...

reinitializing the prototype object's constructor property

Let's analyze the code snippet provided: function shape(){ this.name = "2d shape" } function triangle(){ this.name = "triangle"; this.ttest = function(){ alert("in triangle constructor"); } } function equitriangle(){ thi ...

Ways to refresh the DOM while making an asynchronous request

Consider the following async function: async function predict_from_model() { $("#loading").html("first update") const model = await tf.loadModel('model.json'); $("#loading").html("second update") //delayed for (var i = 0; i < 100; i++ ...

How does the Express next() function trigger the execution of the following middleware?

Can someone please explain how the next() function is able to call the subsequent middleware or route? I've searched everywhere but can't seem to find a good resource with the actual code. If anyone could share where I may find this information, ...

React filtering displaying array elements that appear single time

I've been working on this React code to filter and search items based on user input. The issue I'm facing is that when I delete the text input and try again, the filtered items disappear and don't show up unless I reload the page. I'm c ...

In Nextjs, it is possible to extend a page just like creating a nested switch in react-router-dom. This functionality

After spending some time using React, I recently decided to experiment with NextJS. Currently, I am working on a dashboard project that includes a side navigation menu, which will be used across multiple pages. In ReactJS, I typically create a nested switc ...

Encourage (or kindly request) the user to refresh the browser

I manage a website that heavily relies on javascript and ajax functionality. I have found ways to make users refresh their browsers upon initial loading, but what about after they have already been using the site? I am looking to improve the speed of the ...

The parent element of a 3D div is causing issues with hovering and clicking on the child elements

In my scenario, the parent div is transformed in 3D with rotation, causing it to move to the backside. The issue arises with the child div containing a button that becomes unclickable due to the parent div position. Setting backface-visibility to hidden al ...

Creating a "briefing" iframe at the top of a webpage

I'm looking for a way to allow users to embed my iframe at a specific size, like 100x100, and then have it resize dynamically to fit the page size when they click on it. I want this functionality to work regardless of how the HTML embedding the iframe ...

Exploring the combined application of the AND and OR operators in JavaScript programming

{Object.keys(groupByMonthApplicants).map((obj,i) => <div key={obj} style={(i > 0 && (this.state.selectedTabId !== 'rejected' || this.state.selectedTabId !== 'approved')) ? {paddingTop:'15px',background:&a ...

Why is the body the last element in Angular modules arrays?

I have a question regarding architectural practices. When defining an Angular module, one common approach is to do it like this: angular.module('app', []) .controller('Ctrl', ['$scope', function Ctrl($scope) { //body.. ...

Three.js window resizing issues affecting scaling accuracy

Despite following the documentation, the shape does not scale properly when resizing the window.https://i.sstatic.net/OTZ6h.png The code used should work fine according to what is specified in the documentation. var camera, controls, scene, renderer, view ...