2a:null 2b:["$","title",null,{"children":"3D Transformations | VIDI Intro Graphics | Observable"}] 30:T86a,## Geometric Transformations # 3D Transformations Transformations don't just move objects, they reshape the coordinate system the object lives in. You can think of it as stretching or moving the entire universe the object resides in. Since transformations are expressed as matrix multiplications, the order you apply them matters (matrix multiplication is not commutative). Each new transformation stacks on the previous ones, building up a **transformation matrix**. The same idea can be expressed differently: transformations are always applied relative to the world axes, not the object's current orientation. For example, if an object is somewhere far from the origin, rotating it along the world's X-axis will send it on a nice orbital tour. But if the object is sitting right at the origin, that orbit collapses to a single point, so the effect appears as if the object is simply spinning around its own axis. There are three basic transformations: - **Scale**: stretches or shrinks the object along the axes. - **Rotate**: spins the object around an axis. - **Translate**: shifts the object's position in space. - *Other transformations like **shear** or **reflection** exist too, but most graphics pipelines are built around Scale, Rotate, and Translate.* Most graphics systems adopt the convention **Scale -> Rotate -> Translate (SRT)** for practical reasons. Other orders are not wrong, they just produce different outcomes. Understanding this is key: the same operations, applied in a different order, completely change the final transformation. In this notebook, you can explore: - **Transformation Order**: Select from all six possible sequences of transformation to see how the order affects the final result. - **Parameter Manipulation**: Adjust the individual scale, rotation, and translation values and observe how the object changes in real time. - **Transform Animation**: Animate the transformation sequence to see how each operation affects the object. - **Matrix Visualization**: Examine the underlying matrices, both individual and combined, as the parameters are modified, helping you connect the math with the visual result.31:Tfb5,viewof transformationParams = { const SLIDER_WIDTH = 150; const slider = (name, min, max, step, val) => ``; const sliderFull = (name, min, max, step, val) => ``; const rows = { S: ` Scale Link

Uniform: ${slider("S", 0.4, 2, 0.1, mutable scaleX)}

X: ${sliderFull("Sx", 0.4, 2, 0.1, mutable scaleX)} Y: ${sliderFull("Sy", 0.4, 2, 0.1, mutable scaleY)} Z: ${sliderFull("Sz", 0.4, 2, 0.1, mutable scaleZ)}

`, R: ` Rotate (XYZ) Alpha: ${slider("Ra", -180, 180, 5, mutable eulerAlpha)} ° Beta: ${slider("Rb", -180, 180, 5, mutable eulerBeta)} ° Gamma: ${slider("Rg", -180, 180, 5, mutable eulerGamma)} ° `, T: ` Translate X: ${slider("Tx", -4, 4, 0.1, mutable translateX)} Y: ${slider("Ty", -4, 4, 0.1, mutable translateY)} Z: ${slider("Tz", -4, 4, 0.1, mutable translateZ)} `, }; const order = typeof transformationOrderParams !== "undefined" ? transformationOrderParams : "SRT"; const tbody = order.split("").map(c => rows[c]).join(""); const div = html`

${tbody}

`; const q = name => div.querySelector(`[name=${name}]`); const sync = q("sync"); sync.checked = mutable isUniformScale; function updateActiveParams() { const uniform = sync.checked; mutable isUniformScale = uniform; q("S").disabled = !uniform; q("Sx").disabled = uniform; q("Sy").disabled = uniform; q("Sz").disabled = uniform; updateParams(); } function updateParams() { if (sync.checked) { const u = +q("S").value; mutable scaleX = mutable scaleY = mutable scaleZ = u; ["Sx","Sy","Sz"].forEach(n => q(n).value = u); } else { mutable scaleX = +q("Sx").value; mutable scaleY = +q("Sy").value; mutable scaleZ = +q("Sz").value; q("S").value = (mutable scaleX + mutable scaleY + mutable scaleZ) / 3; } mutable eulerAlpha = +q("Ra").value; mutable eulerBeta = +q("Rb").value; mutable eulerGamma = +q("Rg").value; mutable translateX = +q("Tx").value; mutable translateY = +q("Ty").value; mutable translateZ = +q("Tz").value; div.querySelectorAll("input[type='range']").forEach((input, i) => { div.querySelectorAll("span")[i].textContent = input.value; }); div.value = { scale: { x: mutable scaleX, y: mutable scaleY, z: mutable scaleZ }, rotate: { alpha: mutable eulerAlpha, beta: mutable eulerBeta, gamma: mutable eulerGamma }, translate: { x: mutable translateX, y: mutable translateY, z: mutable translateZ }, }; div.dispatchEvent(new CustomEvent("input")); } div.querySelectorAll("input[type='range']").forEach(el => el.addEventListener("input", updateParams)); sync.addEventListener("input", updateActiveParams); updateActiveParams(); return div; }32:T4cd,Mtransform = { const s = transformationParams.scale; const r = transformationParams.rotate; const euler = new THREE.Euler( THREE.MathUtils.degToRad(r.alpha), THREE.MathUtils.degToRad(r.beta), THREE.MathUtils.degToRad(r.gamma) ); const q = new THREE.Quaternion().setFromEuler(euler); const t = transformationParams.translate; const mS = new THREE.Matrix4().makeScale(s.x, s.y, s.z); const mR = new THREE.Matrix4().makeRotationFromQuaternion(q); const mT = new THREE.Matrix4().makeTranslation(t.x, t.y, t.z); const ops = { S: mS, R: mR, T: mT }; const mFinal = new THREE.Matrix4(); for (let i = transformationOrderParams.length - 1; i >= 0; i--) { mFinal.multiply(ops[transformationOrderParams[i]]); } let e = mFinal.elements; let mat4Latex = `\\begin{bmatrix} ${format(e[0])} & ${format(e[4])} & ${format(e[ 8])} & ${format(e[12])} \\\\ ${format(e[1])} & ${format(e[5])} & ${format(e[ 9])} & ${format(e[13])} \\\\ ${format(e[2])} & ${format(e[6])} & ${format(e[10])} & ${format(e[14])} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{0} &\\textcolor{gray}{0} & \\textcolor{gray}{1} \\end{bmatrix}`; return { matrixLatex: mat4Latex, }; }33:Ta8c,constructMatrix = (type, params) => { let mat4 = new THREE.Matrix4(); let mat4Latex; function cr(value, color) { return `\\textcolor{${color}}{${value}}`; } if (type == "S") { let Sx = params.scale.x, Sy = params.scale.y, Sz = params.scale.z; mat4.set( // row-major order Sx, 0, 0, 0, 0, Sy, 0, 0, 0, 0, Sz, 0, 0, 0, 0, 1, ); let e = mat4.elements; let e0 = format(e[0]), e5 = format(e[5]), e10 = format(e[10]); mat4Latex = `S = \\begin{bmatrix} ${cr(e0, "red")} & \\textcolor{gray}{0} & \\textcolor{gray}{0} & \\textcolor{gray}{0} \\\\ \\textcolor{gray}{0} & ${cr(e5, "green")} & \\textcolor{gray}{0} & \\textcolor{gray}{0} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{0} & ${cr(e10, "blue")} & \\textcolor{gray}{0} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{0} & \\textcolor{gray}{0} & \\textcolor{gray}{1} \\end{bmatrix}`; } if (type == "T") { let Tx = params.translate.x, Ty = params.translate.y, Tz = params.translate.z; mat4.set( 1, 0, 0, Tx, 0, 1, 0, Ty, 0, 0, 1, Tz, 0, 0, 0, 1, ); let e = mat4.elements; let e12 = format(e[12]), e13 = format(e[13]), e14 = format(e[14]); mat4Latex = `T = \\begin{bmatrix} \\textcolor{gray}{1} & \\textcolor{gray}{0} & \\textcolor{gray}{0} & ${cr(e12, "red")} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{1} & \\textcolor{gray}{0} & ${cr(e13, "green")} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{0} & \\textcolor{gray}{1} & ${cr(e14, "blue")} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{0} & \\textcolor{gray}{0} & \\textcolor{gray}{1} \\end{bmatrix}`; } if (type == "R") { let rx = THREE.MathUtils.degToRad(params.rotate.alpha), ry = THREE.MathUtils.degToRad(params.rotate.beta), rz = THREE.MathUtils.degToRad(params.rotate.gamma); const Rx = new THREE.Matrix4().makeRotationX(rx); const Ry = new THREE.Matrix4().makeRotationY(ry); const Rz = new THREE.Matrix4().makeRotationZ(rz); // Rx * Ry * Rz mat4.multiply(Rx).multiply(Ry).multiply(Rz); let e = mat4.elements; mat4Latex = `R = \\begin{bmatrix} ${format(e[0])} & ${format(e[4])} & ${format(e[ 8])} & \\textcolor{gray}{0} \\\\ ${format(e[1])} & ${format(e[5])} & ${format(e[ 9])} & \\textcolor{gray}{0} \\\\ ${format(e[2])} & ${format(e[6])} & ${format(e[10])} & \\textcolor{gray}{0} \\\\ \\textcolor{gray}{0} & \\textcolor{gray}{0} &\\textcolor{gray}{0} & \\textcolor{gray}{1} \\end{bmatrix}`; } return { name: type, // matrix: mat4, matrixLatex: mat4Latex }; }34:T71d,// godforsaken function animateTick(time) { const elapsed = time - mutable startTime; const t = Math.min(elapsed / animationPeriodInMS, 1); mutable progress = t; const start = startTransformation; const end = endTransformation; const idx = Math.floor(t * transformationOrderParams.length); const tt = (t - idx / 3) * 3; const att = tt < 0.5 ? 2 * Math.pow(tt, 2) : 1 - 2 * Math.pow(tt - 1, 2); // ease-in-out let currentScale = start.scale.clone(); let currentPos = start.translate.clone(); let currentRot = start.rotate.clone(); const activeOp = transformationOrderParams[idx]; if (activeOp === "S") { currentScale.lerpVectors(start.scale, end.scale, att); } else if (transformationOrderParams.indexOf("S") < idx) { currentScale.copy(end.scale); } if (activeOp === "R") { currentRot.slerpQuaternions(start.rotate, end.rotate, att); } else if (transformationOrderParams.indexOf("R") < idx) { currentRot.copy(end.rotate); } if (activeOp === "T") { currentPos.lerpVectors(start.translate, end.translate, att); } else if (transformationOrderParams.indexOf("T") < idx) { currentPos.copy(end.translate); } const mScale = new THREE.Matrix4(); const mRotate = new THREE.Matrix4(); const mTranslate = new THREE.Matrix4(); mScale.makeScale(currentScale.x, currentScale.y, currentScale.z); mRotate.makeRotationFromQuaternion(currentRot); mTranslate.makeTranslation(currentPos.x, currentPos.y, currentPos.z); const ops = { S: mScale, R: mRotate, T: mTranslate }; const mFinal = new THREE.Matrix4(); for (let i = transformationOrderParams.length - 1; i >= 0; i--) { mFinal.multiply(ops[transformationOrderParams[i]]); } meshObjWorldSpace.matrix.copy(mFinal); if (t < 1) { requestAnimationFrame(animateTick); } }35:[] 2e:{"id":"72624be5ffd249c8","slug":"3d-transformations","title":"3D Transformations","thumbnail":"ee141e32983c082c4821697902156abf8e99cc6ff9e2d8244b1f262e7ce47db4","access_level":"public","create_time":"$D2025-08-27T09:23:57.283Z","update_time":"$D2026-05-01T00:04:26.322Z","view_time":null,"first_public_time":"$D2025-08-28T08:36:00.105Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":1028,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"9e180f6758d4b892","slug":"core-concepts-in-computer-graphics","title":"Core Concepts in Computer Graphics","owner":{"id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics"}},"type":"notebook","body":{"title":"3D Transformations","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":848,"value":"___\n## Quick Manual\n\n- In the **Transformation Order** section, select a sequence to update the **Scale**, **Rotate**, and **Translate** application in that order.\n- In the **Rotate** and **Translate** sections, you can adjust individual values as needed.\n- In the **Scale** section, enable the *Link* toggle to synchronize all axes for uniform scaling.\n\n*Rotations and their axes are usually defined using the **right-hand rule**: point your thumb along the rotation axis, and the curl of your fingers shows the direction of positive rotation. This convention is standard across most math, physics, and engineering applications.*\n\n*This example uses Euler Angle Order of XYZ (Tait-Bryan Angles).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":846,"value":"XYZ Axes are denoted by red, green, blue respectively.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":78,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":329,"value":"viewof transformationOrderParams = {\n const form = html``;\n\n form.querySelector('select').value = \"SRT\";\n\n function updateValue() {\n form.value = form.querySelector('select').value;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n form.querySelector('select').addEventListener(\"change\", updateValue);\n updateValue();\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":926,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":671,"value":"$${tex.block`\n ${M0.matrixLatex}, \\quad\n ${M1.matrixLatex}, \\quad\n ${M2.matrixLatex}\n`}\n\nTransformation Matrix:\n${tex.block`\n M_{transform} = ${M2.name} \\cdot ${M1.name} \\cdot ${M0.name} = ${Mtransform.matrixLatex}\n`}\n\nThe transformation is given by:\n${tex.block`\n p' = M_{transform} \\cdot p\n = ${M2.name} \\cdot ${M1.name} \\cdot ${M0.name} \\cdot \n \\begin{bmatrix} x \\\\ y \\\\ z \\\\ 1 \\end{bmatrix}\n`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":595,"value":"___\n## Math Objects","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":599,"value":"M0 = constructMatrix(transformationOrderParams[0], transformationParams);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"M1 = constructMatrix(transformationOrderParams[1], transformationParams);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"M2 = constructMatrix(transformationOrderParams[2], transformationParams);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":750,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":419,"value":"___\n## Input States","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":517,"value":"mutable isUniformScale = true;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"mutable scaleX = 1.4;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":456,"value":"mutable scaleY = 1.4;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"mutable scaleZ = 1.4;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"mutable eulerAlpha = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"mutable eulerBeta = 75;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"mutable eulerGamma = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"mutable translateX = 2.0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":406,"value":"mutable translateY = 0.0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"mutable translateZ = 0.0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"___\n## Animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"mutable startTime = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"mutable progress = 0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"animationPeriodInMS = 2000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"startTransformation = {\n return {\n scale: new THREE.Vector3(1.0, 1.0, 1.0),\n rotate: new THREE.Quaternion(),\n translate: new THREE.Vector3(0.0, 0.0, 0.0),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"endTransformation = {\n const s = transformationParams.scale;\n const r = transformationParams.rotate;\n const euler = new THREE.Euler(\n THREE.MathUtils.degToRad(r.alpha),\n THREE.MathUtils.degToRad(r.beta),\n THREE.MathUtils.degToRad(r.gamma)\n );\n const t = transformationParams.translate;\n\n return {\n scale: new THREE.Vector3(s.x, s.y, s.z),\n rotate: new THREE.Quaternion().setFromEuler(euler),\n translate: new THREE.Vector3(t.x, t.y, t.z),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"function startAnimation() {\n mutable startTime = performance.now();\n mutable progress = 0;\n\n const start = startTransformation;\n const mScale = new THREE.Matrix4().makeScale(start.scale.x, start.scale.y, start.scale.z);\n const mRotate = new THREE.Matrix4().makeRotationFromQuaternion(start.rotate);\n const mTranslate = new THREE.Matrix4().makeTranslation(start.translate.x, start.translate.y, start.translate.z);\n const ops = { S: mScale, R: mRotate, T: mTranslate };\n\n const mFinal = new THREE.Matrix4();\n for (let i = transformationOrderParams.length - 1; i >= 0; i--) {\n mFinal.multiply(ops[transformationOrderParams[i]]);\n }\n\n meshObjWorldSpace.matrix.copy(mFinal);\n\n requestAnimationFrame(animateTick);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"___\n## Mesh Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"meshObj = {\n const geometry = await teapotGeometry;\n const material = new THREE.MeshPhongMaterial({\n color: 0xffffff, shininess: 128, side: THREE.DoubleSide,\n });\n const obj = new THREE.Mesh(geometry, material);\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"axisObj = createAxesObj(1.16, 0.016);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":975,"value":"createAxesObj = (length, radius = 0.016) => {\n const gp = new THREE.Group();\n\n const aX = createArrow(length, radius, 0xff0000);\n const aY = createArrow(length, radius, 0x00ff00);\n const aZ = createArrow(length, radius, 0x0000ff);\n\n aX.rotation.z = -deg90inRad;\n aZ.rotation.x = deg90inRad;\n\n gp.add(aX);\n gp.add(aY);\n gp.add(aZ);\n \n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"function createArrow(length, radius, color) {\n const arrow = new THREE.Group();\n\n var coneHeight = radius * 8;\n\n const shaft = new THREE.Mesh(\n new THREE.CylinderGeometry(radius, radius, length - coneHeight),\n new THREE.MeshBasicMaterial({ color: color })\n );\n shaft.position.y = length / 2 - coneHeight / 2;\n\n const head = new THREE.Mesh(\n new THREE.ConeGeometry(radius * 3, coneHeight, 12),\n new THREE.MeshBasicMaterial({ color: color })\n );\n head.position.y = length - coneHeight / 2;\n\n arrow.add(shaft);\n arrow.add(head);\n\n return arrow;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"meshObjLocalSpace = {\n const localGp = new THREE.Group();\n localGp.add(meshObj);\n localGp.add(axisObj);\n return localGp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":243,"value":"meshObjWorldSpace = {\n const gp = new THREE.Group();\n gp.add(meshObjLocalSpace);\n gp.matrixAutoUpdate = false;\n\n const end = endTransformation;\n\n const mS = new THREE.Matrix4().makeScale(end.scale.x, end.scale.y, end.scale.z);\n const mR = new THREE.Matrix4().makeRotationFromQuaternion(end.rotate);\n const mT = new THREE.Matrix4().makeTranslation(end.translate.x, end.translate.y, end.translate.z);\n const ops = { S: mS, R: mR, T: mT };\n\n const mFinal = new THREE.Matrix4();\n for (let i = transformationOrderParams.length - 1; i >= 0; i--) {\n mFinal.multiply(ops[transformationOrderParams[i]]);\n }\n\n gp.matrix.copy(mFinal);\n\n return gp;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"___\n## Global Axis Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":439,"value":"globalAxisObj = createAxesObj(4.25, 0.02);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"grid = {\n const gridGP = new THREE.Group();\n\n const gridXZ = new THREE.GridHelper( 8, 8, 0x666666, 0x444444 );\n // const gridYZ = new THREE.GridHelper( 8, 8, 0x666666, 0x444444 );\n // const gridXY = new THREE.GridHelper( 8, 8, 0x666666, 0x444444 );\n\n // gridYZ.rotation.z = deg90inRad;\n // gridXY.rotation.x = deg90inRad;\n\n gridGP.add(gridXZ);\n // gridGP.add(gridYZ);\n // gridGP.add(gridXY);\n \n return gridGP;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":87,"value":"originTarget = {\n const targetObject = new THREE.Object3D();\n targetObject.position.set(0, 0, 0);\n return targetObject;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"dirLight01 = {\n const light = new THREE.DirectionalLight(0xffffff, 0.8);\n light.position.set(1, 3, 3);\n light.target = originTarget;\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"dirLight02 = {\n const light = new THREE.DirectionalLight(0xffffff, 0.8);\n light.position.set(-1, 1, -3);\n light.target = originTarget;\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"pointLight01 = {\n const light = new THREE.PointLight(0xff9933, 1, 20);\n light.position.set(-8, 0, 0);\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"pointLight02 = {\n const light = new THREE.PointLight(0x6666ff, 1, 20);\n light.position.set(8, 0, 0);\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":83,"value":"scene01 = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(originTarget.clone());\n scene.add(dirLight01.clone());\n scene.add(dirLight02.clone());\n scene.add(pointLight01.clone());\n scene.add(pointLight02.clone());\n\n scene.add(grid);\n scene.add(globalAxisObj);\n scene.add(meshObjWorldSpace);\n \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"camera = {\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(4.4, 5, 7);\n const oldTarget = target;\n\n const fov = 50;\n const aspect = width / height;\n const near = 0.01;\n const far = 1000;\n let cam = new THREE.PerspectiveCamera(fov, aspect, near, far);\n \n cam.position.copy(oldPos);\n cam.lookAt(oldTarget);\n mutable oldCamera = cam;\n\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"renderer = {\n const canvas = document.getElementById(\"three-canvas\");\n const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext(\"webgl2\") });\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"controls = {\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.target.copy(mutable target);\n controls.enableDamping = true;\n controls.dampingFactor = 0.15;\n controls.rotateSpeed = 0.4;\n controls.addEventListener(\"change\", () => {\n mutable target.copy(controls.target); // sync to global target\n mainRender();\n });\n invalidation.then(() => {\n controls.dispose();\n renderer.dispose();\n });\n return controls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"mainRender = () => {\n\n renderer.render(scene01, camera);\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"___\n## Math Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":138,"value":"deg90inRad = Math.PI / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":122,"value":"// Continuously updates\n{\n while (true) {\n controls.update();\n mainRender();\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"height = 450;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"function format(x) {\n return (Math.round(x * 100.0) / 100.0).toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n // await require(\"three@0.130.0/examples/js/loaders/OBJLoader.js\").catch(() => {});\n // await require(\"three@0.130.0/examples/js/utils/BufferGeometryUtils.js\").catch(() => {});\n await require(\"three@0.130.0/examples/js/geometries/TeapotGeometry.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"teapotGeometry = new THREE.TeapotGeometry( 0.5, 18 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import { style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":962,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"