Spinning in a circular motion around the twelve-sided shape

Question

Spinning in a circular motion around the twelve-sided shape

I am currently working on a Three.js project involving a dodecahedron. My goal is to have the camera zoomed in on one side of the dodecahedron and upon pressing a button, I want it to zoom out, rotate to face another side, and then zoom back in.

To clarify:

Imagine the camera is focused on side 1 and when I press "5", I expect the camera to zoom out, rotate towards side 5, and then zoom back in. It's crucial that the camera remains parallel to the base of the pentagon it's facing, maintaining the correct perspective throughout the movement. https://i.sstatic.net/qt4sd.jpg

Initially, I decided to start with a cube instead of diving into something more complex. I experimented with tweens (triggered by pressing 'G') to demonstrate basic movements, but the results weren't satisfactory in the fiddle link provided. jsfiddle

In an attempt to streamline the process, I began documenting the positions and rotations of each side view of the cube to identify any patterns. Although I noticed some recurring values, I struggled to translate them into a functional algorithm, especially for a dodecahedron. The recorded values are as follows:

side1 (0, 0,  600) (0, 0, 0)
side2 (600, 0,  0) (0, pi/2, 0)
side3 (0, 0, -600) (0, pi, 0);
side4 (-600, 0, 0) (0, -pi/2, 0);
side5 (0, 600,  0) (-pi/2, 0, 0);
side6 (0, -600, 0) (pi/2, 0, 0);

Although I can discern some patterns and relationships among these values, I'm unsure how to incorporate them into a cohesive function. This step is essential before attempting the same approach with a more intricate shape like a dodecahedron. Any advice or guidance on where to focus my efforts next would be highly appreciated. While using multiple if clauses might seem feasible, I believe there's a better solution waiting to be discovered.

javascript 3d three.js

Answer 1

Answer №1

In order to tackle the issue at hand, our initial step involves determining the central coordinates of each facet of the dodecahedron.

Within the realm of three.js, a mesh comprises of triangles, with each triangle consisting of three points. The faces and vertices can all be located within mesh.geometry.faces and mesh.geometry.vertices. In the case of a dodecahedron, every side is made up of three faces and five vertices. By employing the normal of each face, we classify them into 12 groups based on shared normals and coplanar positioning. Subsequently, by calculating the average coordinates of the five points on each side, we arrive at the central coordinate.

Upon ascertaining these coordinates, our next course of action pertains to rotation. While one option entails rotating the dodecahedron while maintaining the camera's position, I opt for the alternative approach of fixing the dodecahedron and translating the camera instead. https://i.sstatic.net/yOuT1.png

The camera now gazes towards centerA, with the green circle marking its trajectory. This is necessitated by the need to preserve the distance between the camera and the dodecahedron's center.

To determine the target position, we simply scale the vector from centerB. As this vector's coordinates are in the object system, it becomes imperative to apply a matrix transformation to align them with the world system.

Subsequently, through an animated translation, the camera embarks on a curved path. Leveraging the parametric equation of a circle in 3D space facilitates this maneuver. For additional insights regarding this equation, refer to Parametric Equation of a Circle in 3D Space. Utilizing this formula, parameters θ1 for the camera position and θ2 for the target position are derived. The camera's position is duly updated using θ1 within each subsequent animation frame.

I have included explanatory notes on jsfiddle. (Although some bugs persist, updates are forthcoming.)

A different approach, elaborated upon in this post, involves maintaining the camera's perspective while rotating the object.

Answer 2