Shuffle the dots on the sphere and assign each one a unique identifier

Question

Shuffle the dots on the sphere and assign each one a unique identifier

I am currently working on creating a spherical design using three.js. My goal is to have clickable dots and meshes embedded within this sphere. To achieve this, I believe that assigning names to each dot on the sphere will be essential. I have two specific questions: 1. How can I randomize the positions of the dots on the sphere? 2. What is the best approach for naming the dots and meshes?

THREE.IcosahedronGeometry = function(radius, detail) {
  // Geometry code here
};

// Implementing the geometry parameters and constructor

// Setting up the scene with camera and renderer

// Creating the vertex points using an Icosahedron Geometry

// Configuring the BufferGeometry for the points

// Adding material and color to the Points

// Creating an Object3D container for our points and mesh

// Adjusting camera position and setting up rendering loop

You can view the complete code and visual representation at http://codepen.io/anon/pen/ZLpPxB.

javascript 3d three.js

Answer 1

Answer №1

Check out this example demonstrating how to randomize the points: http://codepen.io/usefulthink/pen/WRoboo?editors=0010

The key concept here is:

var v3 = new THREE.Vector3();
var spherical = new THREE.Spherical();

for (var j = 0; j < vertices.length; j += 3) {
    v3.fromArray(vertices, j);
    spherical.setFromVector3(v3);

    spherical.phi += rnd(variation, -variation);
    spherical.theta += rnd(variation, -variation);

    v3.setFromSpherical(spherical);
    v3.toArray(vertices, j);
}

In essence, using spherical coordinates (phi/theta/r instead of x/y/z, similar to latitude/longitude) is an effective method for manipulating points on a sphere's surface. Here, each vertex is converted into spherical form, theta/phi values are adjusted slightly (with the radius unchanged), and the altered values are written back to the vertices array.

If you're thinking about assigning names to these points, would it be something like this?

var pointNames = {
  frank: 12, 
  maria: 7, 
  steve: 3, 
  melissa: 4
};

function getPointByName(name) {
  const start = pointNames[name] * 3;
  return new THREE.Vector3().fromArray(vertices, start);
}

Answer 2

Check out this example demonstrating how to randomize the points: http://codepen.io/usefulthink/pen/WRoboo?editors=0010

The key concept here is:

var v3 = new THREE.Vector3();
var spherical = new THREE.Spherical();

for (var j = 0; j < vertices.length; j += 3) {
    v3.fromArray(vertices, j);
    spherical.setFromVector3(v3);

    spherical.phi += rnd(variation, -variation);
    spherical.theta += rnd(variation, -variation);

    v3.setFromSpherical(spherical);
    v3.toArray(vertices, j);
}

In essence, using spherical coordinates (phi/theta/r instead of x/y/z, similar to latitude/longitude) is an effective method for manipulating points on a sphere's surface. Here, each vertex is converted into spherical form, theta/phi values are adjusted slightly (with the radius unchanged), and the altered values are written back to the vertices array.

If you're thinking about assigning names to these points, would it be something like this?

var pointNames = {
  frank: 12, 
  maria: 7, 
  steve: 3, 
  melissa: 4
};

function getPointByName(name) {
  const start = pointNames[name] * 3;
  return new THREE.Vector3().fromArray(vertices, start);
}

Shuffle the dots on the sphere and assign each one a unique identifier

Answer №1

Similar questions

What are the steps to update your profile picture using Angular?

The beta version of Angular 2.0 introduces the BrowserDomAdapter for easy access to the DOM

Docusaurus font loading specifically optimized for body text, excluding headings

With a GroupAvatar, my Avatar named "max" likes to dance to the beat of its own drum rather than following the rules of my

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

Guide to importing the Slider Component in React using Material-UI

Moving the words from textArea to each 'ol' element using JavaScript

Exploring Checkbox Limiting with jQuery

Struggling to Implement Middleware on Router in ExpressJS?

JavaScript error: Cannot use `.splice()` on [array] ("Uncaught TypeError: collisions.splice is not a function")

What is the best approach to managing a Symfony form that contains TWO CollectionType child forms?

What is the best way to automatically select a checkbox when using ng-repeat on page

Changing Page Content with Ajax Post-Redirect Pattern

What is the best method to set variables to zero using this array in JavaScript?

Which one is better: JSON in PHP or JSON in Javascript?

Adding shadows to a ShaderMaterial in three.js: A step-by-step guide

It is not possible to trigger an input click programmatically on iOS versions older than 12

Utilize a method in Vue.js to filter an array within a computed property

Unable to differentiate between .jsx and .js files

Deactivate CS:GO Dedicated Server using Node.js child_process