JSFiddle - React, Tailwind, and code Playground

by zhampu

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://www.fariskassim.com/stage/rebel9/teaf/blob/v4/js/perlin.js"></script>
<canvas id="c"></canvas>
<a class="pieces-list" href="" target="_self">
  <h2>Publications</h2>
  <span data-diagram="https://i.picsum.photos/id/1002/600/300.jpg"></span>
</a>

<a class="pieces-list" href="" target="_self">
  <h2>Fashion</h2>
  <span data-diagram="https://i.picsum.photos/id/1002/200/300.jpg"></span>
</a>

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;
}

body {
  margin: 0;
}

JavaScript

const v = new THREE.Vector3()
const sceneElements = []
const spheres = []
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// const camera = new THREE.PerspectiveCamera(70, 2, 1, 1000);
camera.position.z = 10
// 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, window.innerHeight)

// Data Diagram gets an array of textures
document.querySelectorAll('[data-diagram]').forEach((elem) => {
  const sceneTexture = elem.dataset.diagram
  const eachTexture = new THREE.TextureLoader().load(sceneTexture)
  sceneElements.push(eachTexture)
  return sceneElements
})

function makeBlob(sceneElements) {

  const sphere_geometry = new THREE.SphereBufferGeometry(1, 32, 16).toNonIndexed()
  let material = new THREE.MeshBasicMaterial({
    map: sceneElements
  })
  const sphere = new THREE.Mesh(sphere_geometry, material)
  const positionOfPiece = document.querySelectorAll('[data-diagram]')
}

makeBlob(sceneElements)

scene.add(sphere)
spheres.push(sphere)



function animate() {
  requestAnimationFrame(animate)

  let time = performance.now() * 0.0005
  resizeCanvasToDisplaySize()
  for (let i = 0; i < spheres.length; i++) {
    var sphere = spheres[i]
    let k = 1
    var positionAttribute = sphere.geometry.getAttribute('position')
    for (let j = 0; j < positionAttribute.count; j++) {
      v.fromBufferAttribute(positionAttribute, j)
      v.normalize().multiplyScalar(1 + 0.3 * noise.perlin3(v.x * k + time, v.y * k, v.z * k))
      positionAttribute.setXYZ(j, v.x, v.y, v.z)
    }
    positionAttribute.needsUpdate = true
    sphere.rotation.y += 0.003
  }
  renderer.render(scene, camera)
}

animate()

function resizeCanvasToDisplaySize() {
  const canvas = renderer.domElement
  const width =...