JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

<div id="info">hw7 one Puck</div>
<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: #000000
}

body {
  overflow: hidden
}

JavaScript

var camera, scene, renderer, mesh, controls;
var clock;
var raycaster, pickables = [];

var allpuck = [];
var puck;
var wallLength = 200;
var mat=new THREE.MeshNormalMaterial();
var mouse = new THREE.Vector2();
var r=10;
document.addEventListener('mousedown', onDocumentMouseDown, false);

class Puck 
{
    constructor(point) 
    {
        point.z = 0;
        this.pos = point.clone();
        this.vel = new THREE.Vector3(0, 800, 0);
        this.puck = buildpuck();
        this.puck.rotation.x = Math.PI / 2;
        scene.add(this.puck);
    }

    checkWall() 
    {
        if (this.pos.x >= wallLength / 2 - 1 - r && this.vel.x > 0) {
            this.pos.x = wallLength / 2 - 1 - r;
            this.vel.x *= -0.9;                //right wall
        }
        if (this.pos.y >= wallLength / 2 - 1 - r && this.vel.y > 0) {
            this.pos.y = wallLength / 2 - 1 - r;
            this.vel.y *= -0.9;                   //up wall
        }
        if (this.pos.x <= -wallLength / 2 + 1 + r && this.vel.x < 0) {
            this.pos.x = -wallLength / 2 + 1 + r;
            this.vel.x *= -0.9;                   //left wall
        }       
        if (this.pos.y <= -wallLength / 2 + 1 + r && this.vel.y < 0) {
            this.pos.y = -wallLength / 2 + 1 + r;
            this.vel.y *= -0.9;               // down wall
        }

    }

    update(dt) 
    {
        var force = this.vel.length() * 0.9;
        var forcev=this.vel.normalize().multiplyScalar(force);
        this.pos.add(forcev.clone().multiplyScalar(dt));
        this.puck.position.copy(this.pos);
    }
}

init();
animate();

function buildpuck() 
{
    var puck = new THREE.Object3D();
    var body = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 2, 20), mat);
    puck.add(body);
    return puck;
}

function buildWall() {
    var totalWall = new THREE.Object3D();

    var wall1 = new THREE.Mesh(new THREE.BoxGeometry(wallLength, 2, 2),  mat);
    wall1.position.y = wallLength / 2;
   ...