Why are Three.js ply files lacking in color?

I have been experimenting with the Three.js example located in the directory:

three.js/examples/webgl_loader_ply.html

By replacing their .ply file with my own (created in Blender).

In Blender, I used Vertex Paint to paint vertices. Before exporting to .ply, I ensured all checkboxes were selected and set the scale to 100.

However, when I rendered the .ply model in the three.js example, it appeared blue. This was due to the following code in the HTML file:

var geometry = event.content;
var material = new THREE.MeshPhongMaterial( { color: 0x0055ff, specular: 0x111111, shininess: 200 } );
var mesh = new THREE.Mesh( geometry, material );

I believed that ply files stored color values as well. What should I do since this code is making my model blue? Did I make a mistake in Blender?

I am quite new to Three.js and webGL, having just started learning yesterday. Can someone explain what is happening and guide me on the next steps?

Answer №1

Everything was in order with Blender and the code, except for one missing element - the property vertexColors: THREE.VertexColors. Once this was added, everything worked perfectly as expected.

Below is the corrected line of code:

var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 200, vertexColors: THREE.VertexColors} );

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

Send the form with validation in place

Currently, I am in the process of developing a code to handle form submissions using React alongside Typescript and Material-UI: export default function OpenTicket(props: any) { const classes = useStyles(); const formHandler = (e: React.FormEvent& ...

How can you determine if an API method call has completed in Angular and proceed to the next task?

Two methods are being used for api calls in my code. Method one is calling out method two and needs to wait for method two's api call to finish before continuing with its own process. I attempted to achieve this using the complete function inside a su ...

Adding an information panel to each column in jqgrid allows the grid to display a scrolling feature

We have implemented a jQuery grid where the last column contains a link. When this link is clicked, a new panel should appear providing additional information. To achieve this, we utilized a formatter that generates a hidden div along with the link. Howev ...

What are the best techniques for showcasing rich text content in vue.js?

I'm working on a web application and attempting to showcase uploaded rich text content using vue.js. The content is generated by Action Text in the following format. <h1>text</h1><div>sample text<br><action-text-attachment ...

Determine the overall sum of rows present within this particular tbody section

I am struggling to calculate the total number of tr's within my nested tbody, but I am not getting the correct count. The jQuery code I used is returning a high number like 44 rows instead of the expected 7 rows. Can anyone point out where I might ha ...

The value of a Highcharts series does not match that of a Data Source

Encountering an issue with Highcharts where the value of this.y does not reflect the data source. The discrepancy is apparent in the image below. Uncertain if this is a bug or user error. Screenshot illustrating the problem You can view my Demo here: htt ...

Issues have been reported with the compatibility of Tailwind CSS when using it with Next.js and Shadow

I've been working on a NextJS project that utilizes shadcn-ui components. However, upon integrating tailwindCSS, I encountered an issue where none of the styling appeared when using classnames. I have double-checked the configurations in components.j ...

Removing Multiple Object Properties in React: A Step-by-Step Guide

Is there a way in React to remove multiple object properties with just one line of code? I am familiar with the delete command: delete obj.property, but I have multiple object properties that need to be deleted and it would be more convenient to do this i ...

The intended 'this' keyword is unfortunately replaced by an incorrect '

Whenever the this keywords are used inside the onScroll function, they seem to represent the wrong context. Inside the function, it refers to the window, which is understandable. I was attempting to use the => arrow notation to maintain the correct refe ...

Retrieve JSON data from an external website

I am looking to display the number of players currently playing on a different poker website on my own site. The necessary data is provided in JSON format by this link (tournaments.summary.players). I have tried using a .getJSON request, but it seems like ...

Error: Attempting to access properties of an undefined object (specifically, the 'prototype' property) within a React application

I encountered an error while working on my React application: TypeError: Cannot read properties of undefined (reading 'prototype') (anonymous function) C:/Users/tatup/Desktop/GrowApp/frontend/node_modules/express/lib/response.js:42 39 | * @pub ...

How can one properly utilize material-ui CSS?

Just starting out with material-ui and react, I'm currently following this palette customization guide from Material-UI. However, when attempting to replicate the example shown, I encountered the error: Cannot read property 'prepareStyles' ...

Are you interested in using jQuery and/or AJAX to retrieve the latest images from a website?

I had to utilize a Wikipedia API in order to retrieve images from the New Jersey website, and I devised two methods to carry out similar tasks. The initial approach involved using JSON, but it ended up pulling the entire page content. <script type="tex ...

Adjust the text in Bootstrap to collapse on command

I'm currently utilizing Bootstrap collapse in my project. I am attempting to implement a basic jQuery script that changes an icon once a user clicks on one of the collapses. Since there are multiple collapses on the page, I believe I need to use the " ...

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

"422 (Unprocessable Entity) Error When Submitting a Form in Rails Application

I recently delved into the world of ruby on rails a few days back. My current challenge involves transferring data from html tags to a ruby function using ajax. Below is the error message that has been giving me trouble: POST http://localhost:3000/ajax/o ...

ng-model establishes a connection with objects, not properties

Having just started my journey with AngularJS and JavaScript, I decided to create a simple app that allows users to input their name and age, and then displays the list of users and their ages. Here is the code I put together: var main = angular.module( ...

What is the best way to specify a submission destination for a custom form component in Vue?

I am looking to streamline the use of a form component across my website, however, I need the submit button to perform different actions depending on which page calls the form-component. Experimenting with Vue components and data passing is new to me as I ...

Why does a black model appear when loading a GLTF model with materials?

I am currently attempting to load a 3D model in glb format. Below is the code snippet: Expected Outcome: Image Current Outcome: Image var renderer = new THREE.WebGLRenderer(); renderer.setSize(1000, 1000); renderer.setPixelRatio(window.devicePixelRati ...

Undefined is returned when exporting an item from the function called 'this'

Here we have two examples of JavaScript functions. In the first one, console.log(this) works as expected and returns methods, variables, etc. function foo() { console.log(this); } foo(); However, in the second example: export const something = ' ...