Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

Question

Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

Here is a sample: http://jsfiddle.net/c3shonu7/1/

The code demonstrates the creation of a BufferGeometry object by cloning an IcosahedronBufferGeometry's vertices. The goal is to apply a color gradient to the subdivided icosahedron, with lighter shades at the poles and darker shades at the equator. This is achieved by adjusting the lightness value of the vertex color based on the z-coordinate of each vertice.

color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);

Despite this setup, the faces are currently being colored in a seemingly random manner. What could be causing this unexpected behavior?

javascript three.js 3d

Answer 1

Answer №1

If I have interpreted your intention correctly, the issue lies in the fact that you are assigning colors three times for each vertex:

for(var i = 0; i < vertices.length; i+= 1) {
  if(i % 3 == 0) {
    color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
  }
  colors.push(color.r,color.g,color.b);
}

Instead of iterating through individual vertices, the color should only be added when the condition in the if statement is met. In essence:

for(var i = 0; i < vertices.length; i+= 1) {
  if(i % 3 == 0) {
    color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
    colors.push(color.r,color.g,color.b);
  }
}

Has this solution resolved your issue?

Answer 2

If I have interpreted your intention correctly, the issue lies in the fact that you are assigning colors three times for each vertex:

for(var i = 0; i < vertices.length; i+= 1) {
  if(i % 3 == 0) {
    color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
  }
  colors.push(color.r,color.g,color.b);
}

Instead of iterating through individual vertices, the color should only be added when the condition in the if statement is met. In essence:

for(var i = 0; i < vertices.length; i+= 1) {
  if(i % 3 == 0) {
    color.setHSL(0.1, 0.3, Math.abs(vertices[i + 2]) / geometry.parameters.radius);
    colors.push(color.r,color.g,color.b);
  }
}

Has this solution resolved your issue?

Using Three.js to extract Vertex Colors based on the z-coordinate of Vectors

Answer №1

Similar questions

Ensure your Vue components have type-checked props at compile time when using TypeScript

Issues with the update of class properties in Node.js using Express

Is it possible to create a development build using Npm with React and Typescript?

Utilizing a JavaScript variable in Jquery for managing an mp3 playlist

Maintain the current application state within a modal until the subsequent click using Jquery

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

What is the best way to call a function within another function only when a certain div is not clicked?

The v-menu closes before the v-list-item onclick event is detected

I find the JSX syntax to be quite perplexing

Regular Expressions for Strings in JavaScript

JSON error: Encountered an unexpected token "o" while processing

Can you tell me the alternatives for getServerSideProps and getStaticProps in Next.js version 14?

issue with duplicating DOM element using function

Ways to enhance background removal in OpenCV using two images

Jquery removes brackets from data following an ajax request

Experiencing difficulties in displaying a React element that is being passed as a prop

Please rewrite the following sentence: "I am going to the store to buy some groceries."

What steps can I take to refactor a portion of the component using React hooks?

Leveraging multiple routes for a single component in Angular 6

What is the syntax for implementing the 'slice' function in React?