JSFiddle - React, Tailwind, and code Playground

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 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.BoxGeometry(1, 1, 1);
let g2 = new THREE.BoxGeometry(1, 1, 1);
// let g3 = new THREE.BoxGeometry(1, 1, 1);
let nPos = [];
let posVec = [];
let v3 = new THREE.Vector3();
let pos = g.attributes.position;
for (let i = 0; i < pos.count; i++) {
  v3.fromBufferAttribute(pos, i);
  nPos.push(v3.clone().normalize());
  posVec.push(v3.clone())
}

g.userData.nPos = nPos;
let m = new THREE.MeshBasicMaterial({ wireframe: true });
let o = new THREE.Mesh(g, m);
scene.add(o);

let m2 = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xff0000 });
let o2 = new THREE.Mesh(g2, m2);
scene.add(o2);

let noise = new ImprovedNoise()
let clock = new THREE.Clock();

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

renderer.setAnimationLoop(() => {
  let t = clock.getElapsedTime() * .5;
  f = Math.abs(Math.sin(t));

  posVec.forEach((p, idx) => {
    // let ns = 0;
    let ns = noise.noise(p.x + t, p.y + t, p.z + t);
    v3.copy(p).addScaledVector(p, ns * .5 * f);

    // debugger
    pos.setXYZ(idx, v3.x, v3.y, v3.z);
  })
  g.computeVertexNormals();
  pos.needsUpdate = true;
  renderer.render(scene, camera);
})