Creating a spherical shape using random particles in three.js

Can anyone assist me in creating a random sphere using particles in three.js?

I can create different shapes with particles, but I'm unsure how to generate them randomly.

Here's my current code:

// point cloud geometry
var geometry = new THREE.SphereGeometry(100, 100, 100);

material = new THREE.PointCloudMaterial({
    size: 1,
    transparent: true,
    opacity: 0.5,
    color: 0xffffff
});

// point cloud
var pointCloud = new THREE.PointCloud(geometry, material);

//add to scene
scene.add( pointCloud );

Any suggestions are greatly appreciated.

javascriptthree.js

Answer №1

Update based on feedback

This solution is effective in achieving the desired outcome: it randomly generates two angles and then converts them from polar (spherical) coordinates to cartesian coordinates using a predetermined distance (equivalent to the radius of the sphere).

        var distance = 100;    
        var geometry = new THREE.Geometry();

        for (var i = 0; i < 1000; i++) {

            var vertex = new THREE.Vector3();

            var theta = THREE.Math.randFloatSpread(360); 
            var phi = THREE.Math.randFloatSpread(360); 

            vertex.x = distance * Math.sin(theta) * Math.cos(phi);
            vertex.y = distance * Math.sin(theta) * Math.sin(phi);
            vertex.z = distance * Math.cos(theta);

            geometry.vertices.push(vertex);
        }
        var particles = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({color: 0xffffff}));
        particles.boundingSphere = 50;

        scene.add(particles);

(View working demo)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

prevent parent jQuery functions from interfering with child function execution

I am facing an issue with conflicting jQuery functions between parent and child elements. The child function is a bootstrap function, while the parent is a custom function. The main objective is to limit the height of the parent div (refer to the code belo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Leverage jQuery to Retrieve Text and Modify

My Content Management System automatically generates a time stamp for when a page was last updated. However, the format it provides is not ideal for my needs. I would like the date to be displayed in the US Standard way - May 24, 2013, without including th ...

javascriptjquery

Tips for managing modal closure when the InertiaJS form succeeds?

Hello everyone! Currently, I'm involved in a Laravel project where I am using laravel/breeze VueJS with Inertia. The login functionality is implemented using a bootstrap modal component. While validation and authentication are working smoothly, the on ...

javascriptlaravelvue.js

Sending a message to a specific client using socket.io

Currently delving into socket.io + node.js, I have mastered sending messages locally and broadcasting using the socket.broadcast.emit() function - where all connected clients receive the message. My next challenge is figuring out how to send a private mes ...

javascriptjqueryajaxnode.jssocket.io

Use jQuery to retrieve the number of items that have been selected in an ASP ListBox

Struggling to find a way to calculate the count of selected items from an ASP listbox using jQuery. Currently, encountering an issue where I am receiving "Cannot get property length of undefined or null reference" on the selectedOptions property. The var l ...

javascriptjqueryasp.netlistbox

Testing form submission in React with React Testing Library and checking if prop is called

Feel free to check out the issue in action using this codesandbox link: https://codesandbox.io/s/l5835jo1rm To illustrate, I've created a component that fetches a random image every time a button is clicked within the form: import { Button } from " ...

javascriptreactjsunit-testingjestjsreact-testing-library

Utilizing JSON Data with Angular

Currently, I am in the process of developing an AngularJS client that communicates with a REST API running on NodeJS. To retrieve data, I make GET requests by accessing specific URLs with stock symbols appended, such as localhost:8080/stocks/aapl for Apple ...

javascriptangularjsjsonnode.js

Tips for adjusting the text color of input fields while scrolling down

I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background ...

javascripthtmlcsswordpress

Switch the contenteditable HTML attribute in a dynamically generated table using PHP

Despite finding numerous articles and solutions, my code still refuses to work. What could I be overlooking? Below is a snippet of the code where the crucial part is marked at the comment '! HERE') <!-- Table with grades --> <table clas ...

javascriptphpjquerybootstrap-4

Comparing ASP.NET Core and Node.js: A Closer Look at Their Similar

After working with Node.js for some time, I have gained a deep understanding of how it operates internally, including the event loop and other aspects. However, I can't help but notice that ASP.NET Core bears a striking resemblance to Node.js. ASP.NE ...

javascriptc#asp.netnode.jsmultithreading

What steps can I take to prevent my JavaScript code from interfering with my pre-established CSS styles?

I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used Jav ...

javascripthtmlcss

Generate a JavaScript File/Blob from an image's URI

Can I generate a File or Blob object from an image URI? I am utilizing the Cordova Image Picker plugin in my mobile application to retrieve photo URIs like this: "file:///data/user/0/..../image.jpg" However, I am struggling to create a File or Blob objec ...

javascriptangularjscordovafirebasefirebase-storage

Ensure that JSON requests are written in English when using FullCalendar

I am currently working on implementing a multi-language application using FullCalendar. My goal is to have the calendar display in multiple languages while keeping the JSON request always in English. However, when I switch languages, the JSON request also ...

javascriptjqueryjsonfullcalendar

Struggles with handling asynchronous events in Angular

I'm currently working on a piece of code that iterates through an array containing 10 items. For each item, a request is made and the returned data is stored in another array. The entire process goes smoothly until reaching the line that contains $q.a ...

javascriptangularjsangular-promise

The Power of AngularJS - Unlocking the Potential of Module Configuration

Exploring the concepts in this AngularJS example: angular.module('myModule', [], function($provide) { $provide.factory('serviceId', function() { var shinyNewServiceInstance; //the factory function creates shinyNewServiceInsta ...

javascriptangularjs

Exploring the world of shaders and THREEjs for beginners

Currently, I am working on enhancing a vector field using perlin noise and have been advised to utilize shaders for this purpose. While my knowledge of graphics is limited, I wanted to confirm if my approach to achieving this enhancement is correct. You c ...

three.jsglslnoisevertex-shaderparticles

Exploring VueJS: Sorting objects within an array

Currently, I am tackling a challenge in vue-js. In my codebase, there exists a data object known as items. I am iterating through these items and aiming to present a dropdown menu containing the list of products. My goal now is to showcase only those pro ...

javascriptarraysvuejs2vue.js

Subclass declaration with an assignment - React.Component

I recently started going through a React tutorial on Egghead and came across an interesting class declaration in one of the lessons: class StopWatch extends React.Component { state = {lapse: 0, running: false} render() { const ...

javascriptreactjssyntaxecmascript-6ecmascript-next

Tips for simulating the $timeout service with sinon?

I am looking to write a unit test for a method within an Angular controller that uses the $timeout service. However, I have been advised not to use inject in this scenario. Therefore, I need to mock $timeout on my own. Can someone guide me on how I can a ...

javascriptangularjsunit-testingsinon

The functionality of a basic each/while loop in jQuery using CoffeeScript is not producing the desired results

I've been experimenting with different methods to tackle this issue. Essentially, I need to update the content of multiple dropdowns in the same way. I wanted to use an each or a while loop to keep the code DRY, but my experience in coffeeScript is li ...

javascriptjqueryforeachwhile-loopcoffeescript