From: A-Larsen Date: Thu, 15 Oct 2026 01:47:35 +0000 (-0400) Subject: first commit X-Git-Url: https://nyquistdev.net/git/?a=commitdiff_plain;h=refs%2Fheads%2Fquaternions;p=basic-3d-example.git first commit --- diff --git a/example.html b/example.html index 0883092..28ab5d0 100644 --- a/example.html +++ b/example.html @@ -63,9 +63,9 @@ body { - + + + + + - - diff --git a/index.js b/index.js index 17f2870..9336828 100644 --- a/index.js +++ b/index.js @@ -39,7 +39,7 @@ const AXIS_MODES = [ ["x","y"], ["y","z"], ["x","z"], ["x","y","z"] ]; -let axisModeIndex = AXIS_MODES.length - 1; +let axisModeIndex = AXIS_MODES.length-1; let activeAxes = AXIS_MODES[axisModeIndex]; /* ===================== CAMERA ===================== */ diff --git a/rendered.html b/rendered.html index 45d3678..6dc2f8f 100644 --- a/rendered.html +++ b/rendered.html @@ -887,6 +887,8 @@ function sendHeight() { window.addEventListener("load", sendHeight); window.addEventListener("resize", sendHeight); + +
-

A good explaination of how 3D works.

+

A good explaination how 3D works.

@@ -908,9 +910,9 @@ window.addEventListener("resize", sendHeight);
-This started off as code from Tsoding, I used chatgpt to change - specific things, and also made some of my own changes. This is a learning - tool! not something I wrote off the top of my head +This started off as code from Tsoding, and then I used chatgpt to change + specific things. This is a learning tool! not something I wrote off the + top of my head
@@ -930,19 +932,6 @@ This started off as code from Tsoding, I used chatgpt to change -> screen
-
- - - - - -
- - -Some parts of these pipeline may be left out if that part of the pipeline - is not needed -
-
@@ -967,9 +956,6 @@ y' &= y/z

Vertex Rotation Formulas

-

click here for an interactive example

-
-

Rotate vector formula for x-axis (y-z plane):

@@ -1071,9 +1057,6 @@ angles.

Quaternions

-

click here for an interactive example

-
-

Quaternions allow you to rotate smoothly around multiple axes without gimbal lock. Chat-gpt rewrote the code to use quaternions. Here are some of the replys about quaternions.

@@ -1401,85 +1384,6 @@ v' = q \; v_q \; q^{-1}
-

Simple clickable object

-
-
-

click here for an interactive example

-
-
-

This does not account for the rotation of the object but it does check to see if -your mouse is within the rectangular bounds of the mesh.

-
-
-
    -
  1. -

    finding the min and max values for x and y of the mesh:

    -
    2. -
-
-
-
-
function computeBounds(mesh) {
-    let min = {x: Infinity, y: Infinity}
-    let max = {x: -Infinity, y: -Infinity}
-
-    for (const v of mesh) {
-        min.x = Math.min(min.x, v.x)
-        min.y = Math.min(min.y, v.y)
-
-        max.x = Math.max(max.x, v.x)
-        max.y = Math.max(max.y, v.y)
-    }
-    return {min, max}
-}
-
-
-
-
    -
  1. -

    Define the box corners of the rect for the mesh

    -
    2. -
-
-
-
-
function boundingBoxCorners({min, max}) {
-    return {
-        bottom: {left: {x: min.x, y: max.y}, right: {x: max.x, y: max.y}},
-        top: {left: {x: min.x, y: min.y}, right: {x: max.x, y: min.y}},
-
-    }
-}
-
-
-
-
    -
  1. -

    Check to see if the mouse is in the rect in the game loop. If it is, and the -mouse button is down, then you can move the object

    -
    2. -
-
-
-
-
inObject =  (
-    mousePos.x > rect.top.left.x
-    &&
-    mousePos.x < rect.top.right.x
-    &&
-    mousePos.y > rect.top.left.y
-    &&
-    mousePos.y < rect.bottom.right.y
-)
-
-if (mouseDown && inObject) canMoveObject = true
-
-if (!mouseDown) canMoveObject = false
-
-
-
-
-

Links