Subchapter 178.1

3d Web Games

references/3d-web-games.mdMarkdown24 KBView on GitHub

A comprehensive reference for building 3D games on the web, covering foundational theory, major frameworks, shader programming, collision detection, and immersive WebXR experiences.

Sources: MDN Web Docs – Games Techniques: 3D on the web (opens in a new tab)

3D Theory and Fundamentals

3d Web Games · Game Engine · github/awesome-copilot · Skills Docs

<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>Three.js Demo</title>
    <style>
      html, body, canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
    <script>
      const WIDTH = window.innerWidth;
      const HEIGHT = window.innerHeight;
      /* all code goes here */
    </script>
  </body>
</html>

// Geometry defines the shape
const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const torusGeometry = new THREE.TorusGeometry(7, 1, 16, 32);
const dodecahedronGeometry = new THREE.DodecahedronGeometry(7);

// Material defines the surface appearance
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0095dd });   // No lighting
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0xff9500 });   // Glossy
const lambertMaterial = new THREE.MeshLambertMaterial({ color: 0xeaeff2 }); // Matte

// Mesh combines geometry + material
const cube = new THREE.Mesh(boxGeometry, basicMaterial);
cube.position.set(-25, 0, 0);
cube.rotation.set(0.4, 0.2, 0);
scene.add(cube);

let t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);

  cube.rotation.y += 0.01;                          // continuous rotation
  torus.scale.y = Math.abs(Math.sin(t));             // pulsing scale
  dodecahedron.position.y = -7 * Math.sin(t * 2);   // bobbing position

  renderer.render(scene, camera);
}
render();

const canvas = document.getElementById("render-canvas");
const engine = new BABYLON.Engine(canvas);

const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);

function renderLoop() {
  scene.render();
}
engine.runRenderLoop(renderLoop);

const box = BABYLON.Mesh.CreateBox("box", 2, scene);       // name, size, scene
const torus = BABYLON.Mesh.CreateTorus("torus", 2, 0.5, 15, scene); // name, diameter, thickness, tessellation, scene
const cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 2, 2, 2, 12, 1, scene);
// name, height, topDiameter, bottomDiameter, tessellation, heightSubdivisions, scene

box.position.x = 5;
box.rotation.x = -0.2;
box.scaling.x = 1.5;

// Animation inside render loop
let t = 0;
function renderLoop() {
  scene.render();
  t -= 0.01;
  box.rotation.y = t * 2;
  torus.scaling.z = Math.abs(Math.sin(t * 2)) + 0.5;
  cylinder.position.y = Math.sin(t * 3);
}
engine.runRenderLoop(renderLoop);

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>A-Frame Demo</title>
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    <style>
      body { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }
    </style>
  </head>
  <body>
    <a-scene>
      <!-- entities go here -->
    </a-scene>
  </body>
</html>

<!-- Built-in primitive shapes -->
<a-box position="0 1 -3" rotation="0 10 0" color="#4CC3D9"></a-box>
<a-sky color="#DDDDDD"></a-sky>

<!-- Generic entity with explicit geometry and material -->
<a-entity
  geometry="primitive: torus; radius: 1; radiusTubular: 0.1; segmentsTubular: 12;"
  material="color: #EAEFF2; roughness: 0.1; metalness: 0.5;"
  rotation="10 0 0"
  position="-3 1 0">
</a-entity>

const scene = document.querySelector("a-scene");
const cylinder = document.createElement("a-cylinder");
cylinder.setAttribute("color", "#FF9500");
cylinder.setAttribute("height", "2");
cylinder.setAttribute("radius", "0.75");
cylinder.setAttribute("position", "3 1 0");
scene.appendChild(cylinder);

<a-camera position="0 1 4" cursor-visible="true" cursor-color="#0095DD" cursor-opacity="0.5">
</a-camera>

<a-light type="directional" color="white" intensity="0.5" position="-1 1 2"></a-light>
<a-light type="ambient" color="white"></a-light>

<a-box
  color="#0095DD"
  rotation="20 40 0"
  position="0 1 0"
  animation="property: rotation; from: 20 0 0; to: 20 360 0;
    dir: alternate; loop: true; dur: 4000; easing: easeInOutQuad;">
</a-box>

<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
  }
</script>

const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: document.getElementById("vertexShader").textContent,
  fragmentShader: document.getElementById("fragmentShader").textContent,
});

const cube = new THREE.Mesh(boxGeometry, shaderMaterial);

function isPointInsideAABB(point, box) {
  return (
    point.x >= box.minX &&
    point.x <= box.maxX &&
    point.y >= box.minY &&
    point.y <= box.maxY &&
    point.z >= box.minZ &&
    point.z <= box.maxZ
  );
}

function isPointInsideSphere(point, sphere) {
  const distance = Math.sqrt(
    (point.x - sphere.x) ** 2 +
    (point.y - sphere.y) ** 2 +
    (point.z - sphere.z) ** 2
  );
  return distance < sphere.radius;
}

function intersect(sphere, other) {
  const distance = Math.sqrt(
    (sphere.x - other.x) ** 2 +
    (sphere.y - other.y) ** 2 +
    (sphere.z - other.z) ** 2
  );
  return distance < sphere.radius + other.radius;
}

function intersect(sphere, box) {
  const x = Math.max(box.minX, Math.min(sphere.x, box.maxX));
  const y = Math.max(box.minY, Math.min(sphere.y, box.maxY));
  const z = Math.max(box.minZ, Math.min(sphere.z, box.maxZ));

  const distance = Math.sqrt(
    (x - sphere.x) ** 2 +
    (y - sphere.y) ** 2 +
    (z - sphere.z) ** 2
  );

  return distance < sphere.radius;
}

// Box3 from an object (recommended -- accounts for transforms and children)
const knotBBox = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
knotBBox.setFromObject(knot);

// Sphere from geometry
const knotBSphere = new THREE.Sphere(
  knot.position,
  knot.geometry.boundingSphere.radius
);

// Point inside box or sphere
knotBBox.containsPoint(point);
knotBSphere.containsPoint(point);

// Box vs. box
knotBBox.intersectsBox(otherBox);

// Sphere vs. sphere
knotBSphere.intersectsSphere(otherSphere);

THREE.Sphere.__closest = new THREE.Vector3();
THREE.Sphere.prototype.intersectsBox = function (box) {
  THREE.Sphere.__closest.set(this.center.x, this.center.y, this.center.z);
  THREE.Sphere.__closest.clamp(box.min, box.max);
  const distance = this.center.distanceToSquared(THREE.Sphere.__closest);
  return distance < this.radius * this.radius;
};

const knotBoxHelper = new THREE.BoxHelper(knot, 0x00ff00);
scene.add(knotBoxHelper);

// After moving or rotating the mesh, update the helper
knot.position.set(-3, 2, 1);
knot.rotation.x = -Math.PI / 4;
knotBoxHelper.update();

// Convert to Box3 for intersection tests
const box3 = new THREE.Box3();
box3.setFromObject(knotBoxHelper);
box3.intersectsBox(otherBox3);