JSFiddle - React, Tailwind, and code Playground

by Millieyan

HTML

<h1 style="text-align:center">Homework 4</h1>

<hr>
<div id="container" style="float:left; margin:3px; width:60vw; height:60vw">
</div>
<div>
  Radius
  <input type=range min=1 max=5 step="0.1" value=5 id='rad'>
</div>
<br>
<div>
  Sound
  <input type="checkbox" name="sound" value="sound">
</div>
<br>
<button id="toggle" style="width:30%">Start/Pause</button>
<p id='greeting'></p>

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

JavaScript

$('#toggle').click(function() {
  motion = !motion;
  console.log(motion)
});
$('#rad').change(function() {
  console.log($(this).val());
  circle.geometry = new THREE.CircleGeometry($(this).val(), 20);
})
var camera, scene, renderer, radius;
var pos, vel;
var motion = true;

init();
animate();


function init() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(ww, hh);
  renderer.setClearColor(0x888888);
  $("#container").append(renderer.domElement);

  ////////////////////////////////////////////////

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, 1, 1000);
  camera.position.z = 500;
  radius = 5;
  circle = new THREE.Mesh(new THREE.CircleGeometry(radius, 20), new THREE.MeshBasicMaterial());
  scene.add(circle);
  plane = new THREE.Mesh(new THREE.PlaneGeometry(25, 5), new THREE.MeshBasicMaterial());
  scene.add(plane);
  let geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-40, -40, 0),
    new THREE.Vector3(40, -40, 0),
    new THREE.Vector3(40, 40, 0),
    new THREE.Vector3(-40, 40, 0),
    new THREE.Vector3(-40, -40, 0));

  let border = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: 0xffffff
  }));
  scene.add(border);
  pos = new THREE.Vector3();
  vel = new THREE.Vector3(5, 4, 0);
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  var ww = $("#container").innerWidth();
  var hh = $("#container").innerHeight();

  camera.aspect = ww / hh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, hh);
}

function animate() {
  dt = motion ? 0.1 : 0;
  pos.add(vel.clone().multiplyScalar(dt));

  if (Math.abs(pos.x) > 40 - radius) {
    vel.x *= -1;
  }
  if (Math.abs(pos.y) > 40 - radius) {
    vel.y *= -1;
  }
  circle.position.copy(pos);
  requestAnimationFrame(animate);
  render();
}

function render() {
  renderer.render(scene,...