JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/master/src/extras/Earcut.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

//alert(Earcut.triangulate)
  
import { Earcut } from 'https://rawcdn.githack.com/mrdoob/three.js/master/src/extras/Earcut.js';

THREE.ShapeUtils.triangulateShape = function ( contour, holes ) {

	function removeDupEndPts( points ) {

		var l = points.length;
		if ( l > 2 && points[ l - 1 ].equals( points[ 0 ] ) ) {

			points.pop();

		}

	}

	function addContour( vertices, contour ) {

		for ( var i = 0; i < contour.length; i ++ ) {

			vertices.push( contour[ i ].x );
			vertices.push( contour[ i ].y );

		}

	}

	removeDupEndPts( contour );
	holes.forEach( removeDupEndPts );

	var vertices = [];
	addContour( vertices, contour );
	var holeIndices = [];
	var holeIndex = contour.length;
	for ( i = 0; i < holes.length; i ++ ) {

		holeIndices.push( holeIndex );
		holeIndex += holes[ i ].length;
		addContour( vertices, holes[ i ] );

	}

	var result = Earcut.triangulate( vertices, holeIndices, 2 );
	var grouped = [];
	for ( var i = 0; i < result.length; i += 3 ) {

		grouped.push( result.slice( i, i + 3 ) );

	}

	return grouped;

};

// Simple three.js example

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 100, 100000 );
    camera.position.set( 0, 0, 30000 );

    // controls
    controls = new THREE.OrbitControls( camera,  renderer.domElement);
    
    // axes
    scene.add( new THREE.AxisHelper( 1000 ) );
    
    // material
    var FAR = 10000;

    var points = []
    points.push( new THREE.Vector2( +FAR,+FAR ));
    points.push( new THREE.Vector2( +FAR,-FAR ));
    points.push( new THREE.Vector2( -FAR,-FAR ));
    points.push( new THREE.Vector2( -FAR,+FAR ));
    points.push( new THREE.Vector2(...