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

<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

const v = new THREE.Vector3()
const sceneElements = []
const spheres = []
// Renderer
// const renderer = new THREE.WebGLRenderer({
//   canvas: document.querySelector('#c'),
//   antialias: true,
//   alpha: true
// })

const canvas = document.createElement('canvas');
const renderer = new THREE.WebGLRenderer({canvas,antialias: true, alpha: true});
const sceneElements2 = [];
  function addScene(elem, fn) {
    const ctx = document.createElement('canvas').getContext('2d');
    elem.appendChild(ctx.canvas);
    sceneElements2.push({elem, ctx, fn});
  }
renderer.setClearColor(0x000000, 0)
renderer.setPixelRatio(window.devicePixelRatio)
// renderer.setSize(window.innerWidth, window.innerHeight)

//Scene & Camera
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

// Data Diagram
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) {
  for (var i = 0; i < sceneElements.length; i++) {



    const sphere_geometry = new THREE.SphereBufferGeometry(1, 32, 16).toNonIndexed()
    let material = new THREE.MeshBasicMaterial({
      map: sceneElements[i]
    })
    const sphere = new THREE.Mesh(sphere_geometry, material)
    const positionOfPiece = document.querySelectorAll('[data-diagram]')
    console.log(positionOfPiece[i])
    sphere.position.y = positionOfPiece[i].offsetTop * 0.008 * -i
    sphere.position.x =  4
    // sphere.position.y = positionOfPiece.top
    scene.add(sphere)
    spheres.push(sphere)


  }
}

makeBlob(sceneElements)

function animate () {
  requestAnimationFrame(animate)

  let time = performance.now() * 0.0005
  resizeCanvasToDisplaySize()
  for (var i = 0; i <...