https://codesandbox.io/p/devbox/suspicious-architecture-y7hwv3 (code sandbox here!)
I’ve created a grass blade mesh and as far as I can tell lighting should work as expected but for some reason the edges that run across the rectangles (breaking them into triangles) interfere with the highlights and shadows, not just the edges I want. Not sure exactly how to resolve this… I just want the lighting to be smooth/uniform! Do I need to use shaders? Currently using both some ambient, direct, and a point light (just trying everything atp).
Would be better to provide a minimal working live code example (jsfiddle, codepen, codesandbox etc.)
Looks like .index is messed up, but I’m not sure. It’s hard to do diagnostics by pics only. 
Would be better to provide a minimal working live code example (jsfiddle, codepen, codesandbox etc.)
Looks like .index is messed up, but I’m not sure. It’s hard to do diagnostics by pics only.
https://codesandbox.io/p/devbox/suspicious-architecture-y7hwv3 ok I think I got the sandbox working! Realized that I made a bunch of extra indices and fixing that reduced the problem somewhat but it still looks off- not sure why.
Your grass blade can be deformed PlaneGeometry. And that’s how it can be made with this type of geometry:
//define bezier curves~~~~~~~~~~~~~
const curve1 = new THREE.CubicBezierCurve3(
new THREE.Vector3(-0.25, 0, 0), // Start point (bottom left)
new THREE.Vector3(-0.2, 1.5, 0), // Control point 1 (middle left, adjusted vertically)
new THREE.Vector3(-0.1, 2, 0), // Control point 2 (adjust as needed)
new THREE.Vector3(0, 3, 2), // End point (top left)
);
const curve2 = new THREE.CubicBezierCurve3(
new THREE.Vector3(0.25, 0, 0), // Start point (bottom right)
new THREE.Vector3(0.2, 1.5, 0), // Control point 1 (middle right, adjusted vertically)
new THREE.Vector3(0.1, 2, 0), // Control point 2 (adjust as needed)
new THREE.Vector3(0, 3, 2), // End point (top right)
);
let segments = 5;
// get vertices
let vertices = curve1.getPoints(segments).concat(curve2.getPoints(segments));
const geometry = new THREE.PlaneGeometry(1,1,segments,1).setFromPoints(vertices);
geometry.computeVertexNormals(); // don't forget to re-compute normals
Demo: https://codepen.io/prisoner849/full/jOjqZob
About your implementation: yes, .index is messed up; you can see it, when you use side: THREE.FrontSide on the material, in your codesandbox.
1 Like
Simply majestic. @prisoner849 is this effectively a “loft” or a “rail” geometry solver?
PlaneGeometry sets vertices in rows from top to bottom. I don’t know which word describes it better 
PlaneGeometry(4, 1, 4, 1)
0 - 1 - 2 - 3 - 4
| / | / | / | / |
5 - 6 - 7 - 8 - 9
The idea is: you already have correct index, just substitute vertices with yours.
2 Likes
Thanks, you’re really a life saver! So I suppose its better to use plane geometry when making forms rather than trying to code the indices manually? Still not sure why my original code was behaving like that but this is much simpler!
1 Like