Unexpected outcomes can arise from rotating looped meshes

In my current three.js project, I am working with a total of 100 meshes which are organized into 10 different scenes:

// Adding 100 meshes to 10 scenes based on an array containing 100 elements
for (var i = 0; i < data.length; i++) {    
    mesh = new THREE.Mesh(geometry, material);    
    // Random positions to prevent overlapping
    mesh.position.x = THREE.Math.randInt(-500, 500);
    mesh.position.z = THREE.Math.randInt(-500, 500);

These meshes are added using a loop and each one is assigned to a specific scene:

// Assigning 10 meshes per scene
var sceneIndex = Math.floor(i/10);
scenes[sceneIndex].add(mesh);

I have also implemented a feature that allows me to rotate a mesh around the center of its respective scene.

However, I am facing a challenge in applying this rotation functionality to all meshes while keeping them separated within their designated scenes. To clarify, I have created a fiddle containing the relevant code snippets.

If you uncomment the following lines, you will notice that all meshes move to scenes[0], and they rotate as intended. Nevertheless, I still need to maintain the division among scenes:

spinningRig.add(mesh);
scenes[0].add(spinningRig);

Could someone guide me on how the code should be structured? What would be the logical approach to resolve this issue?

javascriptthree.js

Answer №1

The concept behind this approach is rather straightforward. To simplify things, it would be ideal to have a distinct spinningRig for each scene, essentially containing the meshes specific to that scene.

For every new scene created, a spinningRig will also be generated and linked to that particular scene:

// Setting up 10 scenes
for(var i=0;i<10;i++) {
  scenes.push(new THREE.Scene());

  // Attaching the spinningRig to the scene
  var spinningRig = new THREE.Object3D();
  scenes[i].add(spinningRig);

  // Keeping track of the spinningRig within the scene.
  scenes[i].userData.spinningRig = spinningRig;
}

Instead of directly adding meshes to the scene, they should be added to the spinningRig associated with that scene:

var sceneIndex = Math.floor(i/10);
scenes[sceneIndex].userData.spinningRig.add(mesh);

Lastly, rotate the spinningRig assigned to the currentScene:

currentScene.userData.spinningRig.rotation.y -= 0.025;

Have a look at the demonstration on jsFiddle: https://jsfiddle.net/712777ee/4/

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

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

javascriptcssvue.jstransitionvuejs3

Trouble with Vue bootstrap's <b-modal> function not triggering on @click event

Instead of passing props to the <b-modal> buttons, I want to directly call signinUser() method on @click in my modal when clicking the default OK button. However, the modal doesn't seem to respond to this. The signinUser() method will trigger o ...

javascriptvue.jsbootstrap-vue

Rendering user actions instantly in React.js without waiting for server propagation

I am currently developing a shopping list web application where users can toggle items as 'checked' or 'unchecked'. The flow of data in this application is as follows: click on item checkbox --> send database update request --> ...

javascriptreactjsasynchronousweb-applicationsreact-lifecycle

"Learn the process of integrating Javascript files from the Angular assets folder into a specific Angular component or module (such as Angular 2, 4,

I have custom1.js, custom2.js, and custom3.js JavaScript files that I need to load into Angular components component1, component2, and component3 respectively. Instead of adding these files to the index.html globally, I want to load them specifically for e ...

javascriptangulartypescripttypescript-typings

Animating text with a shake effect using JQuery

I am attempting to create a shake effect on my text input field when validation fails. While I have achieved the shake effect, I am unsure how to customize the default values for direction, distance, and times. Additionally, I believe there is an error i ...

javascriptjquery

Encountering an error stating "Potential null object" while attempting to retrieve the total count of characters and numbers in a given string

Currently, I am trying to find the number of characters and digits that repeat more than once in a given input string. For example, if the input is "zzrrcde", the output should be 2 as both z and r occur more than once. Here is the function I have writte ...

javascriptregextypescriptfunction

While in the background, React Native JS does not run

I'm currently facing an issue with push notifications in an iOS React Native app. While I have made progress in getting it to work, there is one obstacle I cannot overcome. The problem lies in the fact that my code for displaying a notification when t ...

javascriptiossocketsreact-native

Is there a way to manually stop a file upload (stream) using a XMLHttpRequest on the server?

Utilizing XMLHttpRequest (Level 2) to transfer a file to a node.js server, I am currently examining the file-stream for valid headers on the server side. The goal now is to halt the upload if any errors are encountered during streaming. My XMLHttpRequest c ...

javascriptnode.jsexpressstreamxmlhttprequest

jQuery's display function is being obstructed by a lengthy operation

$('#someid').show(); someLongRunningFunction(); This snippet indicates that the element with id $('#someid') will be displayed only after the function someLongRunningFunction completes its execution. Is there a possible way to modify t ...

javascriptjqueryjquery-animate

Sort the array by unique ID and retrieve the object with the first and last index

I am working with an array that looks like this: [{ "res": [ '123', 'One', '20210318' ] }, { "res": [ '123', 'One', '20210319' ] }, { "res": [ '123&ap ...

javascriptarrays

Showing error messages to users with Angular and Firebase

As a beginner in Angular JS, html, and css, I am facing a challenge with routing in my login component. When the user clicks submit, the application should redirect to the landing page upon successful authentication or return to the login page with an erro ...

javascripthtmlangulartypescriptfirebase

Accessing stored data in Android webview when server connection is unavailable

I have an Android application that utilizes a webview. The backend server is written in Java and serves all the front-end files, creating the cache manifest through Apache Tomcat. My predicament lies in figuring out how to make the webview load from the a ...

javascriptjavaandroidwebviewhtml5-appcache

Employing AJAX to send form data to a pair of destinations

Can anyone help me out? I am having trouble using AJAX to submit my form to one location and then to another. Once it's posted to the second location, I want it to send an email with PHP to a specified recipient, but for some reason, it's not wor ...

javascriptjqueryhtmlajax

Ways to determine if a user has been logged out of the identity server using a Javascript application

My setup includes an Identity server 4 application, several asp .net core applications, and a Javascript application. I've enabled back channel logout on the asp .net core applications to ensure that when one application logs out, they are all logged ...

javascriptidentityserver4

What are the best ways to maximize a web worker's ability to handle multiple tasks at once

I'm currently working on implementing a Web-Worker to handle its state while also managing multiple asynchronous requests. worker.ts file let a =0; //state of the worker let worker=self as unknown as Worker; worker.onmessage =(e)=>{ console ...

javascriptnode.jstypescriptweb-workerdeno

Texture loaded onto a surface may appear blurry or even just one uniform color. Discover how to enhance the sharpness and clarity of the

I am currently experimenting with three.js to create some simple 3D graphics. One of the tasks I am working on involves applying a jpeg image as a texture onto a custom geometry. Here is the code snippet showcasing this: var floor = new THREE.Shape([ ...

three.jstextures

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

I’ve encountered a strange error whenever I attempt to inject any dependency TypeError: Cannot set property 'stack' of undefined at NoProviderError.set [as stack] (errors.js:64) at assignAll (zone.js:704) at NoProviderError.ZoneAwareError (zon ...

javascriptangularjsangulartypescript

What is the reason for the reconnect function not activating when manually reconnecting in Socket.IO?

After disconnecting the client from the node server using socket.disconnect(true);, I manually re-establish the connection on the client side with socket.open(). The issue arises when triggering socket.open(); the socket.on('reconnect', (attempt ...

javascriptnode.jssocket.io

Filtering options in a webpage's dropdown menu

I am developing a website that includes a dropdown menu with approximately 60 options listed in alphabetical order. I am interested in finding a way to efficiently filter through the options by pressing a specific key on the keyboard, such as 'e' ...

javascriptdrop-down-menubootstrap-4filtering

Adding Data to Array

Having an issue populating an array based on another array where pushing a value onto a specific index seems to populate all indexes. Code import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templat ...

javascriptarraysangulartypescript