JSFiddle - React, Tailwind, and code Playground

by zhampu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://fariskassim.com/stage/rebel9/teaf/blob/v4/js/perlin.js"></script>
<canvas id="c"></canvas>
    <p>
      <span data-diagram="https://i.picsum.photos/id/1002/200/300.jpg" class="left"></span>
 
    </p>
    <p>
      <span data-diagram="https://i.picsum.photos/id/376/200/300.jpg" class="right"></span>
 
    </p>

CSS

#c {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}
*[data-diagram] {
  display: inline-block;
  width: 5em;
  height: 3em;
}

JavaScript

//  Renderer
const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#c'), antialias: true, alpha: true })
renderer.setClearColor(0x000000, 0)
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize((window.innerWidth / 2), (window.innerHeight / 2))
//  Scene & Camera
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 5
const sceneElements = []
const spheresArray = []

//  Data Diagram
document.querySelectorAll('[data-diagram]').forEach((elem) => {
  const sceneTexture = elem.dataset.diagram
  // console.log(sceneTexture)
  const eachTexture = new THREE.TextureLoader().load(sceneTexture)
  sceneElements.push(eachTexture)
  // console.log(sceneElements.length)
  return sceneElements
})
let sphere
function makeBlob (sceneElements) {
  for (var i = 0; i < sceneElements.length; i++) {
    const sphere_geometry = new THREE.SphereGeometry(128, 128, 128)
    let material = new THREE.MeshBasicMaterial({ map: sceneElements[i] })
    console.log(material)
    sphere = new THREE.Mesh(sphere_geometry, material)
    spheresArray.push(sphere);
    scene.add(spheresArray[i]);
   const update = function () {
      let time = performance.now() * 0.0005
      let k = 1
      for (var e = 0; e < sphere.geometry.vertices.length; e++) {
        let p = sphere.geometry.vertices[i]
        p.normalize().multiplyScalar(1 + 0.3 * noise.perlin3(p.x * k + time, p.y * k, p.z * k))
      }
      sphere.geometry.computeVertexNormals()
      sphere.geometry.normalsNeedUpdate = true
      sphere.geometry.verticesNeedUpdate = true
    }
  }
  console.log(sphere);
  return sphere

}
function animate () {
  makeBlob(sceneElements)
  sphere.rotation.y += 0.001
  update()
  renderer.render(scene, camera)
  requestAnimationFrame(animate)

}
// makeBlob(sceneElements)
// renderer.render(scene, camera)
requestAnimationFrame(animate)