3D Physics Simulation: Bouncing Spheres

body {
             margin: 0;
             overflow: hidden;
             font-family: arial, sans serif;
         }

#container {
             width: 100vw;
             height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             background-color: #1a1a1a;
         }

.controls {
             position: fixed;
             top: 20px;
             left: 20px;
             background: rgba(0, 0, 0, 0.7);
             padding: 15px;
             border-radius: 10px;
             color: white;
             z-index: 1000;
         }

.control-group {
             margin: 10px 0;
         }

.control-group label {
             display: block;
             margin-bottom: 5px;
         }

.slider-container {
             display: flex;
             align-items: center;
             gap: 10px;
         }

.slider {
             flex: 1;
         }

.value-display {
             width: 60px;
             text-align: right;
         }

.description {
             position: fixed;
             top: 80px;
             width: 100%;
             text-align: center;
             margin: 20px;
             padding: 15px;
             background: rgba(0, 0, 0, 0.7);
             border-radius: 10px;
             color: white;
             font-family: Arial, sans-serif;
             font-size: 1.2em;
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
         }

// Physics variables
let spheres = [];
let gravity = 0.1;
let bounceFactor = 0.8;

// Three.js setup
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);
renderer.setPixelRatio(window.devicePixelRatio);
document.getElementById('container').appendChild(renderer.domElement);

// Add lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// Create floor
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshPhongMaterial({
    color: 0x444444,
    side: THREE.DoubleSide
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

// Create initial spheres
function createSphere(position) {
    const geometry = new THREE.SphereGeometry(
        Math.random() * 0.5 + 0.3, // Random size between 0.3 and 0.8
        32,
        32
    );
    const material = new THREE.MeshPhongMaterial({
        color: new THREE.Color(Math.random(), Math.random(), Math.random()),
        shininess: 100
    });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.position.copy(position);
    sphere.velocity = new THREE.Vector3(0, 0, 0);
    scene.add(sphere);
    return sphere;
}

function addNewSphere() {
    spheres.push(createSphere(new THREE.Vector3(
        (Math.random() - 0.5) * 15,
        20,
        (Math.random() - 0.5) * 15
    )));
}

// Add initial spheres
for (let i = 0; i < 5; i++) {
    addNewSphere();
}

// Position camera
camera.position.set(0, 20, 30);
camera.lookAt(0, 0, 0);

// Controls
document.getElementById('gravity').addEventListener('input', function(e) {
    gravity = parseFloat(e.target.value);
    document.getElementById('gravityValue').textContent = e.target.value;
});

document.getElementById('bounce').addEventListener('input', function(e) {
    bounceFactor = parseFloat(e.target.value);
    document.getElementById('bounceValue').textContent = e.target.value;
});

// Window resize handler
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// Animation loop
function animate() {
    requestAnimationFrame(animate);

spheres.forEach(sphere => {
        // Apply gravity
        sphere.velocity.y -= gravity;

// Update position
        sphere.position.add(sphere.velocity);

// Floor collision
        if (sphere.position.y < 0.3) {
            sphere.position.y = 0.3;
            sphere.velocity.y = -sphere.velocity.y * bounceFactor;
            sphere.velocity.x *= 0.95; // Friction
            sphere.velocity.z *= 0.95; // Friction
        }
    });

renderer.render(scene, camera);
}

animate();

HTML

CSS

function initBuffers(gl) {
  const positionBuffer = initPositionBuffer(gl);

const textureCoordBuffer = initTextureBuffer(gl);

const indexBuffer = initIndexBuffer(gl);

const normalBuffer = initNormalBuffer(gl);

return {
    position: positionBuffer,
    normal: normalBuffer,
    textureCoord: textureCoordBuffer,
    indices: indexBuffer,
  };
}

function initPositionBuffer(gl) {
  // Create a buffer for the square's positions.
  const positionBuffer = gl.createBuffer();

// Select the positionBuffer as the one to apply buffer
  // operations to from here out.
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
    // Front face
    -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,

// Back face
    -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0,

// Top face
    -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0,

// Bottom face
    -1.0, -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, -1.0, -1.0, 1.0,

// Right face
    1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0,

// Left face
    -1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0,
  ];

// Now pass the list of positions into WebGL to build the
  // shape. We do this by creating a Float32Array from the
  // JavaScript array, then use it to fill the current buffer.
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

return positionBuffer;
}

function initColorBuffer(gl) {
  const faceColors = [
    [1.0, 1.0, 1.0, 1.0], // Front face: white
    [1.0, 0.0, 0.0, 1.0], // Back face: red
    [0.0, 1.0, 0.0, 1.0], // Top face: green
    [0.0, 0.0, 1.0, 1.0], // Bottom face: blue
    [1.0, 1.0, 0.0, 1.0], // Right face: yellow
    [1.0, 0.0, 1.0, 1.0], // Left face: purple
  ];

// Convert the array of colors into a table for all the vertices.

var colors = [];

for (var j = 0; j < faceColors.length; ++j) {
    const c = faceColors[j];
    // Repeat each color four times for the four vertices of the face
    colors = colors.concat(c, c, c, c);
  }

const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

return colorBuffer;
}

function initIndexBuffer(gl) {
  const indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// This array defines each face as two triangles, using the
  // indices into the vertex array to specify each triangle's
  // position.

const indices = [
    0,
    1,
    2,
    0,
    2,
    3, // front
    4,
    5,
    6,
    4,
    6,
    7, // back
    8,
    9,
    10,
    8,
    10,
    11, // top
    12,
    13,
    14,
    12,
    14,
    15, // bottom
    16,
    17,
    18,
    16,
    18,
    19, // right
    20,
    21,
    22,
    20,
    22,
    23, // left
  ];

// Now send the element array to GL

gl.bufferData(
    gl.ELEMENT_ARRAY_BUFFER,
    new Uint16Array(indices),
    gl.STATIC_DRAW
  );

return indexBuffer;
}

function initTextureBuffer(gl) {
  const textureCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);

const textureCoordinates = [
    // Front
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Back
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Top
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Bottom
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Right
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
    // Left
    0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0,
  ];

gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(textureCoordinates),
    gl.STATIC_DRAW
  );

return textureCoordBuffer;
}

function initNormalBuffer(gl) {
  const normalBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);

const vertexNormals = [
    // Front
    0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0,

// Back
    0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0,

// Top
    0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0,

// Bottom
    0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0,

// Right
    1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0,

// Left
    -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
  ];

gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array(vertexNormals),
    gl.STATIC_DRAW
  );

return normalBuffer;
}

function drawScene(gl, programInfo, buffers, texture, cubeRotation) {
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
  gl.clearDepth(1.0); // Clear everything
  gl.enable(gl.DEPTH_TEST); // Enable depth testing
  gl.depthFunc(gl.LEQUAL); // Near things obscure far things

// Clear the canvas before we start drawing on it.

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// Create a perspective matrix, a special matrix that is
  // used to simulate the distortion of perspective in a camera.
  // Our field of view is 45 degrees, with a width/height
  // ratio that matches the display size of the canvas
  // and we only want to see objects between 0.1 units
  // and 100 units away from the camera.

const fieldOfView = (45 * Math.PI) / 180; // in radians
  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  const zNear = 0.1;
  const zFar = 100.0;
  const projectionMatrix = mat4.create();

// note: glmatrix.js always has the first argument
  // as the destination to receive the result.
  mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);

// Set the drawing position to the "identity" point, which is
  // the center of the scene.
  const modelViewMatrix = mat4.create();

// Now move the drawing position a bit to where we want to
  // start drawing the square.
  mat4.translate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to translate
    [-0.0, 0.0, -6.0]
  ); // amount to translate

mat4.rotate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to rotate
    cubeRotation, // amount to rotate in radians
    [0, 0, 1]
  ); // axis to rotate around (Z)
  mat4.rotate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to rotate
    cubeRotation * 0.7, // amount to rotate in radians
    [0, 1, 0]
  ); // axis to rotate around (Y)
  mat4.rotate(
    modelViewMatrix, // destination matrix
    modelViewMatrix, // matrix to rotate
    cubeRotation * 0.3, // amount to rotate in radians
    [1, 0, 0]
  ); // axis to rotate around (X)

const normalMatrix = mat4.create();
  mat4.invert(normalMatrix, modelViewMatrix);
  mat4.transpose(normalMatrix, normalMatrix);

// Tell WebGL how to pull out the positions from the position
  // buffer into the vertexPosition attribute.
  setPositionAttribute(gl, buffers, programInfo);

setTextureAttribute(gl, buffers, programInfo);

// Tell WebGL which indices to use to index the vertices
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);

setNormalAttribute(gl, buffers, programInfo);

// Tell WebGL to use our program when drawing
  gl.useProgram(programInfo.program);

// Set the shader uniforms
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.projectionMatrix,
    false,
    projectionMatrix
  );
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.modelViewMatrix,
    false,
    modelViewMatrix
  );
  gl.uniformMatrix4fv(
    programInfo.uniformLocations.normalMatrix,
    false,
    normalMatrix
  );

// Tell WebGL we want to affect texture unit 0
  gl.activeTexture(gl.TEXTURE0);

// Bind the texture to texture unit 0
  gl.bindTexture(gl.TEXTURE_2D, texture);

// Tell the shader we bound the texture to texture unit 0
  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);

{
    const vertexCount = 36;
    const type = gl.UNSIGNED_SHORT;
    const offset = 0;
    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
  }
}

// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute.
function setPositionAttribute(gl, buffers, programInfo) {
  const numComponents = 3;
  const type = gl.FLOAT; // the data in the buffer is 32bit floats
  const normalize = false; // don't normalize
  const stride = 0; // how many bytes to get from one set of values to the next
  // 0 = use type and numComponents above
  const offset = 0; // how many bytes inside the buffer to start from
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
  gl.vertexAttribPointer(
    programInfo.attribLocations.vertexPosition,
    numComponents,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
}

// Tell WebGL how to pull out the colors from the color buffer
// into the vertexColor attribute.
function setColorAttribute(gl, buffers, programInfo) {
  const numComponents = 4;
  const type = gl.FLOAT;
  const normalize = false;
  const stride = 0;
  const offset = 0;
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
  gl.vertexAttribPointer(
    programInfo.attribLocations.vertexColor,
    numComponents,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
}

// tell webgl how to pull out the texture coordinates from buffer
function setTextureAttribute(gl, buffers, programInfo) {
  const num = 2; // every coordinate composed of 2 values
  const type = gl.FLOAT; // the data in the buffer is 32-bit float
  const normalize = false; // don't normalize
  const stride = 0; // how many bytes to get from one set to the next
  const offset = 0; // how many bytes inside the buffer to start from
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
  gl.vertexAttribPointer(
    programInfo.attribLocations.textureCoord,
    num,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord);
}

// Tell WebGL how to pull out the normals from
// the normal buffer into the vertexNormal attribute.
function setNormalAttribute(gl, buffers, programInfo) {
  const numComponents = 3;
  const type = gl.FLOAT;
  const normalize = false;
  const stride = 0;
  const offset = 0;
  gl.bindBuffer(gl.ARRAY_BUFFER, buffers.normal);
  gl.vertexAttribPointer(
    programInfo.attribLocations.vertexNormal,
    numComponents,
    type,
    normalize,
    stride,
    offset
  );
  gl.enableVertexAttribArray(programInfo.attribLocations.vertexNormal);
}

let cubeRotation = 0.0;
let deltaTime = 0;
// will set to true when video can be copied to texture
let copyVideo = false;

main();

//
// start here
//
function main() {
  const canvas = document.querySelector("#glcanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

// Only continue if WebGL is available and working
  if (gl === null) {
    alert(
      "Unable to initialize WebGL. Your browser or machine may not support it."
    );
    return;
  }

// Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);

// Vertex shader program

const vsSource = `
  attribute vec4 aVertexPosition;
  attribute vec3 aVertexNormal;
  attribute vec2 aTextureCoord;

uniform mat4 uNormalMatrix;
  uniform mat4 uModelViewMatrix;
  uniform mat4 uProjectionMatrix;

varying highp vec2 vTextureCoord;
  varying highp vec3 vLighting;

void main(void) {
    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
    vTextureCoord = aTextureCoord;

// Apply lighting effect

highp vec3 ambientLight = vec3(0.3, 0.3, 0.3);
    highp vec3 directionalLightColor = vec3(1, 1, 1);
    highp vec3 directionalVector = normalize(vec3(0.85, 0.8, 0.75));

highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);

highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
    vLighting = ambientLight + (directionalLightColor * directional);
  }
`;

// Fragment shader program

const fsSource = `
  varying highp vec2 vTextureCoord;
  varying highp vec3 vLighting;

uniform sampler2D uSampler;

void main(void) {
    highp vec4 texelColor = texture2D(uSampler, vTextureCoord);

gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
  }
`;

// Initialize a shader program; this is where all the lighting
  // for the vertices and so forth is established.
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

// Collect all the info needed to use the shader program.
  // Look up which attributes our shader program is using
  // for aVertexPosition, aVertexColor and also
  // look up uniform locations.
  const programInfo = {
    program: shaderProgram,
    attribLocations: {
      vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
      vertexNormal: gl.getAttribLocation(shaderProgram, "aVertexNormal"),
      textureCoord: gl.getAttribLocation(shaderProgram, "aTextureCoord"),
    },
    uniformLocations: {
      projectionMatrix: gl.getUniformLocation(
        shaderProgram,
        "uProjectionMatrix"
      ),
      modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
      normalMatrix: gl.getUniformLocation(shaderProgram, "uNormalMatrix"),
      uSampler: gl.getUniformLocation(shaderProgram, "uSampler"),
    },
  };

// Here's where we call the routine that builds all the
  // objects we'll be drawing.
  const buffers = initBuffers(gl);

const texture = initTexture(gl);
  const video = setupVideo("https://www.sitefactory.dk/images/videos/Firefox.mp4");

// Flip image pixels into the bottom-to-top order that WebGL expects.
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

let then = 0;

// Draw the scene repeatedly
  function render(now) {
    now *= 0.001; // convert to seconds
    deltaTime = now - then;
    then = now;

if (copyVideo) {
      updateTexture(gl, texture, video);
    }

drawScene(gl, programInfo, buffers, texture, cubeRotation);
    cubeRotation += deltaTime;

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

//
// Initialize a shader program, so WebGL knows how to draw our data
//
function initShaderProgram(gl, vsSource, fsSource) {
  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

// Create the shader program

const shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);

// If creating the shader program failed, alert

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert(
      `Unable to initialize the shader program: ${gl.getProgramInfoLog(
        shaderProgram
      )}`
    );
    return null;
  }

return shaderProgram;
}

//
// creates a shader of the given type, uploads the source and
// compiles it.
//
function loadShader(gl, type, source) {
  const shader = gl.createShader(type);

// Send the source to the shader object

gl.shaderSource(shader, source);

// Compile the shader program

gl.compileShader(shader);

// See if it compiled successfully

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    alert(
      `An error occurred compiling the shaders: ${gl.getShaderInfoLog(shader)}`
    );
    gl.deleteShader(shader);
    return null;
  }

return shader;
}

function initTexture(gl) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

// Because video has to be download over the internet
  // they might take a moment until it's ready so
  // put a single pixel in the texture so we can
  // use it immediately.
  const level = 0;
  const internalFormat = gl.RGBA;
  const width = 1;
  const height = 1;
  const border = 0;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    width,
    height,
    border,
    srcFormat,
    srcType,
    pixel
  );

// Turn off mips and set wrapping to clamp to edge so it
  // will work regardless of the dimensions of the video.
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

return texture;
}

function updateTexture(gl, texture, video) {
  const level = 0;
  const internalFormat = gl.RGBA;
  const srcFormat = gl.RGBA;
  const srcType = gl.UNSIGNED_BYTE;
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D,
    level,
    internalFormat,
    srcFormat,
    srcType,
    video
  );
}

function setupVideo(url) {
  const video = document.createElement("video");

let playing = false;
  let timeupdate = false;

video.playsInline = true;
  video.muted = true;
  video.loop = true;

// Waiting for these 2 events ensures
  // there is data in the video

video.addEventListener(
    "playing",
    () => {
      playing = true;
      checkReady();
    },
    true
  );

video.addEventListener(
    "timeupdate",
    () => {
      timeupdate = true;
      checkReady();
    },
    true
  );

video.src = url;
  video.play();

function checkReady() {
    if (playing && timeupdate) {
      copyVideo = true;
    }
  }

return video;
}

WebGL Demo

</div>
</body>
</html>

<!-- Our HTML consists of a loading animation (currently commented out until we need it), a wrapper div and our all-important canvas element. The canvas is what Three.js uses to render our scene, and the CSS sets this at 100% viewport size. We also load in two dependencies at the bottom of our HTML file: Three.js, and GLTFLoader (GLTF is the format that our 3D model is imported as). Both of these dependencies are available as npm modules.

The CSS also consists of a small amount of centering styling and the rest is just the loading animation; really nothing more to it than that. You can now collapse your HTML and CSS panels, we will delve into that very little for the rest of the tutorial. -->

// So, our project starts like this. In your JavaScript add these variables. Note that because there is a bit at work here that would otherwise be in global scope, we’re wrapping our entire project in a function:

(function() {
// Set our main variables
let scene,  
  renderer,
  camera,
  model,                              // Our character
  neck,                               // Reference to the neck bone in the skeleton
  waist,                               // Reference to the waist bone in the skeleton
  possibleAnims,                      // Animations found in our file
  mixer,                              // THREE.js animations mixer
  idle,                               // Idle, the default state our character returns to
  clock = new THREE.Clock(),          // Used for anims, which run to a clock instead of frame rate 
  currentlyAnimating = false,         // Used to check whether characters neck is being used in another anim
  raycaster = new THREE.Raycaster(),  // Used to detect the click on our character
  loaderAnim = document.getElementById('js-loader');
  
  // We’re going to set up Three.js. This consists of a scene, a renderer, a camera, lights, and an update function. The update function runs on every frame.

// Let’s do all this inside an init() function. Under our variables, and inside our function scope, we add our init function:
init();

function init() {
  
  // Right at the top of our init() function, before we reference our canvas, let’s reference the model file. This is in the GLTf format (.glb), Three.js support a range of 3D model formats, but this is the format it recommends. We’re going to use our GLTFLoader dependency to load this model into our scene.
  const MODEL_PATH = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/stacy_lightweight.glb';
  
  // Inside our init function, let’s reference our canvas element and set our background color, I’ve gone for a very light grey for this tutorial. Note that Three.js doesn’t reference colors in a string like so “#f1f1f1”, but rather a hexadecimal integer like 0xf1f1f1.
  const canvas = document.querySelector('#c');
  const backgroundColor = 0xf1f1f1;
  
  // Below that, let’s create a new Scene. Here we set the background color, and we’re also going to add some fog. This isn’t that visible in this tutorial, but if your floor and background color are different, it can come in handy to blur those together.
  
  // Init the scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(backgroundColor, 60, 100);
  
  // Next up is the renderer, we create a new renderer and pass an object with the canvas reference and other options. The only option we’re using here is that we’re enabling antialiasing. We enable shadowMap so that our character can cast a shadow, and we set the pixel ratio to be that of the device, this is so that mobile devices render correctly. The canvas will display pixelated on high density screens otherwise. Finally, we add our renderer to our document body.
  
  // Init the renderer
  renderer = new THREE.WebGLRenderer({canvas, antialias: true})
  renderer.shadowMap.enabled = true;
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);
  
  // That covers the first two things that Three.js needs. Next up is a camera. Let’s create a new perspective camera. We’re setting the field of view to 50, the size to that of the window, and the near and far clipping planes are the default. After that, we’re positioning the camera to be 30 units back, and 3 units down. This will become more obvious later. All of this can be experimented with, but I recommend using these settings for now.
  
  // Add a camera
  camera = new THREE.PerspectiveCamera(
    50,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 30;
  camera.position.x = 0;
  camera.position.y = -3;
  
  // We referenced the loader earlier; let’s create a new texture and material above this reference:
  let stacy_txt = new THREE.TextureLoader().load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/stacy.jpg');
  
  stacy_txt.flipY = false; // we flip the texture so that its the right way up
  
  const stacy_mtl = new THREE.MeshPhongMaterial({
    map: stacy_txt,
    color: 0xffffff,
    skinning: true
  });
  
//   Lets look at this for a second. Our texture can’t just be a URL to an image, it needs to be loaded in as a new texture using TextureLoader. We set this to a variable called stacy_txt.

// We’ve used materials before. This was placed on our floor with the color 0xeeeeee, we’re using a couple of new options here for our models material. Firstly, we’re passing the stacy_txt texture to the map property. Secondly we are turning skinning on, this is critical for animated models. We reference this material with stacy_mtl.
  
  // Okay, so we’ve got our textured material, our files scene (gltf.scene) only has one object, so, in our traverse method, let’s add one more line under the lines that enabled our object to cast and receive shadows:
  
  var loader = new THREE.GLTFLoader();
  
  // This loader uses a method called load. It takes four arguments: the model path, a function to call once the model is loaded, a function to call during the loading, and a function to catch errors.
  
  // Let's add this now:
  
  loader.load(
  MODEL_PATH,
    function(gltf) {
      // A lot is going to happen here
      model = gltf.scene;
      let fileAnimations = gltf.animations;
      
      // First of all, we’re going to use the model’s traverse method to find all the meshs, and enabled the ability to cast and receive shadows. This is done like this. Again, this should go above scene.add(model): 
      model.traverse(o => {
        if(o.isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
          o.material = stacy_mtl;
        }
        // Reference the neck and waist bones
        if (o.isBone && o.name === 'mixamorigNeck') {
          neck = o;
        }
        if (o.isBone && o.name === 'mixamorigSpine') {
          waist = o;
        }
      });
      
      // Now for a little bit more investigative work. We created an AnimationClip called idleAnim which we then sent to our mixer to play. We want to snip the neck and skeleton tracks out of this animation, or else our idle animation is going to overwrite any manipulation we try and create manually on our model.
      
      // So the first thing I did was console log idleAnim. It’s an object, with a property called tracks. The value of tracks is an array of 156 values, every 3 values represent the animation of a single bone. The three being the position, quaternion (rotation) and the scale of a bone. So the first three values are the hips position, rotation and scale.
      
      // What I was looking for though was this (pasted from my console):
      
// 3: ad {name: "mixamorigSpine.position", ...
// 4: ke {name: "mixamorigSpine.quaternion", ...
// 5: ad {name: "mixamorigSpine.scale", ...
      
      // …and this:
      
// 12: ad {name: "mixamorigNeck.position", ...
// 13: ke {name: "mixamorigNeck.quaternion", ...
// 14: ad {name: "mixamorigNeck.scale", ...
      
// So inside our animation, I want to splice the tracks array to remove 3,4,5 and 12,13,14.

// However, once I splice 3,4,5 …. My neck becomes 9,10,11. Something to keep in mind.
      
      // Then, we’re going to set the model’s scale to a uniformed 7x its initial size. Add this below our traverse method:
      // Set the model's initial scale
      model.scale.set(7, 7, 7);
      
      // And finally, let’s move the model down by 11 units so that it’s standing on the floor.
      model.position.y = -11;
      
      scene.add(model);
      
      // Perfect, we’ve loaded in our model. Let’s now load in the texture and apply it. This model came with the texture and the model has been mapped to this texture in Blender. This process is called UV mapping. Feel free to download the image itself to look at it, and learn more about UV mapping if you’d like to explore the idea of making your own character.
      
      loaderAnim.remove();
      
      // All we’re doing here is removing the loading animation overlay once Stacy has been added to the scene. Save and then refresh, you should see the loader until the page is ready to show Stacy. If the model is cached, the page might load too quickly to see it.
      
      // We’re going to create a new AnimationMixer, an AnimationMixer is a player for animations on a particular object in the scene.
      mixer = new THREE.AnimationMixer(model);
      
      // we’re going to get a list of AnimationClips that aren’t idle (we don’t want to randomly select idle as one of the options when we click on Stacy). We do that like so:
      let clips = fileAnimations.filter(val => val.name !== 'idle');
      
      // Now below that, we’re going to convert all of those clips into Three.js AnimationClips, the same way we did for idle. We’re also going to splice the neck and spine bone out of the skeleton and add all of these AnimationClips into a variable called possibleAnims, which is already referenced at the top of our project.
      possibleAnims = clips.map(val => {
        let clip = THREE.AnimationClip.findByName(clips,val.name);
        clip.tracks.splice(3, 3);
        clip.tracks.splice(9, 3);
        clip = mixer.clipAction(clip);
        return clip;
      });
      
      // We now have an array of clipActions we can play when we click Stacy. The trick here though is that we can’t add a simple click event listener on Stacy, as she isn’t part of our DOM. We are instead going to use raycasting, which essentially means shooting a laser beam in a direction and returning the objects that it hit. In this case we’re shooting from our camera in the direction of our cursor.
      
      // We’re going to create a new AnimationClip, we’re looking inside our fileAnimations to find an animation called ‘idle’. This name was set inside Blender.
      let idleAnim = THREE.AnimationClip.findByName(fileAnimations, 'idle');
      
      idleAnim.tracks.splice(3, 3);
      idleAnim.tracks.splice(9, 3);
      
      // We then use a method in our mixer called clipAction, and pass in our idleAnim. We call this clipAction idle.
      
      // Finally, we tell idle to play:
      idle = mixer.clipAction(idleAnim);
      idle.play();
      
      // It’s not going play yet though, we do need one more thing. The mixer needs to be updated in order for it to run continuously through an animation. In order to do this, we need to tell it to update inside our update() function.
      
    },
    undefined, // We don't need this function
    function(error) {
      console.error(error);
    }
  );
  
//   Note that scene, renderer and camera are initially referenced at the top of our project.

// Without lights our camera has nothing to display. We’re going to create two lights, a hemisphere light, and a directional light. We then add them to the scene using scene.add(light).

// Let’s add our lights under the camera. I’ll explain a bit more about what we’re doing afterwards:
  
  // Add Lights
  let hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
  hemiLight.position.set(0, 50, 0);
  // Add hemisphere light to scene
  scene.add(hemiLight);
  
  let d = 8.25;
  let dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
  dirLight.position.set(-8, 12, 8);
  dirLight.castShadow = true;
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  dirLight.shadow.camera.near = 0.1;
  dirLight.shadow.camera.far = 1500;
  dirLight.shadow.camera.left = d * -1;
  dirLight.shadow.camera.right = d;
  dirLight.shadow.camera.top = d;
  dirLight.shadow.camera.bottom = d * -1;
  
  // Add directional Light to scene
  scene.add(dirLight);
  
//   The hemisphere light is just casting white light, and its intensity is at 0.61. We also set its position 50 units above our center point; feel free to experiment with this later.
  
//   Our directional light needs a position set; the one I’ve chosen feels right, so let’s start with that. We enable the ability to cast a shadow, and set the shadow resolution. The rest of the shadows relate to the lights view of the world, this gets a bit vague to me, but its enough to know that the variable d can be adjusted until your shadows aren’t clipping in strange places.
  
//   While we’re here in our init function, lets add our floor:
  // Floor
  let floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
  let floorMaterial = new THREE.MeshPhongMaterial({
    color: 0xeeeeee,
    shininess: 0
  });
  
  let floor = new THREE.Mesh(floorGeometry, floorMaterial);
  floor.rotation.x = -0.5 * Math.PI; // This is 90 degrees by the way
  floor.receiveShadow = true;
  floor.position.y = -11;
  scene.add(floor);
  
  // What we’re doing here is creating a new plane geometry, which is big: it’s 5000 units (for no particular reason at all other than it really ensures our seamless background).
  
  // We then create a material for our scene. This is new. We only have a couple different materials in this tutorial, but it’s enough to know for now that you combine geometry and materials into a mesh, and this mesh is a 3D object in our scene. The mesh we’re making now is a really big, flat plane rotated to be flat on the ground (well, it is the ground). Its color is set to 0xeeeeee which is slightly darker than our background. Why? Because our lights shine on this floor, but our lights don’t affect the background. This is a color I manually tweaked in to give us the seamless scene. Play around with it once we’re done.
  
  // Our floor is a Mesh which combines the Geometry and Material. Read through what we just added, I think you’ll find that everything is self explanatory. We’re moving our floor down 11 units, this will make sense once we load in our character.
  
  // Below your floor, as the final lines of your init() function, let’s add a circle accent. This is really a 3D sphere, quite big but far away, that uses a BasicMaterial. The materials we’ve used previously are called PhongMaterials which can be shiny, and also most importantly can receive and cast shadows. A BasicMaterial however, can not. So, add this sphere to your scene to create a flat circle that frames Stacy better.
  let geometry = new THREE.SphereGeometry(8, 32, 32);
  let material = new THREE.MeshBasicMaterial({ color: 0x9bffaf}); // 0xf2ce2e
  let sphere = new THREE.Mesh(geometry,material);
  sphere.position.z = -15;
  sphere.position.y = -2.5;
  sphere.position.x = -0.25;
  scene.add(sphere);
}
  
  // One crucial aspect that Three.js relies on is an update function, which runs every frame, and is similar to how game engines work if you’ve ever dabbled with Unity. This function needs to be placed after our init() function instead of inside it. Inside our update function the renderer renders the scene and camera, and the update is run again. Note that we immediately call the function after the function itself.
  
  function update() {
    if (mixer) {
      mixer.update(clock.getDelta());
    }
    
    // The update takes our clock (a Clock was referenced at the top of our project) and updates it to that clock. This is so that animations don’t slow down if the frame rate slows down. If you run an animation to a frame rate, it’s tied to the frames to determine how fast or slow it runs, that’s not what you want.
    
    // If you don’t know much about 3D (or even 2D animation in most cases), the way it works is that there is a skeleton (or an array of bones) that warp the mesh. These bones position, scale and rotation are animated across time to warp and move our mesh in interesting ways. We’re going to hook into Stacys skeleton (ek) and reference her neck bone and her bottom spine bone. We’re then going to rotate these bones depending on where the cursor is relative to the middle of the screen. In order for us to do this though, we need to tell our current idle animation to ignore these two bones. Let’s get started.
    
// So now we know our spine (from here on out referenced as the waist), and our neck names.

// In our model traverse, let’s add these bones to our neck and waist variables which have already been referenced at the top of our project.
    
    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    renderer.render(scene, camera);
    requestAnimationFrame(update);
  }
  update();
  
  // Our scene should now turn on. The canvas is rendering a light grey; what we’re actually seeing here is both the background and the floor. You can test this out by changing the floors material color to 0xff0000. Remember to change it back though!
  
  // We’re going to load the model in the next part. Before we do though, there is one more thing our scene needs. The canvas as an HTML element will resize just fine the way it is, the height and width is set to 100% in CSS. But, the scene needs to be aware of resizes too so that it can keep everything in proportion. Below where we call our update function (not inside it), add this function. Read it carefully if you’d like, but essentially what it’s doing is constantly checking whether our renderer is the same size as our canvas, as soon as it’s not, it returns needResize as a boolean.
  
  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    let width = window.innerWidth;
    let height = window.innerHeight;
    let canvasPixelWidth = canvas.width / window.devicePixelRatio;
    let canvasPixelHeight = canvas.height / window.devicePixelRatio;
    
    const needResize = 
          canvasPixelWidth !== width || canvasPixelHeight !== height;
    if (needResize) {
      renderer.setSize(width, height, false)
    }
    return needResize;
  }
     
  // let’s add an event listener, along with a function that returns our mouse position whenever it’s moved.
  
  // We will add raycasting here
  window.addEventListener('click', e => raycast(e));
window.addEventListener('touchend', e => raycast(e, true));

// calculate objects intersecting the picking ray
  var intersects = raycaster.intersectObjects(scene.children, true);

if (intersects[0]) {
    var object = intersects[0].object;

if (object.name === 'stacy') {

if (!currentlyAnimating) {
        currentlyAnimating = true;
        playOnClick();
      }
    }
  }
}
  
// We’re adding two event listeners, one for desktop and one for touch screens. We pass the event to the raycast() function but for touch screens, we’re setting the touch argument as true.

// Inside the raycast() function, we have a variable called mouse. Here we set mouse.x and mouse.y to be changedTouches[0] position if touch is true, or just return the mouse position on desktop.

// Next we call setFromCamera on raycaster, which has already been set up as a new Raycaster at the top of our project, ready to use. This line essentially raycasts from the camera to the mouse position. Remember we’re doing this every time we click, so we’re shooting lasers with a mouse at Stacy (brand new sentence?).

// We then get an array of intersected objects; if there are any, we set the first object that was hit to be our object.

// We check that the objects name is ‘stacy’, and we run a function called playOnClick() if the object is called ‘stacy’. Note that we are also checking that a variable currentlyAnimating is false before we proceed. We toggle this variable on and off so that we can’t run a new animation when one is currently running (other than idle). We will turn this back to false at the end of our animation. This variable is referenced at the top of our project.
  
  // Okay, so playOnClick. Below our rayasting function, add our playOnClick function.
  
  // Get a random animation, and play it
  function playOnClick() {
    let anim = Math.floor(Math.random() * possibleAnims.length) + 0;
    playModifierAnimation(idle, 0.25, possibleAnims[anim], 0.25);
  }
  
  // This simply chooses a random number between 0 and the length of our possibleAnims array, then we call another function called playModifierAnimation. This function takes in idle (we’re moving from idle), the speed to blend from idle to a new animation (possibleAnims[anim]), and the last argument is the speed to blend from our animation back to idle. Under our playOnClick function, lets add our playModifierAnimation and I’ll explain what its doing.
  
  function playModifierAnimation(from, fSpeed, to, tSpeed) {
    to.setLoop(THREE.LoopOnce);
    to.reset();
    to.play();
    from.crossFadeTo(to, fSpeed, true);
    setTimeout(function() {
      from.enabled = true;
      to.crossFadeTo(from, tSpeed, true);
      currentlyAnimating = false;
    }, to._clip.duration * 1000 -((tSpeed + fSpeed) * 1000));
  }
  
//   The first thing we do is reset the to animation, this is the animation that’s about to play. We also set it to only play once, this is done because once the animation has completed its course (perhaps we played it earlier), it needs to be reset to play again. We then play it.

// Each clipAction has a method called crossFadeTo, we use it to fade from (idle) to our new animation using our first speed (fSpeed, or from speed).

// At this point our function has faded from idle to our new animation.

// We then set a timeout function, we turn our from animation (idle) back to true, we cross fade back to idle, then we toggle currentlyAnimating back to false (allowing another click on Stacy). The time of the setTimeout is calculated by combining our animations length (* 1000 as this is in seconds instead of milliseconds), and removing the speed it took to fade to and from that animation (also set in seconds, so * 1000 again). This leaves us with a function that fades from idle, plays an animation and once it’s completed, fades back to idle, allowing another click on Stacy.

// Notice that our neck and spine bones aren’t affected, giving us the ability to still control the way those rotate during the animation!
  
  
  
  document.addEventListener('mousemove', function(e) {
    var mousecoords = getMousePos(e);
    if(neck && waist) {
      moveJoint(mousecoords, neck, 50);
      moveJoint(mousecoords, waist, 30);
    }
  });
  
  // Just like that, move your mouse around the viewport and Stacy should watch your cursor wherever you go! Notice how idle animation is still running, but because we snipped the neck and spine bone (yuck), we’re able to controls those independently.
  
  function getMousePos(e) {
    return { x: e.clientX, y: e.clientY};
  }
  
  // Below this, we’re going to create a new function called moveJoint. I’ll walk us through everything that these functions do.
  
  function moveJoint(mouse, joint, degreeLimit) {
    let degrees = getMouseDegrees(mouse.x, mouse.y, degreeLimit);
    joint.rotation.y = THREE.Math.degToRad(degrees.x);
    joint.rotation.x = THREE.Math.degToRad(degrees.y); 
  }
  
  // The moveJoint function takes three arguments, the current mouse position, the joint we want to move, and the limit (in degrees) that the joint is allowed to rotate. This is called degreeLimit, remember this as I’ll talk about it soon.
  
  // We have a variable called degrees referenced at the top, the degrees come from a function called getMouseDegrees, which returns an object of {x, y}. We then use these degrees to rotate the joint on the x axis and the y axis.
  
//   Before we add getMouseDegrees, I want to explain what it does.

// getMouseDegrees does this: It checks the top half of the screen, the bottom half of the screen, the left half of the screen, and the right half of the screen. It determines where the mouse is on the screen in a percentage between the middle and each edge of the screen.

// For instance, if the mouse is half way between the middle of the screen and the right edge. The function determines that right = 50%, if the mouse is a quarter of the way UP from the center, the function determines that up = 25%.

// Once the function has these percentages, it returns the percentage of the degreelimit.

// So the function can determine your mouse is 75% right and 50% up, and return 75% of the degree limit on the x axis and 50% of the degree limit on the y axis. Same for left and right.
  
  function getMouseDegrees(x, y, degreeLimit) {
  let dx = 0,
      dy = 0,
      xdiff,
      xPercentage,
      ydiff,
      yPercentage;

let w = { x: window.innerWidth, y: window.innerHeight };

// Left (Rotates neck left between 0 and -degreeLimit)
  
   // 1. If cursor is in the left half of screen
  if (x <= w.x / 2) {
    // 2. Get the difference between middle of screen and cursor position
    xdiff = w.x / 2 - x;  
    // 3. Find the percentage of that difference (percentage toward edge of screen)
    xPercentage = (xdiff / (w.x / 2)) * 100;
    // 4. Convert that to a percentage of the maximum rotation we allow for the neck
    dx = ((degreeLimit * xPercentage) / 100) * -1; }
// Right (Rotates neck right between 0 and degreeLimit)
  if (x >= w.x / 2) {
    xdiff = x - w.x / 2;
    xPercentage = (xdiff / (w.x / 2)) * 100;
    dx = (degreeLimit * xPercentage) / 100;
  }
  // Up (Rotates neck up between 0 and -degreeLimit)
  if (y <= w.y / 2) {
    ydiff = w.y / 2 - y;
    yPercentage = (ydiff / (w.y / 2)) * 100;
    // Note that I cut degreeLimit in half when she looks up
    dy = (((degreeLimit * 0.5) * yPercentage) / 100) * -1;
    }
  
  // Down (Rotates neck down between 0 and degreeLimit)
  if (y >= w.y / 2) {
    ydiff = y - w.y / 2;
    yPercentage = (ydiff / (w.y / 2)) * 100;
    dy = (degreeLimit * yPercentage) / 100;
  }
  return { x: dx, y: dy };
}
  
  // Once we have that function, we can now use moveJoint. We’re going to use it for the neck with a 50 degree limit, and for the waist with a 30 degree limit.
  
  // Update our mousemove event listener to include these moveJoints:
  
  
  
//   Our scene is super sparse, but it’s set up and we’ve got our resizing sorted, our lights and camera are working. Let’s add the model.

})(); // Don't add anything below this line

Creating an Interactive 3D Character With Three.js

kaplay({
    background: [141, 183, 255],
    narrowPhaseCollisionAlgorithm: "sat",
});

// load assets
loadSprite("bean", "/test/ai-game/assets/bean.png");
loadSprite("bag", "/test/ai-game/assets/bag.png");
loadSprite("ghosty", "/test/ai-game/assets/ghosty.png");
loadSprite("spike", "/test/ai-game/assets/spike.png");
loadSprite("grass", "/test/ai-game/assets/grass.png");
loadSprite("steel", "/test/ai-game/assets/steel.png");
loadSprite("prize", "/test/ai-game/assets/jumpy.png");
loadSprite("apple", "/test/ai-game/assets/apple.png");
loadSprite("portal", "/test/ai-game/assets/portal.png");
loadSprite("coin", "/test/ai-game/assets/coin.png");
loadSound("coin", "/test/ai-game/assets/score.mp3");
loadSound("powerup", "/test/ai-game/assets/powerup.mp3");
loadSound("blip", "/test/ai-game/assets/blip.mp3");
loadSound("hit", "/test/ai-game/assets/hit.mp3");
loadSound("portal", "/test/ai-game/assets/portal.mp3");

setGravity(3200);

// custom component controlling enemy patrol movement
function customPatrol(speed = 60, dir = 1) {
    return {
        id: "patrol",
        require: ["pos", "area"],
        add() {
            this.on("collide", (obj, col) => {
                if (col.isLeft()) {
                    dir = 1;
                }
                else if (col.isRight()) {
                    dir = -1;
                }
            });
        },
        update() {
            this.move(speed * dir, 0);
        },
    };
}

// custom component that makes stuff grow big
function big() {
    let timer = 0;
    let isBig = false;
    let destScale = 1;
    return {
        // component id / name
        id: "big",
        // it requires the scale component
        require: ["scale"],
        // this runs every frame
        update() {
            if (isBig) {
                timer -= dt();
                if (timer <= 0) {
                    this.smallify();
                }
            }
            this.scale = this.scale.lerp(vec2(destScale), dt() * 6);
        },
        // custom methods
        isBig() {
            return isBig;
        },
        smallify() {
            destScale = 1;
            timer = 0;
            isBig = false;
        },
        biggify(time) {
            destScale = 2;
            timer = time;
            isBig = true;
        },
    };
}

// define some constants
const JUMP_FORCE = 1320;
const MOVE_SPEED = 480;
const FALL_DEATH = 2400;

const LEVELS = [
    [
        "    0       ",
        "   --       ",
        "       $$   ",
        " %    ===   ",
        "            ",
        "   ^^  > = @",
        "============",
    ],
    [
        "                          $",
        "                          $",
        "                          $",
        "                          $",
        "                          $",
        "           $$         =   $",
        "  %      ====         =   $",
        "                      =   $",
        "                      =    ",
        "       ^^      = >    =   @",
        "===========================",
    ],
    [
        "     $    $    $    $     $",
        "     $    $    $    $     $",
        "                           ",
        "                           ",
        "                           ",
        "                           ",
        "                           ",
        " ^^^^>^^^^>^^^^>^^^^>^^^^^@",
        "===========================",
    ],
];

// define what each symbol means in the level graph
const levelConf = {
    tileWidth: 64,
    tileHeight: 64,
    tiles: {
        "=": () => [
            sprite("grass"),
            area(),
            body({ isStatic: true }),
            anchor("bot"),
            offscreen({ hide: true }),
            "platform",
        ],
        "-": () => [
            sprite("steel"),
            area(),
            body({ isStatic: true }),
            offscreen({ hide: true }),
            anchor("bot"),
        ],
        "0": () => [
            sprite("bag"),
            area(),
            body({ isStatic: true }),
            offscreen({ hide: true }),
            anchor("bot"),
        ],
        "$": () => [
            sprite("coin"),
            area(),
            pos(0, -9),
            anchor("bot"),
            offscreen({ hide: true }),
            "coin",
        ],
        "%": () => [
            sprite("prize"),
            area(),
            body({ isStatic: true }),
            anchor("bot"),
            offscreen({ hide: true }),
            "prize",
        ],
        "^": () => [
            sprite("spike"),
            area(),
            body({ isStatic: true }),
            anchor("bot"),
            offscreen({ hide: true }),
            "danger",
        ],
        "#": () => [
            sprite("apple"),
            area(),
            anchor("bot"),
            body(),
            offscreen({ hide: true }),
            "apple",
        ],
        ">": () => [
            sprite("ghosty"),
            area(),
            anchor("bot"),
            body(),
            customPatrol(),
            offscreen({ hide: true }),
            "enemy",
        ],
        "@": () => [
            sprite("portal"),
            area({ scale: 0.5 }),
            anchor("bot"),
            pos(0, -12),
            offscreen({ hide: true }),
            "portal",
        ],
    },
};

scene("game", ({ levelId, coins } = { levelId: 0, coins: 0 }) => {
    // add level to scene
    const level = addLevel(LEVELS[levelId ?? 0], levelConf);

// define player object
    const player = add([
        sprite("bean"),
        pos(0, 0),
        area(),
        scale(1),
        // makes it fall to gravity and jumpable
        body(),
        // the custom component we defined above
        big(),
        anchor("bot"),
    ]);

// action() runs every frame
    player.onUpdate(() => {
        // center camera to player
        setCamPos(player.pos);
        // check fall death
        if (player.pos.y >= FALL_DEATH) {
            go("lose");
        }
    });

player.onBeforePhysicsResolve((collision) => {
        if (collision.target.is(["platform", "soft"]) && player.isJumping()) {
            collision.preventResolution();
        }
    });

player.onPhysicsResolve(() => {
        // Set the viewport center to player.pos
        setCamPos(player.pos);
    });

// if player onCollide with any obj with "danger" tag, lose
    player.onCollide("danger", () => {
        go("lose");
        play("hit");
    });

player.onCollide("portal", () => {
        play("portal");
        if (levelId + 1 < LEVELS.length) {
            go("game", {
                levelId: levelId + 1,
                coins: coins,
            });
        }
        else {
            go("win");
        }
    });

player.onGround((l) => {
        if (l.is("enemy")) {
            player.jump(JUMP_FORCE * 1.5);
            destroy(l);
            addKaboom(player.pos);
            play("powerup");
        }
    });

player.onCollide("enemy", (e, col) => {
        // if it's not from the top, die
        if (!col?.isBottom()) {
            go("lose");
            play("hit");
        }
    });

let hasApple = false;

// grow an apple if player's head bumps into an obj with "prize" tag
    player.onHeadbutt((obj) => {
        if (obj.is("prize") && !hasApple) {
            const apple = level.spawn("#", obj.tilePos.sub(0, 1));
            apple.jump();
            hasApple = true;
            play("blip");
        }
    });

// player grows big onCollide with an "apple" obj
    player.onCollide("apple", (a) => {
        destroy(a);
        // as we defined in the big() component
        player.biggify(3);
        hasApple = false;
        play("powerup");
    });

let coinPitch = 0;

onUpdate(() => {
        if (coinPitch > 0) {
            coinPitch = Math.max(0, coinPitch - dt() * 100);
        }
    });

player.onCollide("coin", (c) => {
        destroy(c);
        play("coin", {
            detune: coinPitch,
        });
        coinPitch += 100;
        coins += 1;
        coinsLabel.text = coins;
    });

const coinsLabel = add([
        text(coins),
        pos(24, 24),
        fixed(),
    ]);

function jump() {
        // these 2 functions are provided by body() component
        if (player.isGrounded()) {
            player.jump(JUMP_FORCE);
        }
    }

// jump with space
    onKeyPress("space", jump);

onKeyDown("left", () => {
        player.move(-MOVE_SPEED, 0);
    });

onKeyDown("right", () => {
        player.move(MOVE_SPEED, 0);
    });

onKeyPress("down", () => {
        player.gravityScale = 3;
    });

onKeyRelease("down", () => {
        player.gravityScale = 1;
    });

onGamepadButtonPress("south", jump);

onGamepadStick("left", (v) => {
        player.move(v.x * MOVE_SPEED, 0);
    });

onKeyPress("f", () => {
        setFullscreen(!isFullscreen());
    });
});

scene("lose", () => {
    add([
        text("You Lose"),
    ]);
    onKeyPress(() => go("game"));
});

scene("win", () => {
    add([
        text("You Win"),
    ]);
    onKeyPress(() => go("game"));
});

go("game");

2D plaformer game

<div id="container"></div>
    <div id="ui-controls">
        <div>
            <label for="cube-size">Cube Size (N):</label>
            <input type="number" id="cube-size" min="2" max="20" value="3">
        </div>
        <div>
            <button id="generate-btn">Generate Cube</button>
            <button id="scramble-btn">Scramble</button>
            <button id="solve-btn">Solve</button>
        </div>
        <div id="rotation-controls">
            <div>
                <label for="layer-select">Layer:</label>
                <input type="number" id="layer-select" min="1" value="1">
            </div>
            <div id="rotation-buttons">
                
                <button data-move="U">U</button>
                <button data-move="U_prime">U'</button>
                <button data-move="D">D</button>
                <button data-move="D_prime">D'</button>
                <button data-move="R">R</button>
                <button data-move="R_prime">R'</button>
                <button data-move="L">L</button>
                <button data-move="L_prime">L'</button>
                <button data-move="F">F</button>
                <button data-move="F_prime">F'</button>
                <button data-move="B">B</button>
                <button data-move="B_prime">B'</button>
            </div>
        </div>
    </div>

body {
            font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden;
            background-color: #f0f0f0;
            color: #333;
        }
        #container {
            width: 100%;
            height: 100vh;
            position: relative;
        }
        #ui-controls {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.85);
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            z-index: 100;
            max-width: 250px;
        }
        #ui-controls > div {
            margin-bottom: 10px;
        }
        label {
            margin-right: 5px;
            font-weight: bold;
        }
        input[type="number"] {
            width: 50px;
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 3px;
            margin: 2px;
        }
        button:hover {
            background: #e0e0e0;
        }
        #rotation-controls {
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }
        #rotation-buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
        }
        #rotation-buttons button {
            width: 45px;
            height: 30px;
            padding: 0;
            font-size: 14px;
            font-weight: bold;
        }
        #info {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            color: #555;
            font-size: 14px;
        }

(function() {
            var script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js';
            script.onload = function() {
                init();
            };
            document.head.appendChild(script);
        })();

// --- Global Variables & Constants ---
        var scene, camera, renderer, controls;
        var cube, cubeSize = 3;
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        var mouseDownPos = new THREE.Vector2();
        var intersected;
        var isAnimating = false;
        var moveQueue = [];
        var moveHistory = [];
        var COLORS = { RED: 0xdc3545, ORANGE: 0xfd7e14, WHITE: 0xffffff, YELLOW: 0xffc107, BLUE: 0x007bff, GREEN: 0x28a745, BLACK: 0x202020 };
        var CUBIE_MARGIN = 0.05;

// Map button notation to rotation axis and direction
        var ROTATION_MAP = {
            'U':       { axis: 'y', direction: -1 }, 'U_prime': { axis: 'y', direction: 1 },
            'D':       { axis: 'y', direction: 1 },  'D_prime': { axis: 'y', direction: -1 },
            'R':       { axis: 'x', direction: -1 }, 'R_prime': { axis: 'x', direction: 1 },
            'L':       { axis: 'x', direction: 1 },  'L_prime': { axis: 'x', direction: -1 },
            'F':       { axis: 'z', direction: -1 }, 'F_prime': { axis: 'z', direction: 1 },
            'B':       { axis: 'z', direction: 1 },  'B_prime': { axis: 'z', direction: -1 }
        };

// --- Core Functions ---
        function init() {
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

var ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
            scene.add(ambientLight);
            var directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
            directionalLight.position.set(10, 20, 5);
            scene.add(directionalLight);

controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;

// --- Event Listeners ---
            window.addEventListener('resize', onWindowResize, false);
            renderer.domElement.addEventListener('mousedown', onMouseDown, false);
            renderer.domElement.addEventListener('mousemove', onMouseMove, false);
            renderer.domElement.addEventListener('mouseup', onMouseUp, false);
            document.getElementById('generate-btn').addEventListener('click', generateNewCube);
            document.getElementById('scramble-btn').addEventListener('click', scrambleCube);
            document.getElementById('solve-btn').addEventListener('click', solveCube);
            // Use event delegation for rotation buttons
            document.getElementById('rotation-buttons').addEventListener('click', onRotationButtonClick);

generateNewCube();
            animate();
        }

function generateNewCube() {
            var sizeInput = document.getElementById('cube-size');
            var newSize = parseInt(sizeInput.value);
            if (isNaN(newSize) || newSize < 2 || newSize > 20) {
                alert("Please enter a size between 2 and 20.");
                sizeInput.value = cubeSize;
                return;
            }
            cubeSize = newSize;

// Update layer selector
            var layerSelect = document.getElementById('layer-select');
            layerSelect.max = cubeSize;
            if (parseInt(layerSelect.value) > cubeSize) {
                layerSelect.value = cubeSize;
            } else if (parseInt(layerSelect.value) < 1) {
                layerSelect.value = 1;
            }

if (cube) scene.remove(cube.group);
            cube = createCube(cubeSize);
            scene.add(cube.group);
            
            var cameraDist = cubeSize * 1.2;
            camera.position.set(cameraDist, cameraDist, cameraDist);
            camera.lookAt(scene.position);
            controls.update();

moveHistory = [];
            moveQueue = [];
            isAnimating = false;
        }

function animate() {
            requestAnimationFrame(animate);
            controls.update();
            if (moveQueue.length > 0 && !isAnimating) {
                var move = moveQueue.shift();
                animateMove(move.axis, move.layer, move.direction, move.isSolving);
            }
            renderer.render(scene, camera);
        }

// --- Interaction Logic ---
        function onMouseDown(event) {
            if (isAnimating || moveQueue.length > 0) return;
            var rect = renderer.domElement.getBoundingClientRect();
            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
            mouseDownPos.copy(mouse);
            raycaster.setFromCamera(mouse, camera);
            var intersects = raycaster.intersectObjects(cube.group.children);
            if (intersects.length > 0) {
                controls.enabled = false;
                intersected = intersects[0];
            }
        }
        function onMouseMove(event) {
            if (!intersected) return;
            var rect = renderer.domElement.getBoundingClientRect();
            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
        }

// --- Animation and State Logic ---
        function animateMove(axis, layer, direction, isSolving) {
            if (isAnimating) return;
            isAnimating = true;
            if (!isSolving) moveHistory.push({ axis: axis, layer: layer, direction: direction });

var pivot = new THREE.Group();
            scene.add(pivot);
            var cubiesToRotate = [];
            cube.group.children.forEach(function(cubie) {
                if (Math.abs(cubie.userData[axis] - layer) < 0.1) cubiesToRotate.push(cubie);
            });
            cubiesToRotate.forEach(function(cubie) { pivot.attach(cubie); });

function updateCubiePositions(rotatedCubies, axis, direction) {
            var rotMatrix = new THREE.Matrix4();
            var angle = (Math.PI / 2) * direction;
            if (axis === 'x') rotMatrix.makeRotationX(angle);
            if (axis === 'y') rotMatrix.makeRotationY(angle);
            if (axis === 'z') rotMatrix.makeRotationZ(angle);
            rotatedCubies.forEach(function(cubie) {
                var pos = new THREE.Vector3().copy(cubie.userData).applyMatrix4(rotMatrix);
                cubie.userData.x = Math.round(pos.x);
                cubie.userData.y = Math.round(pos.y);
                cubie.userData.z = Math.round(pos.z);
            });
        }
        
        // --- UI Button Functions ---
        function onRotationButtonClick(event) {
            if (isAnimating || moveQueue.length > 0) return;
            var target = event.target;
            // Ensure the click was on a button with a data-move attribute
            if (target.tagName !== 'BUTTON' || !target.dataset.move) return;
            
            var moveName = target.dataset.move;
            var moveData = ROTATION_MAP[moveName];
            if (!moveData) return;

var layerSelect = document.getElementById('layer-select');
            var userLayer = parseInt(layerSelect.value);
            if (isNaN(userLayer) || userLayer < 1 || userLayer > cubeSize) {
                alert("Please select a valid layer (1 to " + cubeSize + ").");
                return;
            }

var offset = (cubeSize - 1) / 2;
            // Convert 1-based user layer to centered coordinate system
            var internalLayerCoord = userLayer - 1 - offset;
            
            // For a U/D move, the slice is along the Y axis. For F/B, it's Z, etc.
            var layerAxis = moveData.axis;
            
            // The layer coordinate depends on the face.
            // U, R, F are on the positive side. D, L, B on the negative.
            // The button notation (e.g. U vs D) already handles direction, so we just need to find the correct slice.
            var layer;
            if (['U', 'R', 'F'].includes(moveName[0])) {
                layer = internalLayerCoord;
            } else { // D, L, B
                layer = -internalLayerCoord;
            }

// A more direct mapping: layer number corresponds to slice from that face.
            // Layer 1 is always the face itself (e.g. for U, the top layer).
            // Layer N is the opposite face.
            var sliceCoord;
            var isPositiveFace = ['U', 'R', 'F'].includes(moveName[0]);
            if (isPositiveFace) {
                sliceCoord = offset - (userLayer - 1);
            } else { // D, L, B
                sliceCoord = -offset + (userLayer - 1);
            }

moveQueue.push({
                axis: moveData.axis,
                layer: sliceCoord,
                direction: moveData.direction,
                isSolving: false
            });
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

Interactive Rubik's Cube Simulation