Myujth

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000);
camera.position.setScalar(150);
var renderer = new THREE.WebGLRenderer(
 antialias: true
);
var canvas = renderer.domElement;
document.body.appendChild(canvas);

var controls = new THREE.OrbitControls(camera, canvas);

var light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.setScalar(100);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var size = x: 200, y: 200 ;
var pointsCount = 1000;
var points3d = ;
for (let i = 0; i < pointsCount; i++) 
 let x = THREE.Math.randFloatSpread(size.x);
 let z = THREE.Math.randFloatSpread(size.y);
 let y = noise.perlin2(x / size.x * 5, z / size.y * 5) * 50;
 points3d.push(new THREE.Vector3(x, y, z));


var geom = new THREE.BufferGeometry().setFromPoints(points3d);
var cloud = new THREE.Points(
 geom,
 new THREE.PointsMaterial( color: 0x99ccff, size: 2 )
);
scene.add(cloud);

// triangulate by [x, z]
var indexDelaunay = Delaunator.from(
 points3d.map(v => 
 return [v.x, v.z];
 )
);

var meshIndex = ; // delaunay index => three.js index
for (let i = 0; i < indexDelaunay.triangles.length; i++)
 meshIndex.push(indexDelaunay.triangles[i]);


geom.setIndex(meshIndex); // add three.js index to the existing geometry
geom.computeVertexNormals();
var mesh = new THREE.Mesh(
 geom, // re-use the existing geometry
 new THREE.MeshLambertMaterial( color: "purple", wireframe: true )
);
scene.add(mesh);

var gui = new dat.GUI();
gui.add(mesh.material, "wireframe");

render();

function resize(renderer) 

function render() 
 if (resize(renderer)) 
 camera.aspect = canvas.clientWidth / canvas.clientHeight;
 camera.updateProjectionMatrix();
 
 renderer.render(scene, camera);
 requestAnimationFrame(render);

html, body 
 height: 100%;
 margin: 0;
 overflow: hidden;
 font-family: Verdana;

canvas 
 width: 100%;
 height: 100%;
 display; block;


#info
 position: absolute;
 margin-left: 10px;


a
 color: yellow;
 text-decoration: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<!-- https://github.com/mapbox/delaunator -->
<script src="https://unpkg.com/delaunator@3.0.2/delaunator.js"></script>

<script src="https://josephg.github.io/noisejs/perlin.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>

<div id="info">
 <a href="https://github.com/mapbox/delaunator" target="blank">Delaunator<br>(triangulation)</a> 
</div>