JSFiddle - React, Tailwind, and code Playground

by mornejac

HTML

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="../static/stylesheets/test2.css">
  </head>
  <body>
<div class="container">
    <button class="btn" id="play_btn" onclick="play()">
        Play
    </button>
    <button class="btn" id="stop_btn" onclick="stop()">
        Stop
    </button>
    <canvas id="c"></canvas>
</div>
</body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.131.3/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.131.3/examples/js/controls/OrbitControls.js"></script>
  </body>
</html>

CSS

body {
  margin: 0;
}

.container {
    position: relative
}

.btn {
    position: absolute;
    top: 10px;
    z-Index: 2;
}

#c {
    position: relative;
    top: 0px;
}

#play_btn {
    left: 10px;
}

#stop_btn {
    left: 60px;
}

JavaScript

var scene, camera, renderer, material, orbit_control;
var mesh, leftside_mesh, rightside_mesh;
var start_time, animation_time, animating;
var angle, speed;

init();

function init() {
    animating = false;
    reset();

    scene = new THREE.Scene();

    const canvas = document.getElementById("c")

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
    orbit_control = new THREE.OrbitControls(camera, canvas)
    camera.position.set(4, 20, 40);
    camera.lookAt(scene.position);
    camera.updateProjectionMatrix();
    orbit_control.maxDistance = 60;
    orbit_control.dampingFactor = .5;
    orbit_control.enableDamping = true;
    orbit_control.update();
    orbit_control.enabled = true;

    material = new THREE.MeshPhongMaterial({
          color: 0xfdfdf9,
          transparent: false,
          side: THREE.DoubleSide
    });
  
    mesh = new THREE.Mesh(getPageGeometry(angle), material);
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    scene.add(mesh);

    leftside_mesh = new THREE.Mesh(getPageGeometry(187), material);
    leftside_mesh.castShadow = true;
    leftside_mesh.receiveShadow = true;
    scene.add(leftside_mesh);

    rightside_mesh = new THREE.Mesh(getPageGeometry(-7), material);
    rightside_mesh.castShadow = true;
    rightside_mesh.receiveShadow = true;
    scene.add(rightside_mesh);

    light1 = new THREE.DirectionalLight(0xFFFFFF, .65);
    light1.position.set(-10, 25, 10);
    light1.target.position.set(0, 0, 0);

    light1.castShadow = true;
    light1.shadow.bias = -0.002;
    light1.shadow.camera.top = 40;
    light1.shadow.camera.bottom = -20;
    light1.shadow.camera.left = -40;
    light1.shadow.camera.right = 40;
    light1.shadow.camera.near = 1;
    light1.shadow.camera.far = 60;
    light1.shadow.mapSize.width = 2048;
    light1.shadow.mapSize.height = 2048;

    scene.add(light1);
    scene.add(light1.target);

    light2 = new THREE.AmbientLight(0xFFFFFF, .3);
   ...