I have a mesh, with gradient color using this type of code :
It's nice and beautiful, but I want to reduce the precision of the gradient and make it less smooth.
Here's an exemple
I've got data on a JSON, wich gave me coordinate for vertices 0, 2, 4 and 6. I calculate the other one after that. I've got a value on vertice 0, 2, 4 and 6, which I use to get the color value of that point, in HSL (like 0 is 0 in HSL and 1 is 240 in HSL)
With than given value, 1, 3, 5 and 7 have a color value depending of the vertice on the same line, and 8 got value from a pondered calculus.
If 0, 6 have a value of 0.5(green), and 2, 4 have a value of 1(red), then 7 is green, 3 is red, and 1, 8, 5 have a value of 0.75 (yellow).
With my material and colorVertex, the pixels between those point are calculated and can take a infity of value between 1 and 0.5.
Now, I want to now if it's possible to limit this infinity of values to fixed one, so it will look like that
I can't subdivise my mesh because the final one is really big and can't spend much more on calculus time. Is there a way to change the interpolation used by three.js so the pixel between my vertices have the colormap/color range that I want?
Thanks in advance
Related
I'm new to three.js and 3d in general, but here's a example:
const geometry = new Three.PlaneBufferGeometry(1, 1, 8, 8)
let positions = this.geometry.getAttribute('position').array
console.log(positions.length)
Just from my basic understanding, I would guess before seeing the result is that positions.length is 8*8*3 or 192 elements wide because as far as I know, a vertex in three.js takes a block of 3 values (x, y, z?), then the next vertex takes 3, and so on, travelling along the vector of values. A plane is formed of these vertices, and I would assume (again, pre-run) this plane has 64 vertices.
However, when I run this, I get a logged value of 243.
What am I misunderstanding here? 243 doesn't seem like a cleanly divisible number any way I look at it. My ultimate goal is to manipulate each vertex by some amount along the Z-axis, before the render.
To form 8 segments, there must be 9 points.
Thus, in case of an indexed geometry (PlaneGeometry is of that type), the amount of points per dimension is amount_of_segments + 1.
So, in your case, a plane of 8 x 8 segments will have (8 + 1) * (8 + 1) = 9 * 9 = 81 vertices. And the length of geometry.attributes.position.array will be 81 * 3 = 243.
I am trying to set 0 values on my c3.js graph to white instead of the default grey value.
I am using
colors: d3.interpolateHslLong(d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)) currently.
Does anyone know how to define the 0 value color? It seems no matter what I set the min and max values to, 0 remains grey.
Any help much appreciated.
White has 'lightness' equal to 1 (or 100%)
So, the first value will need have: d3.hsl(250, 1, 1), eg
d3.interpolateHslLong(d3.hsl(250, 1, 1), d3.hsl(0, 1, 0.5))
The hue and saturation (the first two values in the HSL constructor) can be anything, but they will affect the colour gradient to the second colour.
I'm doing a project where im finding the patterns of 1 color duo and trying to find the unkown second color of the second color duo.
If for example i have 2 colors (first duo):
RGB(60, 90, 80)
RGB(70, 50, 120)
By using the simplest algorithim i find that:
distance = sqrt((r2 - r1)^2 + (g2 - g1)^2 + (b2 - b1)^2)
where distance is 57.
Then i have the second color duo:
RGB(80,45,150)
RGB(x,y,z)
Finding the second color here by only knowing first color + distance is a bit unrealistic, any suggestions on how i could find something like this, or any good insight on workarounds.
Welcome to StackOverflow!
If there is only 1 possible second color, you could calculate the distance simply by the difference of each R, G, and B elements. Therefore, the distance between RGB(60, 90, 80) and RGB(70, 50, 120) is (-10, +40, -40).
If the first color is RGB(80,45,150), then the second color with the same distance is RGB(90, 5, 190)
Another way is to use the distance as radial distance, however this will results in infinitely many possible second colors
You have a spherical surface around the first color point in RGB space (cutted sphere if distance is too long). For exact distance you have integer equation
dr^2 + dg^2 + db^2 = distance^2
that might have: no solutions, and symmetrical cases: 4 solutions, 8 solutions, 16/24 solutions, perhaps more. So task is to find triplets giving needed sum (c.f. Pythagorean triples for 2D case - there are 4 neighbors for distance 2, 8+4 neighbors for distance 5, no neighbors for distance 1.5 and so on).
If some tolerance is allowed, then you can find even more possible solutions.
Seems you need some kind of constraints to limit results.
Also it might be useful to consider another color model like HSV (if color perception is important)
I would like to know how I can extend a geometry to a length.
Like a pipe in 2d that I will give a length/height.
See image
Wood
You can do that with scaling:
mesh.scale.set( 3, 4, 5 ). The number is the factor which you use to calculate the new size from the old. With mesh.scale.set( 3, 4, 5 )the mesh gets 3 times bigger on the x-axis, 4 times bigger on the y-axis und 5 times bigger on the z-axis.
If I have matrix/data with line intensity values:
e.g.
0, 1, 2, 3, 4, 5, ..... M (where intensity value is gradually changing)
or
any random order of values
So if I use the first intensity set of data, (0, 1, 2, 3, 4, 5, ..... M), my line color should be gradually turning black to white. If I remember correctly, 0 is used to represent black and 255 is used to represent white? I would like to use a data of intensity values to draw 3D line with changing color/intensity.
How can I draw a 3D line with changing intensity/grayscale? I would appreciate any advice or recommendation.
You can use the 3D colored line plot tool from the file exchange and change the colormap to whatever you need.