score:0
ok, as @prisoner849 commented, buffergeometryies index property was the answer.
i redid the triangulation of the mesh by looping over the "squares" of my mesh, getting their corners and then changing the indexes for each squares triangles to one of a pre calculated set, based on which corner had a unique height. it also seems that you want the indexes to go in a specific order to control which side is "up", it seems to be that counter clockwise or so.
const size = 10;
const vertmap = [0, 3, 1, 3, 2, 1];
const trisets = [
[0, 3, 2, 0, 2, 1],
[1, 3, 2, 1, 0, 3],
[0, 3, 2, 0, 2, 1],
[1, 3, 2, 1, 0, 3],
];
const getsquareverts = (x, y) => {
const i = (y * size) + x + y;
return [i, i + 1, i + (size + 2), i + (size + 1)];
}
const getuniqueheightpoint = (verts) => {
let unique = -1;
const set = verts.reduce((p, n) => {
const c = p[n.tostring()] || 0;
p[n.tostring()] = c + 1;
return p;
}, {});
const keys = object.keys(set);
if (keys.length == 2 && (set[keys[0]] == 1 || set[keys[0]] == 3)) {
for (const key of keys) {
if (set[key] == 1) {
unique = verts.findindex((v) => v == parsefloat(key));
break;
}
}
}
return unique;
}
const reworktris = (plane) => {
let indexoffset = 0;
const planeidx = plane.geometry.index;
for (let y = 0; y < this.size; y++) {
for (let x = 0; x < this.size; x++) {
const verts = this.getsquareverts(x, y);
const heights = verts.map((v) => this.planepos.getz(v));
const uniqueheight = this.getuniqueheightpoint(heights);
let tris = vertmap.map((i) => verts[i]);
if (uniqueheight >= 0) {
tris = trisets[uniqueheight].map((i) => verts[i]);
}
planeidx.set(tris, indexoffset);
indexoffset += 6;
}
}
planeidx.needsupdate = true;
}
const plane = new three.mesh(new three.planebuffergeometry());
reqorktris(plane);
Source: stackoverflow.com
Related Query
- How to change the color of a plane geometry in three.js? (always keeps giving me a black outcome)
- Change edges/triangulation of plane geometry
- Many meshes with the same geometry and material, can I change their colors?
- How do you build a custom plane geometry in three.js?
- Three.js tile which has multiple textures using plane geometry
- How to make a not squared texture fit in a "background-size:cover" way to a geometry plane in Three.js?
- Can we make Plane Geometry with HTML element in webGL?
- How to change geometry color with dat.GUI?
- Creating three plane geometry perpendicular to x, y and z axis?
- How to make a rounded corner 2d Sprite with plane geometry shader always facing the camera in threejs webgl geometry space
- Is there a way to change the way geometry is drawn in Three.js?
- How to change geometry attributes dynamically using dat GUI in three.js?
- Three js plane geometry disappears when rotating
- Create a plane with curved edges using PlaneGeometry - Three.js
- How to increase the thickness of the plane geometry in threejs
- Plane geometry mesh is not receiving shadows in threeJS r86
- Translate and transform plane geometry based on corner coordinates
- I am not able to change the transparency/opacity of the geometries after using buffer geometry merging
- ThreeJS: White PNG image loaded as texture, used as material and rendered as plane has grey edges
- change colors of triangles of a plane threeJS
- Three.js Plane Geometry Animation
- Rotate a moving model to be parallel on a plane geometry
- How to add video to a plane geometry using three js
- Three js add video to plane geometry
- Three.js shatter/explode plane geometry
- Three js Geometry Explode and change position of each face
- Where do i place the sin() formula for plane geometry to create a three.js particle wave?
- How to increase line thickness in three.js edges geometry using shaders?
- How to change dimension of a geometry mesh dynamically in three.js
- Three.js plane geometry border around texture
More Query from same tag
- ThreeJS/WebGL: Pass function into shader
- Moving a object based on its rotation in three.js
- After setting vertices on THREE.Geometry objects, THREE.Shape.Utils.triangulateShape fails with TypeError
- THREE.js FBXLoader treats .png as if it is a .psd, and doesn't load the material
- Three.js - ExtrudeGeometry using depth and a direction vector
- Partial panorama (iPhone panorama), three.js or Pannellum?
- in three.js, the spotlight is not showing a cone on a plane
- copyTextureToTexture results in horrible aliasing artifacts in three.js
- Three js raycaster not returning intersections
- How to rotate cubee by quaternion in three.js?
- Three.js: Raycast intersection on Line with BufferGeometry
- How to pin, rener, an image on an threejs map
- Animate a procedural sea in Three.js
- Why won't a normalMap render correctly when using THREE.SubdivisionModifier?
- Threejs: How do I add a random jpg texture over a 3d model
- Three.js: How to Repeat a Texture
- THREE is not defined; how do I fix this?
- Pass reflectivity value to JSONLoader
- how can I make a ball bounce inside a Box with CANNON.js and THREE.js?
- trying to understand callback function used in THREEJS
- Converting NIF to OBJ in Blender 249.2 Yields Invisible Object
- Three.js TextGeometry Trouble Drawing
- How to make an atmosphere using threejs
- Multiple mesh with one geometry and different textures
- How can I use cache when loading 3d models in mapbox?
- Managing z-buffering with transparent textures in Three.js
- Create a bufferGeometry with several particles sizes. Best performance?
- jQuery Dialog not working in three.js
- Why model renders with a blade color with Three.js?
- Divs over a three js animation scrolling down on desktop but not on mobile?