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)
  return sceneElements
})

function makeBlob(sceneElements) {

  console.log(sceneElements.length);
  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)
    const sphere = new THREE.Mesh(sphere_geometry, material)
    sphere.rotation.y += 0.001
    spheresArray.push(sphere)
    console.log(spheresArray);
    for (let i = 0; i < spheresArray.length; i++) {
      scene.add(spheresArray[i])
    }
    let time = performance.now() * 0.0005
    let k = 1
    for (var i = 0; i < sphere.geometry.vertices.length; i++) {
      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

  }

}

makeBlob(sceneElements)

function animate() {
  renderer.render(scene, camera)
  requestAnimationFrame(animate)
}

requestAnimationFrame(animate)