Spin a three-dimensional cube on a platform using three.js with a unique functionality

I am attempting to create an animation featuring a cube on a flat surface. The cube can be rotated along the x/y axis only, with no need to show its underside. I want to be able to tip the cube over any edge - when a side of the cube touches the surface, it should stick to it (causing the surface to change color) and then disappear from the cube.

Here is an illustration of what I am trying to achieve:

https://i.sstatic.net/B3MGz.png

When the cube is tipped in the same direction one more time.

https://i.sstatic.net/s8L5P.png

Can someone please advise me on how to accomplish this?

Any assistance would be greatly appreciated.

Answer №1

Thank you for your inquiry; I saw it as a challenge and dedicated several hours to creating something similar. You can view the outcome here: http://codepen.io/usefulthink/pen/zoLLpP. I have organized and annotated the code, so you may find valuable information in there (feel free to utilize the code as you wish).

In essence, there are a few key points to highlight:

  • As mentioned by @Carlos in their response (link), I assembled the cube and wireframe using separate meshes and utilized THREE.Group to keep them connected.
  • There are two particularly useful methods in three.js, namely THREE.SceneUtils.attach and THREE.SceneUtils.detach, which proved very beneficial for this project (I was unaware of them before).

The general procedure I followed is as follows:

  • Prior to commencing the animation, I checked if there was a detachable face at the bottom of the box. Detachment was carried out using

    THREE.SceneUtils.detach(bottomFace, bottomFace.parent, scene);
    

    This action removes the object from its parent (in this case, the group containing the moving parts of the cube) and returns it to the scene at the same position. Additionally, this triggers the material switch animation.

  • For the animation, a pivot point is necessary to rotate the cube along its edges. This functionality was achieved using special groups and the attach/detach methods discussed earlier. Refer to the

    function setPivotPosition(position) {}
    

    to understand how any chosen point can serve as the pivot for object rotation.

  • Utilizing a distinct group as the pivot point offers a significant advantage: we can update the animation through the pivot.rotation property provided by three.js. This feature also enables us to incorporate tweening libraries like tween.js to manage the animation smoothly.

If you require further clarification on this topic, please do not hesitate to reach out :)

Answer №2

Have you ever considered utilizing square surfaces in place of a cube? By incorporating six square surfaces and animating the assembly, you can experiment with different rotation axes for each step.

Check out some examples of rotations here:

How to rotate a 3D object on axis using three.js?

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

Displaying various Vue components within Laravel 6.x

After diving into Laravel and Vue, I managed to put together a navigation component as well as an article component. The problem I'm facing is that although my navigation vue component is visible, the article component seems to be missing. Reviewing ...

Determine the placement of a <div> based on information stored in localStorage

I'm diving into the world of localStorage and trying to figure out how it works. To get a better understanding, I decided to create an HTML page that allows users to drag and drop tiles around the screen. Here's a snippet of the code I came up ...

What is the proper way to generate an iframe with a width set to "100%" or left empty, rather than width = "100"?

I am currently utilizing vimeowrap to iterate through a playlist of videos. I would like the iframe that is generated by vimeowrap to have either a width and height set to "100%" or nothing at all. For more information on Vimeo Wrap, visit: To see my tes ...

The deletion request using the form in Express is experiencing issues and not functioning properly

When attempting to delete data from a database using a form in node.js and express, I am encountering issues with the deletion process. It seems that there are only two methods available - get and post - and no specific delete method. router.js code rout ...

AngularJS modal popup with a selectable table

Is there a way to open a modal popup containing a table in my application? I'm trying to achieve this by setting up an event in my app.js that triggers the modal when a row is clicked. Additionally, I need to update a field with the selected item&apos ...

Is there a way to adjust the text color of a label for a disabled input HTML element?

If the custom-switch is active: the label text color will be green. If the custom-switch is inactive: the label text color will be red. A JavaScript (JQuery) method call can be used to activate one button while deactivating another. The Issue It appe ...

Retrieving values from multiple inputs in NightwatchJS

Can nightwatchjs be used to retrieve values from multiple inputs simultaneously? I am looking to verify the values of several input fields at once. Your help is much appreciated. ...

How can one continue repeating a series in async.js until an unforeseen error arises?

Is it possible to continuously execute a series of tasks in async.js until an unexpected error occurs? For example: async.series([ function(callback) { // perform task }, function(callback) { // perform another task }, ...

Determine whether a request is for CSS or JavaScript when using NodeJS and Express

My routing configuration includes the following setup: app.get('*', function (req, res, next) { req.xhr ? next() : res.render('layout/layout'); }); The idea behind this is to return the base layout if the request is not an XMLHttp ...

Adding dropdown values to text area

I'm encountering a simple issue. My goal is to allow users to select values from a dropdown menu and have those values added to a text area. Additionally, users should be able to input extra content in the text area. Here's what I want: the user ...

Error due to PlatformLocation's location dependency issue

My AppComponent relies on Location (from angular2/router) as a dependency. Within the AppComponent, I am using Location.path(). However, when running my Jasmine test, I encountered an error. Can you help me identify the issue with my Jasmine test and guide ...

Pressing the cancel button triggers a refresh of the page within the iframe

I currently have an iframe embedded in my website, and within it is the following jQuery code: $(document).ready(function() { $('#print_button').click(function() { window.print(); }); }); The issue at hand is that when I click ...

JavaScript - Removing Content from an Element

I have a coding script that adds an image preview of uploaded images. The issue I am facing is that the previous image does not clear when the form is filled out again. The id of the div where thumbnail images are being displayed is "thumbnail". Can someo ...

TypeScript Implementation of ES6 Arrow Functions

Just diving into Typescript, I'm struggling to figure out the solution. I tried researching and looked into destructuring, but still unable to make it work. import React from "react"; import { StyleSheet, Text, View } from "react-native"; const st ...

Dynamically taking input in Vue JS while using v-for loop

Hey there! I'm trying to get input in this specific manner: itemPrices: [{regionId: "A", price: "200"},{regionId: "B", price: "100"}] Whenever the user clicks on the add button, new input fields should be added ...

Passing data between parent and child components within an Angular application using mat tab navigation

I am currently working on a project, which can be found at this link. Current Progress: I have implemented a mat tab group with tabs inside the app-component. When a tab is clicked, a specific component is loaded. Initially, most of the data is loaded in ...

Generating VueJS Syntax from JSON Data

My goal is to retrieve locale language variables from a JSON Request generated by Laravel and load them into VueJS. VueJS does not natively support locales, so I am facing issues with the ready function alert not working while the random text data variable ...

reactjs implementation of a virtualized list

Recently, I stumbled upon the React-window library and found it to be incredibly useful. Intrigued by how it was built, I decided to try my hand at creating my own virtualized list. However, I encountered an issue where the list could only scroll up to it ...

Display HTML content generated by JavaScript in the page source

Can the HTML elements I've added through JavaScript and jQuery codes be displayed in the page source (ctrl+U)? ...

Verifying dynamic number inputs generated using JavaScript values and calculating the total with a MutationObserver

Preamble: I've referenced Diego's answer on dynamic field JS creation and Anthony Awuley's answer on MutationObserver for the created fields. After extensive searching, I found a solution that meets my needs, but it feels somewhat bulky des ...