JSFiddle - React, Tailwind, and code Playground

by timrr

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/708453/perlin.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>

    <script src="sketch_01.js" type="module"></script>

</head>
<body>
<canvas id="scene" style="position:absolute; left:0;top:0;"></canvas>

</body>
</html>

JavaScript

// Simple three.js example

import * as THREE from 'https://threejs.org/build/three.module.js';
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
import { LineMaterial } from 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
import { Wireframe } from 'https://threejs.org/examples/jsm/lines/Wireframe.js';
import { LineSegmentsGeometry } from 'https://threejs.org/examples/jsm/lines/LineSegmentsGeometry.js';


var  renderer, scene, camera, camera2, controls;

// viewport
var insetWidth;
var insetHeight;

let blob;
const MAX_POINTS = 10;
var mouse = new THREE.Vector2( 0.8, 0.5 );
let width, height;

init();
requestAnimationFrame( render );
window.addEventListener( 'mousemove', onMouseMove );

function init() {

    var canvas = document.querySelector( '#scene' );
    width = canvas.offsetWidth,
        height = canvas.offsetHeight;

    renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setClearColor( 0x000000, 0.0 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( -50, 0, 500 );

    controls = new OrbitControls( camera, renderer.domElement );
    controls.minDistance = 10;
    controls.maxDistance = 500;



    ////////////////////////////
    // SHAPE
    ////////////////////////////


    let blobGeometry = new THREE.IcosahedronGeometry( 50, 2 );
    var blobMaterial = new THREE.MeshPhongMaterial( {
        emissive: 0x00ff00,
        emissiveIntensity: 0.5,
        shininess: 0,
    } );
    // attributes
    // const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
    // blobGeometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );


    blob = new...