three.js testbed

with orbitControls, XZgrid, info

by Millieyan

HTML

<div id="info">
  <br>Sounds<br><br> BGM (<a href="javascript:toggle();">dimmer</a>)<br>
  <button id="play" style="width:20%">Play</button>

</div>

<audio id="collisionsound" style="display:none">
<source src="https://jyunming-chen.github.io/gameHWhelpers/sounds/collision3.wav" type='audio/wav'>
</audio>

<audio id="soundtrack" autoplay loop style="display:none">
<source src="music/music.mp3" type='audio/mp3'>
</audio>

<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>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

class Ball {
  constructor(mesh, rad = 2, color) {

    this.pos = new THREE.Vector3()
    this.vel = new THREE.Vector3()
    this.force = new THREE.Vector3()
    this.mesh = mesh;
    this.radius = rad;
    this.light = new THREE.PointLight(color, 1, 50);
    scene.add(this.light)
    scene.add(this.mesh) // add to scene when particle is created

    console.log(color)
    this.mesh.material.color.copy(color.clone());
  }
  update(dt) {
    this.vel.add(this.force.clone().multiplyScalar(dt))
    this.pos.add(this.vel.clone().multiplyScalar(dt))

    this.collidingPlanes(planes)
    if (this.pos.z > 100 - this.radius) {
      const CR = 0.9
      this.pos.z = 100 - this.radius
      this.vel.z = -CR * this.vel.z;
    }
    this.mesh.position.copy(this.pos)
    this.light.position.copy(this.pos)
    this.light.position.y += 20
  }

  collidingPlanes(planes) {
    const EPS = 1e-3
    const CR = 0.96
    for (let i = 0; i < planes.length; i++) {
      let plane = planes[i]
      let point = this.pos.clone().sub(plane.ptOnPl)
      if (point.dot(plane.normal) < EPS + this.radius) {
        // position correction
        this.pos.copy(plane.ptOnPl.clone().add(point.projectOnPlane(plane.normal)))
        this.pos.add(plane.normal.clone().multiplyScalar(this.radius))
        // velocity update
        this.vel.sub(plane.normal.clone().multiplyScalar((1 + CR) * this.vel.dot(plane.normal)))
        //return;  // assume particle collides with AT MOST one plane
      }
    }
  }

  carcollision(carb) {
    if (this.pos.distanceTo(carb.pos) < 20) {
      //兩點相撞
      //速度

      let caravel = new THREE.Vector3().copy(this.vel);
      let carbvel = new THREE.Vector3().copy(carb.vel);
      let ab = this.pos.clone().sub(carb.pos);
      let ba = ab.clone().multiplyScalar(-1);
      caravel.sub(ab.multiplyScalar(this.vel.clone().sub(carb.vel).dot(ab) / ab.lengthSq()));
      carbvel.sub(ba.multiplyScalar(carb.vel.clone().sub(this.vel).dot(ba) / ba.lengthSq()));

     ...