Exploring the art of group rotation in Three.js

My dilemma involves two box geometries:

var box;
loader.load( 'img/plytos.jpg', function ( texture ){
var boxGeometry = new THREE.BoxGeometry(7,0.5,0.5);
var boxMaterial =  new THREE.MeshLambertMaterial({ map: texture, overdraw: 0.5 });
box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;

box.position.x=15;
box.position.y=5;
box.position.z=2.7; 
group.add(box);


var box;
loader.load( 'img/plytos.jpg', function ( texture ){
var boxGeometry = new THREE.BoxGeometry(7,7,0.5);
var boxMaterial =  new THREE.MeshLambertMaterial({ map: texture, overdraw: 0.5 });
box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;

box.position.x=15;
box.position.y=5;
box.position.z=2.7; 
group.add(box);

Both boxes are part of a single group that is currently spinning:

group.rotation.y += ctrl.groupStep; 

I want the entire group to continue spinning while also having the two box geometries rotate individually. I attempted adding this line next to the group rotation:

box.rotation.z += 0.02;

Unfortunately, only one box is rotating.

How can I make both boxes rotate simultaneously?

Answer №1

I'm pleased to report that my research paid off and I successfully obtained the desired outcomes. Additionally, I decided to update the name of the second box to box2.

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 way to include query parameters in form data within a Rails link_to instead of tacking them onto the URL?

I am facing an issue with my page that displays transaction search results. I have a search filter based on the "Token" column and when clicked, the search criteria should be set, and the search params should be passed as form-data in a POST method. Howeve ...

Emulate an AngularJS ng-click action

My website has HTML code with three buttons: <button ng-click='showStats(player.data,0)'>Death Match</button> <button ng-click='showStats(player.data,1)'>Champions Rumble</button> <button ng-click='sho ...

When attempting to reload a single page application that utilizes AJAX, a 404 error is encountered

Recently, I've been working on coding my personal website and have successfully created a single page application using ajax. The content is dynamically loaded between the header and footer whenever a navigation bar link is clicked. To enable the back ...

Guide on incorporating a bootstrap 4 navigation item into an active class through jquery

I am working on a Jekyll site and I want to dynamically add the Bootstrap 4 class active using JavaScript. I have tried using the following code: $(document).ready(function() { // get current URL path and assign 'active' class var pathna ...

Error message indicating an issue with ng-repeat when working with an

$http.get('***').success(function(data, status,response) { $scope.items=data; var getdata=JSON.stringify(data.D_Services); console.log(getdata); }); im retrieving in the console D_Services: "Wash,Tyres,Spares,Accessories"; Could someone please ...

When the onInput event is triggered, React renders components and console.log() displays different values

When I type in the input field, it triggers the onInputChange() function. This function updates the state of inputValue, and then calls the getValue() function which retrieves the current state of inputValue and logs it to the console. However, the value d ...

Exploring location-based services using React-Redux

Seeking a deeper comprehension of redux and the react lifecycle methods. The issue I am facing involves a prop function within the componentDidMount that calls another function in redux. Within redux, I attempt to retrieve location data to set as the init ...

What kinds of data types does MongoDB support in JavaScript?

Regarding the mongodb node client, it allows insertion of JavaScript data using the following syntax: collection.insert({ alpha: 123, bravo: "hello", charlie: [1, 2, 3], }) I am curious to know if mongo supports newer JavaScript data types ...

Querying data in Laravel from a table with two foreign keys referencing the same table

I am facing an issue with mapping relations in Laravel Eloquent for two tables: teams and games. The teams table has id, group_id, and name fields, while the games table includes id, home_team_id, away_team_id, date, and score. The problem arises from the ...

Exploring elements within a JavaScript array

I'm struggling to retrieve model objects from my view model. It seems like a JavaScript/KnockoutJS familiarity issue, so any guidance is welcomed. Here is the code snippet: <!-- VIEW --> <select data-bind="options: allTypes, ...

Tips for manipulating specific URL redirection to an alternative URL within a NuxtJs application

Take this scenario, where the inputted URL is: http://localhost:3000/course-details The desired outcome should be a redirection to http://localhost:3000/courses I recall there being a method for achieving this, but it slips my mind at the moment. ...

Preserve the selected option's value when transferring a page using PHP and JavaScript

Hey everyone, I have a question and could really use some help. I've encountered an issue where I'm generating a select with options pulled from a database, and then sending the information through a post action using PHP. What I'd like to ...

serving JavaScript and various other files to HTML through a Node.js HTTP server

My web server setup is quite basic: var http = require('http'); var fs = require('fs'); http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/html' }); fs.readFile('./index.ht ...

Exploring ways to retrieve global variables within a required() file in Node.js

Imagine having 2 files: main.js, and module.js: //main.js const myModule = require('./module'); let A = 'a'; myModule.log(); //module.js module.exports = { log() { console.log(A); } } After trying to call myModule.log, ...

What is the best way to determine if an object is empty?

I have an array object that I need to check for emptiness. const sampleData = { test:[], test2:[], test1:["can"] } This is the code I'm using to check for emptiness: const dataObject = Object.values(sampleData) console.log(d ...

Retrieve values from the query string (specifically from table rows and cells) for each individual line and display them in

i have some code, see: <script> $$.ready(function() { // Profile Dialog $( "#user-dialog" ).dialog({ autoOpen: false, modal: true, width: 400, open: function(){ $(this).parent().css('overflow', 'visible') ...

The datepicker is refusing to update the date format

I've been attempting to adjust the date format for my datepicker, but it refuses to change. Below is the code I'm using: $(document).ready(function() { $('#dateselect').datepicker({ format: 'dd/mm/yyyy', o ...

Please include text beneath the input group addon class

Hey everyone, I'm facing some issues with my layout. Whenever the input fields are empty or null, I encounter errors. I want to ensure that the input text and input group addon have equal heights. Also, upon clicking the submit button, I use jquery/aj ...

Receiving error messages about missing images in my React project

I am new to programming and I have encountered an issue while running my React project. When I use the command npm start, I noticed that some image resources are not being packaged properly, resulting in certain images disappearing when the website is run ...

In iOS devices, the Ionic framework restricts the ability to open links in a new tab using the ng-href attribute

In my quest for mobile functionality, I'm aiming to implement a feature on devices where tapping will open 'codepen.io' (triggered by ng-click), and tap and hold will display a context menu with the option to 'Open In New Tab', red ...