JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>
<div id="container"></div>
CSS
body {
margin: 0 auto;
position: absolute;
}
JavaScript
// Define the standard global variables
var container,
scene,
camera,
renderer,
plane,
mouseMesh,
backgroundMesh,
INTERSECTED;
// Custom global variables
var targetList = [],
mouse = {x: 0, y: 0};
/////////////// IGNORE - To have TessallateModifier.js and ExplodeModifier.js //////////////
//////////////////////////////////////////////////////////////////////////////////////////
// Tessallate modifier function
THREE.TessellateModifier = function ( maxEdgeLength ) {
this.maxEdgeLength = maxEdgeLength;
};
THREE.TessellateModifier.prototype.modify = function ( geometry ) {
var edge;
var faces = [];
var faceVertexUvs = [];
var maxEdgeLengthSquared = this.maxEdgeLength * this.maxEdgeLength;
for ( var i = 0, il = geometry.faceVertexUvs.length; i < il; i ++ ) {
faceVertexUvs[ i ] = [];
}
for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) {
var face = geometry.faces[ i ];
if ( face instanceof THREE.Face3 ) {
var a = face.a;
var b = face.b;
var c = face.c;
var va = geometry.vertices[ a ];
var vb = geometry.vertices[ b ];
var vc = geometry.vertices[ c ];
var dab = va.distanceToSquared( vb );
var dbc = vb.distanceToSquared( vc );
var dac = va.distanceToSquared( vc );
if ( dab > maxEdgeLengthSquared || dbc > maxEdgeLengthSquared || dac > maxEdgeLengthSquared ) {
var m = geometry.vertices.length;
var triA = face.clone();
var triB = face.clone();
if ( dab >= dbc && dab >= dac ) {
var vm = va.clone();
vm.lerp( vb, 0.5 );
triA.a = a;
triA.b = m;
triA.c = c;
triB.a = m;
triB.b = b;
triB.c = c;
if ( face.vertexNormals.length === 3 ) {
var vnm = face.vertexNormals[ 0 ].clone();
vnm.lerp( face.vertexNormals[ 1 ], 0.5 );
triA.vertexNormals[ 1 ].copy( vnm );
triB.vertexNormals[ 0 ].copy( vnm );
}
if ( face.vertexColors.length === 3 ) {
var vcm = face.vertexColors[ 0...