Как изменить цвет сферы после обнаружения столкновения в three.js?

Question

Код ниже я установил для случайного изменения цвета шара.Я пытаюсь выяснить, как изменить цвет шара после обнаружения столкновения.

"use strict";
let w, h;
let fpsdisp;
var balls = [];

class Ball {
  constructor(_x, _y, _z, _rad, _vx, _vy, _vz) {
    this.location = createVector(_x, _y, _z);
    this.radius = _rad;
    this.velocity = createVector(_vx, _vy, _vz);
    this.r;
    this.g;
    this.b
  }
  show() {
    push();
      translate(this.location.x, this.location.y, this.location.z);
      noStroke();
      specularMaterial(this.r, this.g, this.b);
      sphere(this.radius);
    pop();
  }
  update() {

// отскакивать от стен в 3 направлениях, x, y и z

if (this.location.x-this.radius <= -w/2 || this.location.x+this.radius >= w/2) this.velocity.x *= -1;
if (this.location.y-this.radius <= -h/2 || this.location.y+this.radius >= h/2) this.velocity.y *= -1;
if (this.location.z-this.radius <= -500 || this.location.z >= 100) this.velocity.z *= -1

;

// не прилипать к стенам

if (this.location.x <= -w/2) this.location.x = -w/2+this.radius;
      if (this.location.x+this.radius >= w/2) this.location.x = w/2-this.radius;
      if (this.location.y-this.radius <= -h/2) this.y = -h/2+this.radius;
      if (this.location.y >= h/2) this.y = h/2-this.radius;
      if (this.location.z < -500) this.z = -500;
      if (this.location.z > 100) this.z = 100;

// двигаться вдоль

    this.location.add(this.velocity);
      }
        changeColor() {
        this.r = 255;
        this.g = 0;
        this.b = 0;
      }
      noChangeColor() {
        this.r = 0;
        this.g = 0;
        this.b = 255;
      }
    }

var radius = 20;

function setup() {
  var colors = ["#5D9ACC", "#1FBF15", "#FFDE33", "#FF7504", "#E0100E"];
    if (windowWidth > displayWidth) {
    w = displayWidth;
    h = displayHeight*0.8;
    } else {
    w = windowWidth;
    h = windowHeight;
  }
  createCanvas(w, h, WEBGL);  
  fpsdisp = createSpan().id("Fps");
  angleMode(DEGREES);

// создать несколько шариков

for (let i=0; i<1; i++) {
    balls.push(new Ball(random(-w/2+20,w/2), random(-h/2,h/2-20), random(-150,100), radius, random(-3,3), random(-3,3), random(-3,3)));
  }
}

var d;

function draw() {
  background(20, 10);
  fpsdisp.html("fps: " + floor(frameRate()));

// нарисовать 5 сторон в поле, передняя сторона открыта

 push();
    translate(w/2,0);
    rotateY(90);
    specularMaterial("lightgray");
    plane(1000, h);
  pop();
  push();
    translate(0,h/2);
    rotateX(90);
    specularMaterial("lightgray");
    plane(w, 1000);
  pop();
  push();
    translate(0,-h/2);
    rotateX(90);
    specularMaterial("lightgray");
    plane(w, 1000);
  pop();
  push();
    translate(-w/2,0);
    rotateY(90);
    specularMaterial("lightgray");
    plane(1000, h);
  pop();
  push();
    translate(0, 0, -500);
    specularMaterial("white");
    plane(w-10, h-10);  
  pop();

// создаем точечный и другой источник света, управляемый касанием экрана

  let v = createVector(-mouseX+w/2,-mouseY+h/2, -100);
  v.normalize();
  pointLight(255,255,255,0,0,-1500);
  directionalLight(255,255,255,v)
  for (let ball of balls) {
    ball.show();
    ball.noChangeColor();
    ball.update();
  }

// обнаружение столкновения, но не само столкновение ...

for (let i=0; i<balls.length; i++) {
    for (let j=i+1; j<balls.length; j++) {
      d = dist3D(balls[i].location.x, balls[i].location.y, balls[i].location.z, balls[j].location.x, balls[j].location.y, balls[j].location.z);
      if (d <= balls[i].radius+balls[j].radius) {
        balls[i].changeColor();
        balls[j].changeColor();
      }
    }
  }

}

// вычислениерасстояние между шариками

function dist3D(x1, y1, z1 ,x2, y2, z2) {
  var distance = Math.sqrt(Math.pow((x1-x2), 2) + Math.pow((y1-y2), 2) + Math.pow((z1-z2), 2));
  return distance;
}