Three.js Extending geometry - three.js

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.

Related

Why does the .getAttrbute('position').array of a plane return a vector longer than its widthSegments multiplied by its heightSegments in Three.js?

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.

Changing the color map of vertexColor

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

How to adjust scale to occupy more data in d3js

I'm drawing a scatter plot with d3js. Using a simple linear scale with 1,2,3,4,5. This creates equal space like:
1 2 3 4 5
problem is, I have more data points between 2 and 3, 3 and 4. less data points between 1 and 2, 4 and 5. Is it possible to configure the scale to look like:
1 2 3 4 5
or instead of linear scale I should try some other scales? Please suggest.
First, a word of warning: distorting a scale (depending on the data you want to visualize) can maybe have "undesired" effects.
If you want to go ahead, I quickly set up a fiddle to show a possible way:
Fiddle
Basically, I am using custom domain/ranges to get the desired effect:
var x2 = d3.scale.linear()
.domain([1, 2, 3, 4, 5])
.range([0, 20, 80, 170, 200]);
Does that help?

How to draw a line with changing intensity/grayscale

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.

How many colors in the colorbuffer of OpenGL ES we need?

If I have a cube mesh in OpenGL ES and I want to have a flat color for each side of the cube so that each side has a different color, do I need to specify color per vertex or color per triangle or color per side?
This 2 lines of code:
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
gl.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);
are related to this question.
How OpenGL ES knows which color I specified matches with which side of the cube?
Colours should be specified per-vertex, but as each face has a different colour, you are not going to be able to share vertices between faces. Instead of drawing a cube (8 vertices, 8 colours, 12 triangles), draw 6 quads that just happen to have coincident vertex positions (24 vertices, 24 colours, 12 triangles)
Edit: a quad is just 2 triangles that share some vertices. For example, a quad covering the unit square (in 2D) could have a vertex array and triangle index array like so:
// bottom left, top left, bottom right, top right order
float[] verts = new float[]{ 0, 0, 0, 1, 1, 0, 1, 1 };
// anti-clockwise vertex order
int[] tris = new int[]{ 0, 2, 1, 2, 3, 1 };

Resources