Creating buffer geometries for spheres using Three.js

Currently, I am working on a three.js project that involves displaying numerous spherical objects. To achieve this quickly, I decided to utilize buffergeometry. Upon researching, I came across a helpful post here, where I learned that I could transform normal geometry into buffergeometry using the following code:

    var sphere = new THREE.SphereGeometry( 4, 0.05, 0.025 );
    var geometry = THREE.BufferGeometryUtils.fromGeometry( sphere );

However, when implementing this code, it does not seem to work for me. The remaining portion of the code responsible for creating the object is as follows:

    var positions = new Float32Array( x_GAMA.length * 3 );

    for ( var i = 0; i < x_GAMA.length; i += 1 ) {

        // positions

        positions[ 3*i ]     =  x_GAMA[i]*10000;
        positions[ 3*i + 1 ] =  y_GAMA[i]*10000;
        positions[ 3*i + 2 ] =  z_GAMA[i]*10000;

    }

    geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

    var material = new THREE.PointCloudMaterial( {size:1,color:0x999999} );

    geometry.computeBoundingSphere();

    particleSystem = new THREE.PointCloud( geometry, material );

    scene.add( particleSystem );

When I replace the line

var geometry = new THREE.BufferGeometry();
it works fine, but it creates squares instead of spheres which is not what I desire. Does anyone have any insights as to why this approach is not working as expected? Thank you in advance.

Answer №1

If you're working with Three.js version 71, creating a Sphere Buffer Geometry is done like so:

var sphereGeometry = new THREE.SphereGeometry( 4, 3, 2 );
var bufferSphereGeometry = new THREE.BufferGeometry().fromGeometry( sphereGeometry );

However, in the upcoming r72 dev version of Three.js, it can be achieved more straightforwardly as shown below:

// Constructor parameters: radius, widthSegments, heightSegments
var sphereGeo = new THREE.SphereBufferGeometry( 4, 3, 2 ); //r72

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

Experiencing an anonymous condition post onChange event in a file input of type file - ReactJS

When using the input type file to upload images to strapi.io, I noticed that an unnamed state is being generated in the React dev tools. Can someone explain how this happened and how to assign a name to that state? https://i.sstatic.net/ZyYMM.png state c ...

if the checkbox is selected, navigate to the displayed section

In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The check ...

Getting the full referrer URL can be achieved by using various methods depending

I am currently working with ASP.Net. My goal is to retrieve the complete referrer URL when visitors arrive at my website from: https://www.google.co.il/webhp?sourceid=chrome-instant&rlz=1C1CHEU_iwIL457IL457&ion=1&espv=2&ie=UTF-8#q=%D7%90 ...

Converting form data into an object using JavaScript (Encountering an error: Cannot access property 'name' of undefined)

I recently started learning about MongoDB and I am following this tutorial here. The tutorial shows how to create a submit form that adds a person's name, age, and nationality to the database. However, I encountered the following error: TypeError: Can ...

Tips for storing form data in MongoDB

I'm currently working on a form and I need help extracting text from the form in order to save it into MongoDB. Here is an excerpt from my tweets.ejs file: <form method="post" action="/tweets"> <input type="text" id="txt" name="text"/> & ...

The absence of the 'Access-Control-Allow-Origin' CORS header was noticed in the response from the Wikipedia API

Attempting to retrieve data from the Wikipedia API using axios in reactJS. Here is my request: axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&search=lol&format=json&callback=?') .then((response) => { c ...

Error Message: Stencil Launch Issue - InvalidTypeException("The parameter 'url' should be in string format, not " + the data type of url)

I have been working with stencil for quite some time now and am in the process of developing a custom theme for it. I have installed nvm, node 5.0, and npm 2. Despite deleting stencil and doing a fresh install of everything, including node modules and st ...

Why do all the cards suddenly come to life when I press the activate button on just one card?

Whenever I try to activate a specific card by clicking the active button, all the cards end up getting activated. I have used the className variable and manually set it to "card mb-3 border-3". My intention is for the className to change when clicking th ...

Sending information from a directive to a controller

I'm working on passing a resource from a directive scope to a controller scope by utilizing a callback provided in the view. However, I'm encountering an issue where the argument variable is showing as undefined. Can you help me figure out what I ...

Express application receiving repetitive post requests

Recently, I have been working on developing a YouTube video conversion app that utilizes youtube-dl for streaming videos from YouTube and saving them. Everything was going smoothly until I encountered an issue when trying to stream a video that exceeded on ...

How can I pass a value from a jQuery variable to a PHP variable?

Utilizing jQuery to create a table based on the output of JSON. The JSON values are retrieved from a SoapClient, which is functioning correctly and producing the desired output. https://i.sstatic.net/vJbfW.png Now, the goal is to assign the value of the ...

Submit a HTML form to a Telegram recipient

I am looking to send HTML form data, which includes input values and select options, to a telegram user. After some research, I discovered that I need to create a Telegram bot. I successfully created one using @botFather by following these steps: /newbot ...

Running a JavaScript asynchronous function and capturing the output using Selenium

Attempting to run the script below in Selenium result = driver.execute_script('let result; await axe.run().then((r)=> {result=r}); return result;') Results in an error: Javascript error: await is only valid in async function Another at ...

Browser freezes unexpectedly every 10-15 minutes

I have an application that displays 10 charts using dygraphs to monitor data. The charts are updated by sending ajax requests to 4 different servlets every 5 seconds. However, after approximately 10-15 minutes, my browser crashes with the "aw! snap" messag ...

Gaussian blurring with react-three-fiber

I have been experimenting with adding Gaussian blur to a scene using GLSL shader code: uniform sampler2D tDiffuse; uniform int uKernel; uniform float uSigma; uniform vec2 uDirection; uniform float uStrength; uniform float uDirectionalResolution; varying ve ...

When using server-side rendering in React with AJAX, an error may occur if trying to call setState

In order to display data to the user, I rely on the response from the AJAX request as I store all necessary information in the database. My component GenericPage.jsx: export default class GenericPage extends React.Component { componentWillMount() { ...

What is the process for loading this image?

While browsing through this stunning website, I came across a feature that caught my eye. Can someone please explain how the designer displayed the "The magic is loading" effect: The image vanishes once the site has finished loading completely. ...

Refreshing Angular navigation directive post user authentication

As I delve into mastering AngularJS and embark on my inaugural "real" project, I find myself at a crossroads. Despite hours of scouring the internet in search of answers, I have yet to stumble upon a suitable solution that speaks to me in layman's ter ...

Toggle the visibility of a div depending on the user's selection

My HTML select element has a few options to choose from: <select class="form-control" data-val="true" data-val-number="The field CodeSetup must be a number." id="CodeSetup" name="CodeSetup"> <option selected="selected" value="0">AllCodes< ...

Utilizing Bootstrap 5: Executing JavaScript exclusively upon successful form validation

I've created a form with multiple input fields that are being validated using Bootstrap 5 validation. <form class="needs-validation asset-test" action="{{ url_for('asset_test') }}" method="post" novalidate> ...