Is there a way to adjust the orientation of an object in WebGL using the THREE.js library by utilizing its position as a reference

I'm currently working on a Rubik's cube project in WebGL. I have successfully created 27 small cubes that come together to form one large cube. However, I am struggling with how to rotate specific groups of cubes based on their position rather than by individual names. Since the cubes are constantly changing positions, I need a dynamic method to identify and manipulate them as needed. Any advice on how I can achieve this? Is there a way to select and rotate a group of cubes based on their relative positions within the larger cube structure?

At this point in my code, I have only managed to create the individual cubes and assemble them into the larger cube shape.

Your assistance would be greatly appreciated. Thank you in advance.

javascriptthree.js

Answer №1

Recently, I've been involved in a fascinating project focused on simplifying the creation of WebGL based apps. This project goes by the name whitestormJS and you can explore it further by visiting this link

Basically, whitestorm is designed as an effortless wrapper for Three.js with a user-friendly API that streamlines various processes. Regardless of your current platform, using groups to manipulate all the faces is highly recommended. For a comprehensive guide on rotating objects using Three.js, refer to Jonathan Petitcolas' detailed tutorial here.

//To rotate each face, create a group and add respective cubes
var face1 = new THREE.Group();
group.add(piece1);
group.add(piece2);
// Repeat for other pieces, then apply rotation on the correct axis
pivot.rotation.y = 1.5708; //90 degrees in radians

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

Issue with Firebase Real-time database failing to acknowledge authentication status

I am encountering difficulties when trying to access my real-time databases in Firebase with set rules. I have a total of 3 databases - 1 default and 2 additional ones. The rules for all three are the same: { "rules": { ".read": & ...

javascriptnode.jsfirebasefirebase-realtime-databaseelectron

What is the best way to implement an AJAX request to update the page without having to refresh it?

My to-do app currently reloads the page when I click on "Add" in order for the changes to take effect and display the items. However, I want to implement AJAX requests so that the page does not need to refresh. Can anyone guide me on how to achieve this? ...

javascriptnode.jsajaxexpressejs

When working with React Native, encountering an issue where passing props using the Map function results in an error stating "undefined is not a function" near the section of code involving the

Hey there! I'm currently facing an issue with fetching data from my Sanity CMS and passing it as props to a child component. Interestingly, the same code worked perfectly on another screen, but here I seem to be encountering an error. Although the dat ...

javascriptreactjsreact-nativereact-hooksgraphql

Getting the most out of option select in AngularJS by utilizing ng-options

I'm currently working with AngularJS and I am interested in utilizing ng-options for a select tag to showcase options organized under optgroups. Here is the array that I intend to use in my select option: $scope.myList = [ { "codeGroupComp ...

javascripthtmlangularjs

Getting the final element in Selenium Webdriver with JavaScript

When I create a script to confirm the successful addition of an element, I always find that the added element is positioned at the end of the page or becomes the last element in a different div. In this case, I am utilizing selenium webdriver and javascrip ...

javascriptseleniumselenium-webdrivercss-selectorswebdriver

How to Retrieve Values from a Movie API?

Struggling with The Movie Database API integration. Specifically, I'm stuck on retrieving the "keys" variable when calling the function with the Movie's id. I'm still learning JavaScript, so this is proving to be a bit challenging. Any assis ...

javascriptfetch-apithemoviedb-api

Panning is not compatible with shared camera OrbitControls

I am attempting to set up two renderers on separate div containers. Each renderer should have its own OrbitControls to update the camera associated with it. However, the camera is shared between the two renderers. The objective is to synchronize the camer ...

javascriptthree.js

How can I resolve the Vue warning about an unknown custom element <password-input>?

I've been working on resolving an error within a component, but unfortunately, I'm still encountering issues. The error message is as follows: [Vue warn]: Unknown custom element: - have you registered the component correctly? For recursive co ...

javascriptlaravelvue.js

Is there a way for me to showcase the latitude and longitude retrieved from JSON data on a Google Map using modals for each search result in Vue.js?

After receiving JSON data with search results, each containing latitude and longitude coordinates, I am attempting to display markers on a Google map modal when clicking "View Map". However, the code I'm using is not producing the desired outcome. Th ...

javascriptjquerygoogle-mapsvue.jsvue-component

Instructions for converting a blob URL into an audio file and securely storing it on the server

After successfully recording and adding the audio to my HTML page within the audio tag, I managed to obtain the blob source URL from the tag using the following line: var source = document.getElementById("Audio").src; The blob source URL looks ...

javascriptjqueryhtmlaudioblob

Tips for transferring date values in an ajax request to a web application handler

I am currently working on plotting a graph between two dates using Google Charts. My goal is to send date values to the controller, which is implemented with webapp2. However, I am facing difficulties in figuring out how to send date values to the controll ...

javascriptjqueryajaxwebapp2

Utilizing a variable name to specify an array or object for searching in Javascript and jQuery

Looking to improve my JavaScript skills as a beginner. I have a program that can randomly select an item from an object, but now I want it to pick another item from an object with the same name as the first selection. However, I'm struggling with usin ...

javascriptjqueryarraysobject

When attempting to print certain attributes, the Node.JS array unexpectedly becomes undefined

While attempting to print a specific attribute such as "Full time or part time" in the getEmployeesByStatus() function, I encountered an issue where it suddenly returns undefined even though the entire array prints when I try to display it. This problem ha ...

javascriptarraysnode.js

Displaying a dropdown selection that showcases two object properties lined up side by side

I need the select option dropdown values to display employee names along with their titles in a lined up format. For instance, if my values are: Bob Smith Director Mike Kawazki HR Jane Doe Manager I want them to be shown as: Bob Smith Director Mi ...

javascripthtmlcss

Creating GeoJson using JavaScript

Currently, I am retrieving a latitude/longitude array using Ajax $.ajax({ type: "POST", url: '../m/m_share.php', data: 'zone=' + zone, dataType: 'json', success: function(tab) { var i = 0; ...

javascriptphpajaxjsongeojson

What is the best way to display multiple sets of table data on a single page without any connections between them?

Is there a way to combine data from two tables (dept_db, role_db) and display it on my createUsers page? I am looking for a solution where the page only needs to be rendered once to retain the previous query results. Thank you. exports.createUsers = func ...

javascriptpostgresqlexpresssequelize.js

Ways to verify that a javascript function generates an object and executes a method within that object

Currently, I am in the process of updating server code written in nodejs and incorporating unit tests into the mix. However, I have encountered a challenge that I need assistance with: classX.prototype.methodX = function () { // Create new session ...

javascriptnode.jsunit-testingsinon

modifying the appearance of the play button through a JavaScript event without directly altering it

I am currently working on building a music player from scratch using HTML, CSS, and JavaScript only. To store the list of songs, I have created an array named "songs" with details such as song name, file path, and cover image path. let songs = [ {songNa ...

javascripthtmlcssevent-handlingaddeventlistener

"Mastering the art of passing variables within the index parameter for JavaScript push method

I need help passing a variable inside index in JavaScript push while working with Angular. Here is my current code: angular.forEach(Val, function (Value,Key) { angular.forEach(Value, function (Value1,Key1) { saveDetailArr.push({ 'option_i ...

javascriptarraysangularjsforeach

Issues are arising with back4app's cloud code due to an invalid function being

My current challenge involves implementing a payment system in an iOS app using Conekta. Previously, everything was working smoothly with Braintree in the cloud code on Back4App, but after switching to Conekta, the Back4App calls keep failing with an "Inva ...

javascriptiosnode.jspaymentback4app