Exploring THREE.Points, navigating through JSON data, and looping through different materials

After exporting some JSON data from Blender using three.js' addon, I am trying to extract colors from the materials associated with the geometry and convert them to "point" material types.

Even though my console logs display that my .forEach function is working correctly on the model.material array, nothing appears to be displayed. It's as if no material has been applied at all.

Interestingly, a single color material does work, along with the original materials from the JSON file.

var loader = new THREE.JSONLoader();
var model = loader.parse(jsonData);
var mesh;
var pointMats = [];

model.materials.forEach(function(material) {
  var color = new THREE.Color(material.color.r, material.color.g, material.color.b);
  var specular = new THREE.Color(material.specular.r, material.specular.g, material.specular.b);
  var newPointsMaterial = new THREE.PointsMaterial({
    name: material.name,
    color: color,
    lights: true,
    size: 1
  });
  pointMats.push(newPointsMaterial);
});

// var pointsMat = new THREE.PointsMaterial( { 
//   color: 0xffffff,
//   size: 0.01
// });               // this works fine and is applied to all the meshes in my scene

mesh = new THREE.Points(model.geometry, pointMats);
scene.add(mesh);

No errors are showing up in the console, probably because there isn't an error to report.

Appreciate your assistance!

Answer №1

THREE.Points is designed to work with individual instances of Material and does not support arrays of them on a single mesh.

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

Does the method in the superclass "not exist" within this type....?

Our TS application utilizes a JavaScript library, for which we crafted a .d.ts file to integrate it with TypeScript. Initially, the file resided in a "typings" directory within the project and everything operated smoothly. Subsequently, we opted to relocat ...

How can we use Cypress to check if we are at the final slide in the presentation?

I am facing a challenge with multiple slideshow files that contain varying numbers of slides. Some have 10 slides, while others have 80 slides. My goal is to test every slide by using the forward and backward arrow buttons for navigation. Currently, I am c ...

Creating a file by piping the output of an asynchronous HTTP request while utilizing async await method

I have been diligently following the instructions and conducting thorough research for a whole day to figure out how to use a pipe to compile an Excel spreadsheet that is fetched through an API call. I managed to get part of the way in saving it, but unfor ...

Calls to debounced functions are postponed, with all of them running once the waiting timer is complete

Utilizing the debounce function to create a real-time search feature. Researching more on debouncing from https://css-tricks.com/debouncing-throttling-explained-examples/, it seems like the function should control the number of calls made. In my scenario ...

Deactivate the button upon click using alternative methods besides the disable attribute

I am trying to implement functionality with 3 buttons: 'click me', 'disable', and 'enable'. When the 'click me' button is clicked, it triggers an alert. However, when the 'disable' button is clicked, it sho ...

Absolute positioned content causing unexpected spacing on top of relative positioned content

I've been experimenting with a fantastic technique by Chris Coyier for implementing full page video backgrounds with content scrolling over the video. However, I've encountered an issue where there's an unexpected gap to the right in Windows ...

Is it possible to capture and store server responses on the client side using Node.js and React Native?

Here's a POST request I have: router.post("/projects", async (req, res) => { const { projectName, projectDescription, projectBudget, projectDuration, industry, companyName, numberOfEmployees, diamond, } = req.bod ...

The AngularJS ng-if directive functions on a variable will only function on the

I'm currently working on updating an old codebase that was written in AngularJS, a framework I am not very familiar with. My task is to implement a spinner that appears when an HTTP request is sent and disappears once the response is received. The sp ...

Converting URL for AJAX POST information

While trying to encode a URL using encodeURIComponent, I encountered a 500 SERVER ERROR on certain URLs. It appears that the issue lies in the encoding process, as removing the data resolves the error entirely. What is the correct way to encode the URL to ...

How can we effectively create a table page object in Protractor that can handle various table selectors?

Recently, I have been delving into writing e2e tests in Protractor using page objects with JavaScript/Node.js. After reading numerous Stack Overflow posts and Julie's pages, as well as studying ProtractorPageObjects, I've come across an issue. A ...

Mobile compatibility in ECMAScript 5.1 is essential for creating seamless user

Is there a reliable source for information on ECMAScript 5.1 compatibility with mobile browser devices? ...

Connect my asp.net grid view to JavaScript using AJAX

I am seeking guidance on how to bind my gridview from JavaScript in an ASP.NET web forms application. My objective is to click a linkbutton within my gridview and have it trigger a modalpopup that displays another gridview. Here are snippets of my code s ...

Searching for a specific key and its corresponding value within an Object Literal (JSON string / object) is necessary

After reading up on JSON objects , I am now trying to locate the value associated with a specific KEY, which may be null, no or yes. The KEY in question is "f03eb90f-6b5e-4b26-bd9f-bad788b7edac" and I want to retrieve its value You can find the Fiddle ...

Does this information operate on Vue or Node?

I have recently started learning programming and currently working on an HTML project for school. My professor mentioned that we should only use Node.js for this project. However, I am concerned that the function I used below might be Vue instead of Node ...

Experiencing difficulties when trying to pan and zoom the data obtained from d3.json within a line chart

I am currently working on developing a trend component that can zoom and pan into data fetched using d3.json. Here is the code I have written so far: <script> var margin = { top: 20, right: 80, bottom: 20, left: 50 }, width = $("#trendc ...

The background size cover feature is not functioning properly on mobile devices, especially on longer pages

In my Next.js project, I am encountering an issue with the background image not displaying on longer pages when viewed on a Google Pixel 3a device. Here is how it looks on shorter pages that do not exceed the viewport height: https://i.sstatic.net/jJBTy.pn ...

Add a new key-value pair to the mock data by clicking on it

Hey there! I'm currently tackling a task that involves toggling the value of a boolean and then appending a new key-value pair on click. I've been attempting to use the . operator to add the new key-value pair, but it keeps throwing an error. In ...

ReactJS is encountering a situation where two children are using the same key and causing

When I try to view the profile information of another user, I encounter a duplicate key error that says: "Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique k ...

JavaScript image sorting function fails to sort multiple ID elements that match

Currently, I am working on a project to develop an image sorter using toggle buttons. However, I have encountered an issue where my function is only effective for the first image ID and not any others. Below is the JavaScript function in question: functi ...

What is the best way to use a generic callback function as a specific argument?

TS Playground of the problem function callStringFunction(callback: (s: string) => void) { callback("unknown string inputted by user"); } function callNumberFunction(callback: (n: number) => void) { callback(4); // unknown number inputt ...