JSFiddle - React, Tailwind, and code Playground

by Bretto

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 nPos = [];
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());
}
 console.log(v3, v3.clone().normalize());
 
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));
 
  g.userData.nPos.forEach((p, idx) => {
  	let ns = noise.noise(p.x + t, p.y + t, p.z + t);
    
    
    v3.copy(p).addScaledVector(p, ns* .5 * f);
    pos.setXYZ(idx, v3.x, v3.y, v3.z);
  })
  g.computeVertexNormals();
  pos.needsUpdate = true;
	renderer.render(scene, camera);
})