JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body { margin: 0; }

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { ImprovedNoise } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/math/ImprovedNoise.js';
let noise = new ImprovedNoise();

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000 );
camera.position.set(0, 0, 5);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( innerWidth, innerHeight );
document.body.appendChild( renderer.domElement );

new OrbitControls(camera, renderer.domElement);

let radius = 2;
let g = new THREE.IcosahedronGeometry(1, 20);
let pos0 = [];
let v3 = new THREE.Vector3();
let p = new THREE.Vector3();
let pos = g.attributes.position;
for (let i = 0; i < pos.count; i++){
	p.fromBufferAttribute(pos, i).normalize();
  v3.copy(p).multiplyScalar(2.1);
  let ns = noise.noise(v3.x, v3.y, v3.z);
  v3.copy(p).setLength(radius).addScaledVector(p, ns * 0.5);
  pos.setXYZ(i, v3.x, v3.y, v3.z);
  pos0.push(v3.clone());
}
g.computeVertexNormals();
console.log(g)
let m = new THREE.MeshNormalMaterial({wireframe: false});
let o = new THREE.Mesh(g, m);
scene.add(o);

let sphere = new THREE.Sphere(new THREE.Vector3(), radius);
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let clock = new THREE.Clock();
let intersections;

window.addEventListener("resize", () => { camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); renderer.setSize(innerWidth, innerHeight)});

window.addEventListener("pointermove", event => {
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  raycaster.ray.intersectSphere(sphere, p);
	if (!p) return;
  p.normalize();

  //console.log(p)
  pos0.forEach((p0, idx) => {
    v3.copy(p0).normalize();
    let dt =...