3D spinning icosahedron adorned with circles at each corner using three.js

Question

3D spinning icosahedron adorned with circles at each corner using three.js

In my project, I am working with an interactive icosahedron mesh that undergoes rotation. As part of the animation loop, circle geometries are dynamically added, and their locations are set to each vertex of the mesh at every frame.

geometry = new THREE.IcosahedronGeometry(isoRadius, 1);
var material = new THREE.MeshBasicMaterial({
    color: wireframeColor,
    wireframe: true
});

isoMesh = new THREE.Mesh(geometry, material);
scene.add(isoMesh);

The circle geometries' positions are updated as the icosahedron rotates:

function animate() {

    isoMesh.rotation.x += 0.005;
    isoMesh.rotation.y += 0.002;

    // update vertices
    isoMesh.updateMatrix(); 
    isoMesh.geometry.applyMatrix(isoMesh.matrix);
    isoMesh.rotation.set(0, 0, 0);

    for (var i = 0; i < geometry.vertices.length; i++) {

        nodes[i].position.copy(geometry.vertices[i]);
        nodes[i].lookAt(camera.position);
    }

I've noticed a peculiar behavior where if I remove the line "isoMesh.rotation.set(0, 0, 0);", the icosahedron rotates correctly but the nodes rotate too quickly. However, when I add that line back in, the nodes rotate correctly but the icosahedron doesn't move. This discrepancy between the rotations of the nodes and the mesh has me puzzled.

My understanding of three.js is still limited, so I'm unsure why this difference in rotation behavior occurs. It seems there may be a distinction between the mesh and the geometry, leading to this issue. Can anyone shed light on what might be causing this unexpected outcome?

javascript animation graphics three.js geometry

Answer 1

Answer №1

The solution is multi-faceted.

Your Dodecahedron:

You made good progress by rotating your dodecahedron and its vertices. Instead of applying the rotation to all vertices (which would result in drastic rotation), apply it only to the mesh. However, this won't update the vertices automatically. Let's address that shortly.

Your Circles:

Placing them at each vertex is a step in the right direction, but as mentioned by WestLangley, using lookAt for objects with rotated/transferred parents won't work. Therefore, you should add the circles directly to the scene. If you can't determine the new positions of the vertices after rotation, the circles will stay fixed in place. We need to obtain those updated vertex positions.

Obtaining Updated Vertex Positions:

While rotating the mesh updates its transformation matrix rather than the vertices, we can leverage this updated transformation matrix to determine the updated positions for the circles. The method Object3D.localToWorld enables us to convert a local THREE.Vector3 (such as your dodecahedron's vertices) into world coordinates. (Note that cloning each vertex is necessary because localToWorld modifies the provided THREE.Vector3).

Key Points:

To focus on elements related to your query, I've compiled relevant JavaScript code in the snippet below.

Avoid modifying geometry unnecessarily.
Reserve lookAt for objects in the global coordinate system.
Utilize localToWorld and worldToLocal for vector transformations across different coordinate systems.

// This part was already implemented
var geometry = new THREE.DodecahedronGeometry(10, 1);
var material = new THREE.MeshBasicMaterial({
    color: "blue",
    wireframe: true
});

var dodeMesh = new THREE.Mesh(geometry, material);
scene.add(dodeMesh);

// Directly add your circles to the scene
var nodes = [];
for(var i = 0, l = geometry.vertices.length; i < l; ++i){
  nodes.push(new THREE.Mesh(new THREE.CircleGeometry(1, 32), material));
  scene.add(nodes[nodes.length - 1]);
}

// Call this function in render. Retrieve world positions of vertices and assign them to the circles.
var tempVector = new THREE.Vector3();
function updateVertices(){
    if(typeof dodeMesh !== "undefined" && typeof nodes !== "undefined" && nodes.length === dodeMesh.geometry.vertices.length){
    dodeMesh.rotation.x += 0.005;
    dodeMesh.rotation.y += 0.002;
    for(var i = 0, l = nodes.length; i < l; ++i){
      tempVector.copy(dodeMesh.geometry.vertices[i]);
      nodes[i].position.copy(dodeMesh.localToWorld(tempVector));
      nodes[i].lookAt(camera.position);
    }
  }
}

html *{
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
}

#host {
width: 100%;
height: 100%;
}

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="host"></div>

<script>
// INITIALIZATION
var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
document.getElementById('host').appendChild(renderer.domElement);

var stats= new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0';
document.body.appendChild(stats.domElement);


var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;

var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 5.0; // Increase rotation speed slightly

var scene = new THREE.Scene();

var light = new THREE.PointLight(0xffffff, 1, Infinity);
camera.add(light);

scene.add(light);

function render(){
  if(typeof updateVertices !== "undefined"){
    updateVertices();
  }
  renderer.render(scene, camera);
  stats.update();
}

function animate(){
  requestAnimationFrame(animate);
  trackballControl.update();
  render();
}

animate();
</script>

Answer 2

The solution is multi-faceted.

Your Dodecahedron:

You made good progress by rotating your dodecahedron and its vertices. Instead of applying the rotation to all vertices (which would result in drastic rotation), apply it only to the mesh. However, this won't update the vertices automatically. Let's address that shortly.

Your Circles:

Placing them at each vertex is a step in the right direction, but as mentioned by WestLangley, using lookAt for objects with rotated/transferred parents won't work. Therefore, you should add the circles directly to the scene. If you can't determine the new positions of the vertices after rotation, the circles will stay fixed in place. We need to obtain those updated vertex positions.

Obtaining Updated Vertex Positions:

While rotating the mesh updates its transformation matrix rather than the vertices, we can leverage this updated transformation matrix to determine the updated positions for the circles. The method Object3D.localToWorld enables us to convert a local THREE.Vector3 (such as your dodecahedron's vertices) into world coordinates. (Note that cloning each vertex is necessary because localToWorld modifies the provided THREE.Vector3).

Key Points:

To focus on elements related to your query, I've compiled relevant JavaScript code in the snippet below.

Avoid modifying geometry unnecessarily.
Reserve lookAt for objects in the global coordinate system.
Utilize localToWorld and worldToLocal for vector transformations across different coordinate systems.

// This part was already implemented
var geometry = new THREE.DodecahedronGeometry(10, 1);
var material = new THREE.MeshBasicMaterial({
    color: "blue",
    wireframe: true
});

var dodeMesh = new THREE.Mesh(geometry, material);
scene.add(dodeMesh);

// Directly add your circles to the scene
var nodes = [];
for(var i = 0, l = geometry.vertices.length; i < l; ++i){
  nodes.push(new THREE.Mesh(new THREE.CircleGeometry(1, 32), material));
  scene.add(nodes[nodes.length - 1]);
}

// Call this function in render. Retrieve world positions of vertices and assign them to the circles.
var tempVector = new THREE.Vector3();
function updateVertices(){
    if(typeof dodeMesh !== "undefined" && typeof nodes !== "undefined" && nodes.length === dodeMesh.geometry.vertices.length){
    dodeMesh.rotation.x += 0.005;
    dodeMesh.rotation.y += 0.002;
    for(var i = 0, l = nodes.length; i < l; ++i){
      tempVector.copy(dodeMesh.geometry.vertices[i]);
      nodes[i].position.copy(dodeMesh.localToWorld(tempVector));
      nodes[i].lookAt(camera.position);
    }
  }
}

html *{
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
}

#host {
width: 100%;
height: 100%;
}

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<div id="host"></div>

<script>
// INITIALIZATION
var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
document.getElementById('host').appendChild(renderer.domElement);

var stats= new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0';
document.body.appendChild(stats.domElement);


var camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
camera.position.z = 50;

var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 5.0; // Increase rotation speed slightly

var scene = new THREE.Scene();

var light = new THREE.PointLight(0xffffff, 1, Infinity);
camera.add(light);

scene.add(light);

function render(){
  if(typeof updateVertices !== "undefined"){
    updateVertices();
  }
  renderer.render(scene, camera);
  stats.update();
}

function animate(){
  requestAnimationFrame(animate);
  trackballControl.update();
  render();
}

animate();
</script>

3D spinning icosahedron adorned with circles at each corner using three.js

Answer №1

Similar questions

Create an array populated with unclosed HTML tags that need to be rendered

Tips for resolving the setAttribute() function error message: "Argument of type 'boolean' is not assignable to parameter of type 'string'"

Prevent clicking on form until setInterval has been cleared using React useEffect

Using Javascript within HTML: A guide on when to utilize semi-colons and when to implement the return false statement

Javascript handling scrolling and repositioning

Is there a way to eliminate the mongoose event listener registered onConnect in the Socket.io Leak issue?

Leveraging the power of Express.js, transmit local data alongside a

Retrieve the text label from the parent option group

What is the method for determining the gaps between cells in a grid-based puzzle game similar to Sudoku?

Removing/modifying selected choices in an element

Why does parsing the GET response fail intermittently with Jquery, ajax, and JSON?

Having trouble retrieving directive parameters in Vue.js?

Can Vuex mapActions be utilized within a module that is exported?

The pagination functionality in the customized React Native list component is malfunctioning

Unable to assign a value to a variable within a Mongoose callback function

What methods can I use to insert an array of objects into a Query?

Converting Rails data into JSON objects using hashing techniques

The DAT GUI controls are mysteriously absent from the scene

Ways to conceal the player controls with mediaelementjs.com

Don't leap to the top of the page, take your time!