THREE.JS: Organizing Objects into Multiple Groups

Question

THREE.JS: Organizing Objects into Multiple Groups

Currently, I am in the process of learning THREE.js and attempting to create a playable Rubik's cube.

My goal is to rotate a face as a whole instead of manipulating each cube individually. I have tried placing the cubes within a THREE.Group, but the issue arises as a single cube is part of multiple faces, presenting a challenge. Whenever I add an object to one group and then to another, it gets removed from the initial group.

Although I am new to THREE.js and 3D programming, I am confident that there is a solution to this problem. I have only completed a basic course on the subject at .

I have included my code below, but I don't believe it will be particularly helpful:

https://pastebin.com/Hq66UvBU

Thanks

javascript three.js 3d

Answer 1

Answer №1

Welcome to Stack Overflow! Remember to always update your question with your code as the pastebin link may become unavailable, resulting in a loss of important context.

The proper method of adding an object to a THREE.Group is using the add function, just like you have done. However, an object that is added to multiple groups will ultimately only be a child of the last group it was added to. This behavior is due to the way the add function works by checking if the object already has a defined parent, removing it from that parent, and then assigning it to the new parent (r97 code).

For example:

let obj = new THREE.Object3D()
let p1 = new THREE.Group()
let p2 = new THREE.Group()

p1.add(obj) // obj.parent == p1
p2.add(obj) // 1. three.js calls p1.remove(obj) 2. obj.parent == p2

In addition to this limitation, as pointed out by @Mugen87, your cubes must not only be able to belong to multiple groups but also enter and leave those groups based on their positions. This suggests that you may need to transform the cubes individually. While using a THREE.Group can help in visualization, it may require additional effort to implement due to the added complexity.

Answer 2

Welcome to Stack Overflow! Remember to always update your question with your code as the pastebin link may become unavailable, resulting in a loss of important context.

The proper method of adding an object to a THREE.Group is using the add function, just like you have done. However, an object that is added to multiple groups will ultimately only be a child of the last group it was added to. This behavior is due to the way the add function works by checking if the object already has a defined parent, removing it from that parent, and then assigning it to the new parent (r97 code).

For example:

let obj = new THREE.Object3D()
let p1 = new THREE.Group()
let p2 = new THREE.Group()

p1.add(obj) // obj.parent == p1
p2.add(obj) // 1. three.js calls p1.remove(obj) 2. obj.parent == p2

In addition to this limitation, as pointed out by @Mugen87, your cubes must not only be able to belong to multiple groups but also enter and leave those groups based on their positions. This suggests that you may need to transform the cubes individually. While using a THREE.Group can help in visualization, it may require additional effort to implement due to the added complexity.

Answer 3

Answer №2

While this response may come a bit later, consider approaching the problem differently by organizing the cubes that require turning simultaneously. Activate the turn function on this group and rotate them together before clearing the group for a more efficient solution.

Answer 4

While this response may come a bit later, consider approaching the problem differently by organizing the cubes that require turning simultaneously. Activate the turn function on this group and rotate them together before clearing the group for a more efficient solution.

THREE.JS: Organizing Objects into Multiple Groups

Answer №1

Answer №2

Similar questions

Two liquid level divs within a container with a set height

Vue.js transition-group does not apply the *-move class

Guide on fetching data from a different php file using jQuery's .load() method?

Guide to verifying a Django form with AngularJs

Tips for enabling the background div to scroll while the modal is being displayed

Error: The term 'RequestCompleted' is not recognized by Microsoft JScript

How to change a date object into a datestring using the TZ format in JavaScript

Is there a universal method to transform the four array values into an array of objects using JavaScript?

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

What does dist entail?

"Looking to access your Express app in a VM from the internet? Here's how

Leveraging JSON data to dynamically create HTML elements with multiple class names and unique IDs, all achieved without relying on

Utilizing dispatch sequentially within ngrx StateManagement

Retrieve the title of a webpage using cheerio

How to simulate keyboard events when a dropdown list is opened in an Angular application

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

Detecting When a User Reaches the Bottom of the Screen in REACTjs

Is it possible to customize the pagination-control labels from numbers (1 2 3) to different values, such as 'Anything1 Anything2 ...', by utilizing ngFor* with an array in ngx-pagination?

Is there a more efficient way to optimize my coding for this Cellular Automata project?

The useEffect alert is triggered before the component is re-rendered