What is the method for generating a random Vector3 inside a sphere?

Question

What is the method for generating a random Vector3 inside a sphere?

Recently, I've been experimenting with creating a random point within a sphere. However, I seem to be struggling in getting it right. The current code I have written actually returns a point within a cube instead of a sphere. I suspect there might be something related to the Math.PI function that I'm missing out on.

  #createParticlePosition() {
    const shape = this.options.shape;
    // shape.radius = 2;
    if (shape.type === 'sphere') {
      return new Three.Vector3(
        (Math.random() * shape.radius - (shape.radius / 2)) * 1.0,
        (Math.random() * shape.radius - (shape.radius / 2)) * 1.0,
        (Math.random() * shape.radius - (shape.radius / 2)) * 1.0
      );
    }
  }

javascript three.js

Answer 1

Answer №1

You are simply creating boxes at the moment. Your calculations for x,y,z values are linear, not spherical. To handle these calculations in a more spherical manner, you can make use of Three.js's built-in method called Vector3.randomDirection:

const maxRadius = 2;

// Generate random value within [0, 2]
const randomRadius = Math.random() * maxRadius;

// Create a new vector
const randomVec = new THREE.Vector3();

// Point the vector in a random direction with a radius of 1
randomVec.randomDirection();

// Adjust the vector to match the random radius
randomVec.multiplyScalar(randomRadius);

This approach uses an internal method to prevent density accumulation around the poles.

https://i.sstatic.net/0ihC4.png

Answer 2

You are simply creating boxes at the moment. Your calculations for x,y,z values are linear, not spherical. To handle these calculations in a more spherical manner, you can make use of Three.js's built-in method called Vector3.randomDirection:

const maxRadius = 2;

// Generate random value within [0, 2]
const randomRadius = Math.random() * maxRadius;

// Create a new vector
const randomVec = new THREE.Vector3();

// Point the vector in a random direction with a radius of 1
randomVec.randomDirection();

// Adjust the vector to match the random radius
randomVec.multiplyScalar(randomRadius);

This approach uses an internal method to prevent density accumulation around the poles.

https://i.sstatic.net/0ihC4.png

Answer 3

Answer №2

In order to evenly distribute points within a sphere with direction and radius parameters, the equation for computing the radius is

Math.sqrt( r * r * Math.random());

The snippet showcases two point clouds - the red one using a simple formula of r * Math.random(), while the aqua one utilizes the formula mentioned above:

body{
  overflow: hidden;
  margin: 0;
}

<script type="module>
import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4e52485f5f7a0a140b090c">[email protected]</a>";
import {OrbitControls} from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74001c06111134445a4547425a44">[email protected]</a>/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
scene.background = new THREE.Color(0x160016);
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 8);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;

let pts = new Array(1000).fill().map(p => {
  let rMax = 2 * Math.random();
  return new THREE.Vector3().randomDirection().multiplyScalar(rMax);
})

let g = new THREE.BufferGeometry().setFromPoints(pts);
let m = new THREE.PointsMaterial({size: 0.1, color: "red"})
let p = new THREE.Points(g, m);
p.position.x = -2;
scene.add(p)

let pts2 = new Array(1000).fill().map(p => {
  let rMax = 2;
  let r = Math.sqrt(rMax * rMax * Math.random());
  return new THREE.Vector3().randomDirection().multiplyScalar(r);
})

let g2 = new THREE.BufferGeometry().setFromPoints(pts2);
let m2 = new THREE.PointsMaterial({size: 0.1, color: "aqua"})
let p2 = new THREE.Points(g2, m2);
p2.position.x = 2;
scene.add(p2)

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
});
</script>

For further reading:

Answer 4

In order to evenly distribute points within a sphere with direction and radius parameters, the equation for computing the radius is

Math.sqrt( r * r * Math.random());

The snippet showcases two point clouds - the red one using a simple formula of r * Math.random(), while the aqua one utilizes the formula mentioned above:

body{
  overflow: hidden;
  margin: 0;
}

<script type="module>
import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4e52485f5f7a0a140b090c">[email protected]</a>";
import {OrbitControls} from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74001c06111134445a4547425a44">[email protected]</a>/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
scene.background = new THREE.Color(0x160016);
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 8);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;

let pts = new Array(1000).fill().map(p => {
  let rMax = 2 * Math.random();
  return new THREE.Vector3().randomDirection().multiplyScalar(rMax);
})

let g = new THREE.BufferGeometry().setFromPoints(pts);
let m = new THREE.PointsMaterial({size: 0.1, color: "red"})
let p = new THREE.Points(g, m);
p.position.x = -2;
scene.add(p)

let pts2 = new Array(1000).fill().map(p => {
  let rMax = 2;
  let r = Math.sqrt(rMax * rMax * Math.random());
  return new THREE.Vector3().randomDirection().multiplyScalar(r);
})

let g2 = new THREE.BufferGeometry().setFromPoints(pts2);
let m2 = new THREE.PointsMaterial({size: 0.1, color: "aqua"})
let p2 = new THREE.Points(g2, m2);
p2.position.x = 2;
scene.add(p2)

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
});
</script>

For further reading:

What is the method for generating a random Vector3 inside a sphere?

Answer №1

Answer №2

Similar questions

The shared service is experiencing difficulties in transferring data to the following component

Sending data from an Ionic application to a server

Maximizing the potential of a single .js file for multiple .html pages with AngularJS

Assigning names to the points on the AxisHelper component in THREE.js

Execute a website's javascript function by using Python

Creating a visual representation of system uptime using PHP and JavaScript by aggregating a series of heartbeats

Launch a new window with the window.open() method and execute a function on the newly opened window

The brush functionality does not display rotated x-axis labels

Jest test failing due to issues with a stateful React component containing an asynchronous function

h1 tag set for jQuery AJAX activation

Interacting with various cookies created from user-provided input (specifically from textboxes) simultaneously

Issue with fs.createReadStream function: it is not recognized as a valid function

Issues with the functionality of the login page's HTML and JavaScript

require a global function that accesses a variable inside it

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

Maintain user authentication status in Vuex after page refresh

Tips for properly formatting Sequelize association fetching in your application

Issue encountered while retrieving JSON data from Github

Displaying Vue.js tooltips in a table when the text gets clipped

Steps for including a URL in an ng-repeat when it is not included in the JSON object