plinko game using threejs in typescript

index.ts
import * as THREE from 'three';

// Set up Three.js scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
381 chars
10 lines

index.ts
// Create the Plinko board using Three.js geometry and materials
const boardGeometry = new THREE.BoxGeometry(10, 1, 10);
const boardMaterial = new THREE.MeshPhongMaterial({ color: 0xCCCCCC });

const board = new THREE.Mesh(boardGeometry, boardMaterial);
board.position.set(0, -5, 0);
scene.add(board);
302 chars
8 lines

index.ts
import * as CANNON from 'cannon';

// Set up physics simulation using the cannon.js library
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0);
world.broadphase = new CANNON.NaiveBroadphase();
world.solver.iterations = 10;

const boardBody = new CANNON.Body({
  mass: 0,
  position: new CANNON.Vec3(0, -5, 0),
  shape: new CANNON.Box(new CANNON.Vec3(5, 0.5, 5))
});

world.addBody(boardBody);
407 chars
16 lines

index.ts
// Create the Plinko balls using Three.js geometry and materials, and add them to the physics simulation
const ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const ballMaterial = new THREE.MeshPhongMaterial({ color: 0xFF0000 });

const ballBodies: CANNON.Body[] = [];
for (let i = -4.5; i <= 4.5; i++) {
  for (let j = 0; j < 10; j++) {
    const ball = new THREE.Mesh(ballGeometry, ballMaterial);
    ball.position.set(i, 10 + j * 2, 0);
    scene.add(ball);

    const ballBody = new CANNON.Body({
      mass: 1,
      position: new CANNON.Vec3(i, 10 + j * 2, 0),
      shape: new CANNON.Sphere(0.5)
    });
    world.addBody(ballBody);

    ballBodies.push(ballBody);
  }
}
684 chars
22 lines

index.ts
// Render the scene and update the physics simulation on every frame
function animate() {
  requestAnimationFrame(animate);

  world.step(1 / 60);

  ballBodies.forEach((body, index) => {
    const ball = ballMeshes[index];
    ball.position.copy(body.position);
    ball.quaternion.copy(body.quaternion);
  });

  renderer.render(scene, camera);
}

animate();
361 chars
17 lines