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 = []
// 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)

// 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.x =  3 * i -3
                // 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 (let i = 0; i < spheres.length; i++) {
                var...