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 :)