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>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:150px;
  height: 150px;
  display: block;
  z-index: -1;
}

*[data-diagram] {
  display: inline-block;
  width: 5em;
  height: 3em;
}

body {
  margin: 0;
}

JavaScript

var views = [];
  const sceneElements = [];
  var scene, renderer;

  var mouseX = 0,
    mouseY = 0;

  var windowHalfX = window.innerWidth;
  var windowHalfY = window.innerHeight;

  let mesh1, mesh2, mesh3

  init();
  animate();

//

  function View(canvas, fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight) {

    canvas.width = viewWidth * window.devicePixelRatio;
    canvas.height = viewHeight * window.devicePixelRatio;

    var context = canvas.getContext('2d');

    var camera = new THREE.PerspectiveCamera(20, viewWidth / viewHeight, 1, 10000);
    camera.setViewOffset(fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight);
    camera.position.z = 1800;

    this.render = function() {

      camera.position.x += (mouseX - camera.position.x) * 0.05;
      camera.position.y += (-mouseY - camera.position.y) * 0.05;
      camera.lookAt(scene.position);

      renderer.render(scene, camera);

      context.drawImage(renderer.domElement, 0, 0);

    };

  }

//

  function init() {

    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');
    var canvas3 = document.getElementById('canvas3');
    var canvas4 = document.getElementById('canvas4');

    var w = 300,
      h = 200;

    var fullWidth = w * 2;
    var fullHeight = h * 2;

    views.push(new View(canvas1, fullWidth, fullHeight, w * 0, h * 0, w, h));
    views.push(new View(canvas2, fullWidth, fullHeight, w * 1, h * 0, w, h));
    views.push(new View(canvas3, fullWidth, fullHeight, w * 0, h * 1, w, h));
    views.push(new View(canvas4, fullWidth, fullHeight, w * 1, h * 1, w, h));

    //

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 0, 1).normalize();
    scene.add(light);


    var radius = 200;

    var geometry1 = new THREE.SphereBufferGeometry(80, 32, 16);

    var count = geometry1.attributes.position.count;

    var...