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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.