Guide on transforming 3D obj files into particles using three.js

I've been experimenting with particles in three.js, but I've encountered an issue when trying to convert an obj file (3D model) into particles. Here are the code snippets I've been working with, but so far all my attempts have failed.

Does anyone have any suggestions for fixing the errors or have examples of how to extract vertices/particles from a 3D model in obj format?

Thank you in advance for any help.

var p_geom = new THREE.Geometry();
var p_material = new THREE.ParticleBasicMaterial({
      color: 0xFFFFFF,
      size: 1.5
   });

var loader = new THREE.OBJLoader();

loader.load( 'human.obj',function(object){

      object.traverse( function(child){

         if ( child instanceof THREE.Mesh ) {

            // child.material.map = texture;

            var scale = 10.0;

            object.attributes.position.array.forEach(function() {
               p_geom.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
         
            })
         }
      });
     scene.add(p)

   });

   p = new THREE.ParticleSystem(
      p_geom,
      p_material
   );

Answer №1

Your code reference is outdated. With the latest version of three.js, the code structure has been updated as shown below:

const loader = new THREE.OBJLoader();

loader.load('human.obj', function(object) {

  const vertices = [];

  object.traverse(function(child) {
    if (child.isMesh) {
      vertices.push(...child.geometry.attributes.position.array);
    }
  });

  const p_geom = new THREE.BufferGeometry();
  const p_material = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    size: 1.5
  });

  p_geom.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

  const p = new THREE.Points(p_geom, p_material);
  p.scale.set(10, 10, 10);
  scene.add(p)

});

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

What steps can I take to ensure that my React child components will render successfully, even if a prop is absent

TLDR; Seeking solution to render child components in React even if a property of this.props is missing. My React app utilizes Yahoo's Fluxible and fetches data from a Wordpress site using WP REST API. Sometimes, the API may return incomplete data cau ...

Deactivate the Submit button when the database field has been populated

My form includes a submit button. The Submit button should be disabled if the "price" for a specific product is already filled: PHP Code <?php $host="localhost"; $username="root"; $password=""; $db_name="ge"; $con=mysqli_connect("$h ...

utilizing ng-option to present choices in a dropdown menu

I have been implementing a scroll-down menu in my application using options. However, I now want to switch to using ng-option to populate the values from a JavaScript file. I also require assistance with writing AngularJS code for this task. Below is a s ...

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to ...

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

What is the best way to align columns after adding or deleting columns in an el-table using Element UI in Vue.js?

Is there a way to develop a table/datagrid using Element UI that allows users to choose which columns are displayed? I've already made an attempt, and you can find it here. I'm also looking for a solution that enables users to adjust the width o ...

What causes req.sessions to show an empty object instead of the expected value?

I've been grappling with a small issue while learning express.js. I am struggling to save sessions in the browser so that users don't have to log in every time they visit. I am using cookie-session for this purpose. When I send the login data fro ...

dynamic image size based on mobile device orientation

Struggling with a tiny mobile image gallery here. Whenever I switch to portrait mode, the images end up being too big for the screen. Is there a way to use javascript to resize the images to fit the screen when switching to portrait mode? They display fin ...

Firefox and IE are unable to make changes to cssRules

To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications. The selector can be modified by accessing the selectorText property. Sample CSS code: <style type="text/css"> .class { ...

What is the process of Defining an Element Based on Two Attributes in C#?

Is it feasible to specify a web page element based on two attributes? For example, I can locate the element by its innertext Element imagePage = ActiveBrowser.Find.ByContent(pageNumbers[p],FindContentType.InnerText); Alternatively, I can identify an ele ...

Using the Google Chrome console, execute a command on each page within a specified website

While browsing a website, I noticed a bug that required me to manually run a JavaScript function each time I navigated to a different page in order for the site to work smoothly. Is there a way to automate this process upon page load? I am using Google C ...

Is sending an AJAX request to a Node.js Express application possible?

Currently, I am attempting to authenticate before utilizing ajax to add data into a database $('#button').click(function () { $.post('/db/', { stuff: { "foo" : "bar"} }, callback, "json"); }); Below is my node.js code: ...

Unable to employ Javascript while utilizing AJAX within jQuery Mobile

Exploring the potential of Swiper Javascript Api from within Jquery Mobile raises some challenges. The compatibility issues with Ajax in Jquery Mobile complicate the execution of Javascript functions. This becomes evident when examining example source cod ...

Javascript Flickering Effect in HTML5

Currently, I am in the process of creating a simple game using javascript without jQuery. However, I am facing an issue with flickering on the canvas due to the clearing command. After researching solutions online, I came across suggestions for implementin ...

PhantomJS fails to trigger function within page.evaluate

My current project involves scraping data from a Facebook page using the PhantomJS node module (https://github.com/sgentle/phantomjs-node). However, I am facing an issue where the function I pass to evaluate the page is not being executed. Interestingly, w ...

Drop and drag to complete the missing pieces

Here is a drag and drop fill in the blanks code I created. The challenge I'm facing is that I want users to be able to correct their mistakes by moving words to the right place after receiving points. <!DOCTYPE HTML> <html> <head&g ...

Ways to showcase title using ng-repeat

<input type="text" ng-model= "name" title="{{name}}">//this title displays the name that is contained in ng-model Similarly... <select title ="{{item.actionId}}" ng-model="item.actionId"> <option ng-repeat="action in actionList" value="{{ ...

How can you customize the output buffer size (known as highWaterMark) for child_process.spawn() in node.js?

I'm currently working on adjusting the buffer size (highWaterMark) for the stdout coming from a child_process.spawn() function, but I'm encountering difficulties in achieving this successfully. The code snippet provided below demonstrates my obje ...

Require Google Chrome to show a blank page upon refresh

After reloading the page in either IE/Edge or Chrome/Firefox, I noticed a significant difference. IE/Edge clears the page and displays a white page, while Chrome/Firefox does not. I'm wondering if there is a way to use JavaScript to instruct Chrome/F ...

Issues encountered with sending post requests to a yii2 application when using Angular4

After implementing the following code: this.http.post('http://l.example/angular/create/', {name: 'test'}).subscribe( (response) => console.log(response), (error) => console.log(error) ); I encountered an error on ...