 # Help getting the actual position of a vertices in a buffer geometry!

My code is simplish, just takes the position and feeds it through some noise to create a releastic looking terrain, except

``````  const vertex = new Vector3();
vertex.fromBufferAttribute(positionAttribute, i);
``````

doesn’t return the vertices position in the world which is a pain, it seems to return the local position, sorry I am very new, the full code is below. You can see i am using a odd system to try get around this which works until I try and place trees at the same real world position and its the wrong height.

``````export function generateTerrainChunk(seed, Position, gain, divisor) {
//------------[MAIN FUNCTION VARIABLES]------------\\
//const simplex = new SimplexNoise(seed);
let geometry = new PlaneBufferGeometry(500, 500, 30, 30);
let colours = [];
const fbm = new FBM({
seed: seed,
scale: 0.007,
octaves: 6,
persistance: 0.5,
lacunarity: 2,
redistribution: 2,
height: 40,
});

const simplex = new Perlin(seed)

//------------[Create Material]------------\\
var material = new MeshPhongMaterial({
vertexColors: colours,
reflectivity: 0,
blending: false
});

//------------[Create Mesh]------------\\
var plane2 = new Mesh(geometry, material);
plane2.position.set(Position.x, -3, Position.y);
plane2.rotateX(Math.PI / 2 + Math.PI);

const positionAttribute = geometry.getAttribute("position");
//------------[Edit the Geomtry Accordingly]------------\\
for (var i = 0, l = geometry.attributes.position.array.length / 3; i < l; i++) {
// Get Data position
const vertex = new Vector3();
vertex.fromBufferAttribute(positionAttribute, i);

plane2.localToWorld(vertex)

// Check Height from Perlin Noise Generator

let location = new Vector2(
(vertex.x + (Position.x)) * divisor,
(vertex.y - (Position.y)) * divisor
)

let height = fbm.get2(location) * gain * 4
// Set the height accordingly

console.log(location)

if (location.x >= 25 && location.y >= 25) {
height = 500
}

geometry.attributes.position.array[i * 3 + 2] = height;

// Update Vertice colours accordinly
if (height > 100) {
colours.push(1, 1, 1);
} else if (height > 50) {
colours.push(0.56, 0.54, 0.48);
} else if (height < 2) {
let heightSecondary = simplex.get2(new Vector2((vertex.x + (Position.x)) * divisor, (vertex.y - (Position.y)) * divisor)) * 0.75
geometry.attributes.position.array[i * 3 + 2] = heightSecondary;
colours.push(0, randomIntFromInterval(400, 500) / 1000, randomIntFromInterval(700, 800) / 1000)
} else {
colours.push(0.56, 0.68, 0.166);
}
}

//------------[Edit colour attribute]------------\\
geometry.setAttribute(
"color",
new BufferAttribute(new Float32Array(colours), 3)
);

currentTerrain = plane2;
plane2.name = `Terrain_Chunk_\${Position.x}:\${Position.y}`;
return plane2;
}
``````

Many Thanks,
Harvey

Hi!

Right after these lines, try to add `plane2.updateMatrixWorld();`

Thanks so much been starring and my screen ready to punch my desk for hours!!!

P.S. It works!

1 Like

@LeThAL_LAD You’re welcome You can create tiled noise surfaces, using uv and size of tile.
An option, just from the scratch: https://jsfiddle.net/prisoner849/cxwkhgdL/

1 Like

Again a nice example. The example is also interesting because of the quads.    Other applications with quads are in the Collection of examples from discourse.threejs.org