JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js">

</script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">

</script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffffff
}

body {
  overflow: hidden;
}

JavaScript

class Rectangle {
  constructor(mesh, width, height) {
    this.pos = new THREE.Vector3()
    this.mesh = mesh;
    this.width = width;
    this.height = height;
    this.mesh.material.color = new THREE.Color(0xff0000)
    mesh.position.x = 150;
    mesh.position.y = 0;
    this.max = new THREE.Vector3(mesh.position.x + width / 2, mesh.position.y + height / 2, 0);
    this.min = new THREE.Vector3(mesh.position.x - width / 2, mesh.position.y - height / 2, 0);
    scene.add(this.mesh);
  }
  update(angle) {

    var k = 3;
    var cos = Math.cos;
    var sin = Math.sin;
    var r = 100 * cos(k * angle);
    var x = -100 * cos(k * angle) * sin(angle) - k * sin(k * angle) * cos(angle);
    var y = -100 * cos(k * angle) * cos(angle) - k * sin(k * angle) * sin(angle);
    this.mesh.position.set(r * cos(angle), 100 * cos(k * angle) * sin(angle), 0)
    //this.mesh.position.x -= 0.5
    this.max = new THREE.Vector3(this.mesh.position.x + this.width / 2, this.mesh.position.y + this.height / 2, 0);
    this.min = new THREE.Vector3(this.mesh.position.x - this.width / 2, this.mesh.position.y - this.height / 2, 0);
    this.collidingCircle();
  }
  collidingCircle() {
    var max = this.max.sub(circle.position);
    var min = this.min.sub(circle.position);
    //console.log(max);
    if (max.x < 0) {
      if (max.y < 0) return (max.x * max.x + max.y * max.y < 30 * 30);
      else if (min.y > 0) return (max.x * max.x + min.y * min.y < 30 * 30);
      else return Math.abs(max.x) < 30;
    } else if (min.x > 0) {
      if (max.y < 0) return (min.x * min.x + max.y * max.y < 30 * 30);
      else if (min.y > 0) return (min.x * min.x + min.y * min.y < 30 * 30);
      else return min.x < 30;
    } else {
      if (max.y < 0) return Math.abs(max.y) < 30;
      else if (min.y > 0) return min.y < 30
      else return true;
    }
  }
}
var camera, scene, renderer, light, controls;
var frame, circle, rectangle;

init();
animate();

function init() {

  renderer = new...