Buffer Geometry not showing on screen

Questions
1

Anyone know why my buffer geometry is now showing on screen? I have already added it to scene and updated it later on.:

   {
            var A = 40;
            var B = 20;
            var edgeVertices = new THREE.BufferGeometry();
            var vertices = new Float32Array([
                (A / 2) * -1, B / 2, 0,
                A / 2, B / 2, 0,
                A / 2, (B / 2) * -1, 0,
                (A / 2) * -1, (B / 2) * -1, 0,
                (A / 2) * -1, B / 2, 0,
            ]);
            edgeVertices.addAttribute('edgeVertices', new THREE.BufferAttribute(vertices, 3))
            edgeVertices.addGroup({ start: 0, count: 2, materialIndex: 0 });
            edgeVertices.addGroup({ start: 1, count: 2, materialIndex: 0 });
            edgeVertices.addGroup({ start: 2, count: 2, materialIndex: 0 });
            edgeVertices.addGroup({ start: 3, count: 2, materialIndex: 0 });
            var edgeMaterials = [new THREE.LineBasicMaterial({ color: 0x0000ff, linewidth: 5 }), new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 5 })];
            var wireframe = new THREE.LineSegments(edgeVertices, edgeMaterials[0]);
            console.log(wireframe);
}
2

I don’t think the LineBasicMaterial understands the attribute named edgeVertices that you’re binding to it. The default attribute that materials use to identify vertex positions should be named position.

edgeVertices.addAttribute(‘position’, new THREE.BufferAttribute(vertices, 3));

See here for example

3 Likes
3

Thanks @marquizzo . I seem to be getting something on the screen now but it is not the rectangle I am looking for (the points above form a closed rectangle). Instead I am getting two parallel line segments , one formed by the 1st and 2nd point as well as the 2nd one formed by the 3rd and 4th points. Sorry I am new to three.js so I am not sure what BufferGeometry is doing to the points.

4

My main aim is to try and draw individual line segments for the for edges of a rectangle but later on be able to edit the colour of anyone of the edges when the mouse hovers over it. This is why I gave multiple materials. Not sure how to go about this though as LineSegments considers all the four lines at once (thus allowing me to use either ONLY blue or ONLY red for the edges).

5

That is how the LineSegments class works. It draws one segment for each pair of vertices. Line, on the other hand, will draw a consecutive line sequence (unless the API is changed with the new fat lines).

6

Thanks @EliasHasle . So how do I edit each line segment to have different colours ? In the geometry I see no property related to the line segments per se but only about position.

7

Maybe vertex colors will work on line segments? I have never tried. If it works, it will be like setting the same color on each end of the line segment, using a three-component attribute named “color”.

8

Use an additional buffer attribute with colours for each vertex, setting the same colour values for pairs of vertices in your buffer geometry. I mean, if you want a rectangle with lines of different colours, then you have to have 8 vertices in your geometry.

Kind of :

var colors = [];
var c = new THREE.Color();
for (let i = 0; i < geometry.attributes.position.count / 2; i++) {
  c.set(Math.random() * 0xffffff);
  colors.push(c.x, c.y, c.z, c.x, c.y, c.z); // the same colour for two points
}
geometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));

and then
var material = new THREE.LineBasicMaterial({vertexColors: THREE.VertexColors});

9

I only have two colours 0xff0000 and 0x0000ff . By default the edges of the rectangle need to be blue(0000ff) . When my mouse hovers to the edge, I need to use raycast to see which edge it intersects with and then change that colour to ff0000 to highlight that it has been selected or “mouse highlighted” . I was thinking of doing this by addGroup() and dividing my 4 line segments into four groups and then updating the colour of the group in the mousemove() event handler. I am not familiar with groups but I think this definitely prove to be convenient.

10

@rahul.pillai93
Take a look at this post and its jsfiddles.

11

This looks really good. But what are the parameters inside the addAttribute (‘color’) and (‘colorbase’) ?

12

color is current colours of vertices, colorbase contains data of restoring for colours of vertices.

13

So you mean to say that when it draws lines between the vertices, it gives colors based on an rgb color code ? I see 1, 0, 0 as a parameter and other places having 0.5 0 0 etc .

14

Yes, amount of color items is equal to the amount of vertices.
They are stored in buffer attributes.

1 Like
15

Thanks so much! This works now.

1 Like