import * as THREE from 'https://threejs.org/build/three.module.js';

        import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
        import Delaunator from 'https://cdn.skypack.dev/delaunator@5.0.0';

        let scene, camera, renderer, controls;

        init();
        animate();

        function init() {

          scene = new THREE.Scene()
          scene.background = new THREE.Color(0xffffff)

          camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000)
          camera.position.set(8,3,-8)

          renderer = new THREE.WebGLRenderer({antialias:true})
          renderer.setSize(window.innerWidth, window.innerHeight)
          document.body.appendChild(renderer.domElement)

          // camera controls
          controls = new OrbitControls(camera, renderer.domElement)
          controls.enableDamping = true
          controls.update()

          // update on window resize
          window.addEventListener('resize', function(){
              var width = window.innerWidth
              var height = window.innerHeight
              renderer.setSize(width, height)
              camera.aspect = width/height
              camera.updateProjectionMatrix()
          })

          const points = [-1,-1,-1,-1,-1,1,1,-1,1,1,-1,-1,-1,1,-1,-1,1,1,1,1,1,1,1,-1]

          // Delaunay
          var points3d = [];

          for (let i = 0; i < points.length/3; i++) {
              let x = points[3*i];
              let z = points[3*i+2];
              let y = points[3*i+1];
              points3d.push(new THREE.Vector3(x,y,z));
          }

          console.log(points3d);

          var geom = new THREE.BufferGeometry().setFromPoints(points3d);

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

          console.log(indexDelaunay);

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

          console.log(meshIndex);

          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);
        }

        function animate() {
          controls.update();
          requestAnimationFrame(animate);
          render();
        }

        function render() {
          renderer.render(scene,camera);
        }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.