JSFiddle - React, Tailwind, and code Playground

by nawoo

HTML

<script>
  var tokenId = 1;
</script>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  canvas {
    width: 100%;
    height: 100%;
  }
</style>
<script>
  var script = document.createElement('script');
  script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js');
  document.head.appendChild(script);
</script>
<script>
  // --- start ---
  window.onload = () => {
    const size = { width: window.innerWidth, height: window.innerHeight };
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    const camera = new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
    camera.position.z = 4;
    camera.lookAt(0, 0, 0);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(size.width, size.height);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);

    const light = new THREE.HemisphereLight(0xffffff, 0x202020, 1);
    const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16, 2, 3);
    const material = new THREE.MeshPhongMaterial({ color: 0x00ffff });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(light, mesh);

    window.addEventListener('resize', () => {
      size.width = window.innerWidth;
      size.height = window.innerHeight;
      camera.aspect = size.width / size.height;
      camera.updateProjectionMatrix();
      renderer.setSize(size.width, size.height);
      renderer.setPixelRatio(window.devicePixelRatio);
    });

    const clock = new THREE.Clock();
    const animate = function () {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      mesh.rotation.x += delta;
      mesh.rotation.y += delta;
      renderer.render(scene, camera);
    };
    animate();
  };
  // --- end ---
</script>