2a:null 2b:["$","title",null,{"children":"Quaternions | VIDI Intro Graphics | Observable"}] 30:T76d,## 3D Rotation # Quaternions Rotating an object in 3D might seem simple until you try it. Some methods are intuitive but break down in tricky ways, while others handle rotations flawlessly but are harder to grasp. **Quaternions**, a powerful mathematical tool, fall into the second category: less intuitive at first, but extremely powerful and nearly flawless. **Euler angles**, which describe rotations around specific axes using three angles, are somewhat more intuitive for humans to understand, but they suffer from issues like **gimbal lock** (losing a degree of freedom in certain configurations) and lack a well-defined procedure for smooth interpolation between orientations. This is where quaternions shine. They represent rotations in 3D space using 4D numbers, allowing: - Smooth, consistent interpolation between orientations using **SLERP** (**S**pherical **L**inear Int**ERP**olation). - Combination of multiple rotations without accumulating significant numerical error or altering the intended rotation. - *Complete* immunity to gimbal lock. However, quaternions are 4D mathematical objects, which makes them very hard to visualize. In math and science, their unique 4D mathematical properties are leveraged to produce a net 3D rotation effect, with high numerical stability. In fact, due to these properties, quaternions are used in nearly 100% of all modern applications such as mobile devices, aerospace, robotics, gaming, and virtual reality, where precision and numerical stability are critical. This notebook demonstrates: - **Axis-Angle Control**: Interactively adjust the rotation axis and rotation angle. - **Interpolation Slider**: Visualize smooth SLERP transitions between two orientations. - **Real-Time Math Updates**: See quaternion values change you adjust controls. - **Multiple Views**: Compare the original, interpolated and fully-rotated states side-by-side.31:T660,Rotation angle and Rotation axis: ${tex.block` \theta = ${rotationAngleInDeg} \degree, \quad v_{\text{rotation axis}} = (v_{x},v_{y},v_{z}) = ( \textcolor{red}{${format(rotationAxis.x)}}, \textcolor{green}{${format(rotationAxis.y)}}, \textcolor{blue}{${format(rotationAxis.z)}} ) `} Rotation quaternion: ${tex.block` q = \cos\left(\frac{${format_sign_only(rotationAngleInDeg)}\degree}{2}\right) + \sin\left(\frac{${format_sign_only(rotationAngleInDeg)}\degree}{2}\right) ( \textcolor{red}{${format(rotationAxis.x)}}i \textcolor{green}{${format(rotationAxis.y)}}j \textcolor{blue}{${format(rotationAxis.z)}}k ) = ${format(cosAngle)} \textcolor{red}{${format(sinAngle * rotationAxis.x)}}i \textcolor{green}{${format(sinAngle * rotationAxis.y)}}j \textcolor{blue}{${format(sinAngle * rotationAxis.z)}}k `} Inverse rotation quaternion: ${tex.block` q^{-1} = \cos\left(\frac{${format_sign_only(-rotationAngleInDeg)}\degree}{2}\right) + \sin\left(\frac{${format_sign_only(-rotationAngleInDeg)}\degree}{2}\right) ( \textcolor{red}{${format(rotationAxis.x)}}i \textcolor{green}{${format(rotationAxis.y)}}j \textcolor{blue}{${format(rotationAxis.z)}}k ) = ${format(cosAngleR)} \textcolor{red}{${format(sinAngleR * rotationAxis.x)}}i \textcolor{green}{${format(sinAngleR * rotationAxis.y)}}j \textcolor{blue}{${format(sinAngleR * rotationAxis.z)}}k `} Rotation of any point by that quaternion is given by: ${tex.block` q_{\text{rotated teapot choords}} = \text{Rotate}(q_{\text{teapot choords}}) = q \cdot q_{\text{teapot choords}} \cdot q^{-1} `}32:T5a5,// annoying one but it works // what the heck is wrong with observable AxisRotateControl = Generators.observe(notify => { const state = { axisControlActive: false, mouseDown: false, deltaX: 0.0, deltaY: 0.0, }; let mouseDown = false; let lastMouseX = 0; let lastMouseY = 0; const stateUpdate = () => { state.axisControlActive = viewof controlInputs.value["rotateAxis"]; controls.enabled = !state.axisControlActive; notify({...state}); } viewof controlInputs.addEventListener("change", stateUpdate); stateUpdate(); const onMouseDown = e => { state.mouseDown = true; lastMouseX = e.clientX; lastMouseY = e.clientY; notify({...state}); }; const onMouseUp = e => { state.mouseDown = false; lastMouseX = e.clientX; lastMouseY = e.clientY; notify({...state}); }; const onMouseMove = e => { if (state.mouseDown && state.axisControlActive) { const dx = e.clientX - lastMouseX; const dy = e.clientY - lastMouseY; lastMouseX = e.clientX; lastMouseY = e.clientY; state.deltaX = dx !== 0 ? dx : 0.0; state.deltaY = dy !== 0 ? dy : 0.0; } else { state.deltaX = 0.0; state.deltaY = 0.0; } notify({...state}); }; renderer.domElement.addEventListener("mousedown", onMouseDown); renderer.domElement.addEventListener("mouseup", onMouseUp); renderer.domElement.addEventListener("mousemove", onMouseMove); });33:[] 2e:{"id":"1f7492d28fb4a8b3","slug":"quaternions","title":"Quaternions","thumbnail":"010a0506f02aa0b1fff5741a8870dfeb7c3ddde7059d01b3e93c4ad8e4f22de6","access_level":"public","create_time":"$D2025-08-08T21:54:36.976Z","update_time":"$D2026-01-22T23:38:22.369Z","view_time":null,"first_public_time":"$D2025-08-09T09:57:53.983Z","fork":false,"stars":2,"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":1358,"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":"Quaternions","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"___\n## Quick Manual\n\n- Toggle the *Edit Axis of Rotation* button, then click and drag on the canvas to change the axis of rotation.\n- Use the *Interpolation* slider to explore the full range of interpolation.\n- Use the *Rotate Angle* slider to adjust the rotation amount.\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.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1105,"value":"XYZ Axes are denoted by red, green, blue respectively. White arrow indicates the axis of rotation.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":740,"value":"canvas = html`

\n\n

Start Orientation

Interpolation Progress

End Orientation

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"viewof controlInputs = {\n const form = html``;\n\n const inputs = form.querySelectorAll('input[type=\"checkbox\"]');\n\n function updateValue() {\n const result = {};\n inputs.forEach(input => {\n result[input.value] = input.checked;\n });\n form.value = result;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"change\", updateValue);\n });\n updateValue();\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"viewof rotationParams = {\n const div = html`

\n \n Rotate Angle:0°\n \n \n Interpotation:0%\n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function updateAngles() {\n spans.forEach((span, i) => {\n span.textContent = inputs[i].value;\n });\n\n div.value = {\n rotateAngle: +inputs[0].value,\n interpolation: +inputs[1].value / 100.0,\n };\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"input\", updateAngles);\n });\n\n updateAngles();\n\n return div;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":793,"value":"### Helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":790,"value":"viewof helper = {\n const form = html``;\n\n const inputs = form.querySelectorAll('input[type=\"checkbox\"]');\n\n function updateValue() {\n const result = {};\n inputs.forEach(input => {\n result[input.value] = input.checked;\n });\n form.value = result;\n form.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"change\", updateValue);\n });\n updateValue();\n\n return form;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1206,"value":"___\n## Point Transformation Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":620,"value":"viewof pointCoord = {\n const div = html`

\n \n x:0\n \n \n y:0\n \n \n z:0\n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function updatePointCoord() {\n spans.forEach((span, i) => {\n span.textContent = inputs[i].value;\n });\n\n div.value = {\n x: +inputs[0].value,\n y: +inputs[1].value,\n z: +inputs[2].value\n };\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"input\", updatePointCoord);\n });\n\n updatePointCoord();\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"Coordinate of a point:\n${tex.block`\n p = (p_{x},p_{y},p_{z}) = (\n \\textcolor{red}{${format(initialPos.x)}},\n \\textcolor{green}{${format(initialPos.y)}},\n \\textcolor{blue}{${format(initialPos.z)}}\n )\n`}\n\n3D coordinate converted into a quaternion:\n${tex.block`\n q_{p} = 0\n \\textcolor{red}{${format(initialPos.x)}}i\n \\textcolor{green}{${format(initialPos.y)}}j\n \\textcolor{blue}{${format(initialPos.z)}}k\n`}\n\nApply rotation:\n${tex.block`\n q_{\\text{rotated}} = \\text{Rotate}(q_{p}) = q \\cdot q_{p} \\cdot q^{-1}\n = 0\n \\textcolor{red}{${format(finalPos.x)}}i\n \\textcolor{green}{${format(finalPos.y)}}j\n \\textcolor{blue}{${format(finalPos.z)}}k\n`}\n\nRotated Quaternion converted back into a 3D coordinate:\n${tex.block`\n p_{\\text{rotated}} = (p_{x},p_{y},p_{z}) = (\n \\textcolor{red}{${format(finalPos.x)}},\n \\textcolor{green}{${format(finalPos.y)}},\n \\textcolor{blue}{${format(finalPos.z)}}\n )\n`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":234,"value":"___\n## Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":242,"value":"mutable rotationAxis = new THREE.Vector3(1, 1, 1).normalize();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":370,"value":"rotationAngleInDeg = rotationParams[\"rotateAngle\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"rotationAngle = rotationAngleInDeg * Math.PI / 180;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":238,"value":"initialStateQ = new THREE.Quaternion();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":422,"value":"mutable finalStateQ = new THREE.Quaternion().setFromAxisAngle(mutable rotationAxis, rotationAngle);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"mutable interpolatedQ = {\n const sQ = new THREE.Quaternion();\n const eQ = new THREE.Quaternion().setFromAxisAngle(mutable rotationAxis, rotationAngle);\n const iQ = new THREE.Quaternion();\n iQ.slerpQuaternions(sQ, eQ, interpolationProgress);\n return iQ;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"initialPos = new THREE.Vector3(pointCoord[\"x\"], pointCoord[\"y\"], pointCoord[\"z\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"finalPos = {\n const p = initialPos.clone();\n p.applyQuaternion(finalStateQ);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"interpolatedPos = {\n const p = initialPos.clone();\n p.applyQuaternion(interpolatedQ);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"interpolationProgress = rotationParams[\"interpolation\"];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1259,"value":"___\n## Rotation Axis Object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":74,"value":"rotationAxisObj = createBigArrow(2.4, 0.02, 0xffffff);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"rotationAxisObjGlobalSpace01 = {\n const gp = new THREE.Group();\n \n pointObjAlongVector(gp, mutable rotationAxis);\n\n gp.add(rotationAxisObj.clone());\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"rotationAxisObjGlobalSpace02 = {\n const gp = new THREE.Group();\n \n pointObjAlongVector(gp, mutable rotationAxis);\n\n gp.add(rotationAxisObj.clone());\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1153,"value":"rotationAxisObjGlobalSpace03 = {\n const gp = new THREE.Group();\n \n pointObjAlongVector(gp, mutable rotationAxis);\n\n gp.add(rotationAxisObj.clone());\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"function createBigArrow(length, radius, color) {\n const gp = new THREE.Group();\n\n const arrow = createArrow(length, radius, color);\n arrow.position.y = - length / 2;\n\n gp.add(arrow);\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"___\n## Original Mesh Object (Left)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":204,"value":"originalMeshObjGlobalSpace = {\n const gp = new THREE.Group();\n\n gp.add(meshObj.clone());\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"syncRotationAxisObj = () => {\n pointObjAlongVector(rotationAxisObjGlobalSpace01, rotationAxis);\n pointObjAlongVector(rotationAxisObjGlobalSpace02, rotationAxis);\n pointObjAlongVector(rotationAxisObjGlobalSpace03, rotationAxis);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"___\n## Interpolated Mesh Object (Mid)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":394,"value":"interpolatedMeshObjGlobalSpace = {\n const gp = new THREE.Group();\n\n const startQuat = new THREE.Quaternion();\n const endQuat = new THREE.Quaternion().setFromAxisAngle(mutable rotationAxis, rotationAngle);\n const interpolatedQuat = new THREE.Quaternion();\n interpolatedQuat.slerpQuaternions(startQuat, endQuat, interpolationProgress);\n gp.quaternion.copy(interpolatedQuat);\n\n gp.add(meshWireframeObj);\n\n return gp;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":397,"value":"syncInterpolatedMeshObj = () => {\n const startQuat = new THREE.Quaternion();\n const endQuat = new THREE.Quaternion().setFromAxisAngle(rotationAxis, rotationAngle);\n const interpolatedQuat = new THREE.Quaternion();\n interpolatedQuat.slerpQuaternions(startQuat, endQuat, interpolationProgress);\n interpolatedMeshObjGlobalSpace.quaternion.copy(interpolatedQuat);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"___\n## Rotated Mesh Object (Right)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":359,"value":"rotatedMeshObjGlobalSpace = {\n const gp = new THREE.Group();\n\n gp.quaternion.setFromAxisAngle(mutable rotationAxis, rotationAngle);\n \n gp.add(meshObj.clone());\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"syncRotatedMeshObj = () => {\n rotatedMeshObjGlobalSpace.quaternion.setFromAxisAngle(rotationAxis, rotationAngle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"___\n## Axis Object","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":676,"value":"axesObjGlobalSpace = createAxesObj(1.2, 0.016);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1332,"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":662,"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":39,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"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":43,"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":47,"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":49,"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":52,"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":26,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":37,"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(rotationAxisObjGlobalSpace01);\n\n if (helper[\"teapot\"]) {\n scene.add(originalMeshObjGlobalSpace);\n }\n if (helper[\"axis\"]) {\n scene.add(axesObjGlobalSpace.clone());\n }\n if (helper[\"3dGrid\"]) {\n scene.add(grid.clone());\n }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"scene02 = {\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(rotationAxisObjGlobalSpace02);\n\n if (helper[\"teapot\"]) {\n scene.add(interpolatedMeshObjGlobalSpace);\n }\n if (helper[\"axis\"]) {\n scene.add(axesObjGlobalSpace.clone());\n }\n if (helper[\"3dGrid\"]) {\n scene.add(grid.clone());\n }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"scene03 = {\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(rotationAxisObjGlobalSpace03);\n\n if (helper[\"teapot\"]) {\n scene.add(rotatedMeshObjGlobalSpace);\n }\n if (helper[\"axis\"]) {\n scene.add(axesObjGlobalSpace.clone());\n }\n if (helper[\"3dGrid\"]) {\n scene.add(grid.clone());\n }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1190,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"camera = {\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(0.6, 1.2, 3);\n const oldTarget = target;\n\n const fov = 50;\n const aspect = (width / 3) / 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":28,"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":31,"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":154,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":727,"value":"mainRender = () => {\n renderer.setScissorTest(true);\n\n // Viewport 1\n renderer.setViewport(0, 0, width / 3 - 1, height);\n renderer.setScissor(0, 0, width / 3 - 1, height);\n renderer.render(scene01, camera);\n\n // Viewport 2\n renderer.setViewport(width / 3 + 1, 0, width / 3 - 2, height);\n renderer.setScissor(width / 3 + 1, 0, width / 3 - 2, height);\n renderer.render(scene02, camera);\n\n // Viewport 3\n renderer.setViewport(width * 2 / 3 + 1, 0, width / 3 - 1, height);\n renderer.setScissor(width * 2 / 3 + 1, 0, width / 3 - 1, height);\n renderer.render(scene03, camera);\n\n renderer.setScissorTest(false);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"___\n## Math Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":679,"value":"deg90inRad = Math.PI / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"sinAngle = Math.sin(rotationAngle / 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"sinAngleR = Math.sin(-rotationAngle / 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":588,"value":"cosAngle = Math.cos(rotationAngle / 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":597,"value":"cosAngleR = Math.cos(-rotationAngle / 2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":64,"value":"// Continuously updates\n{\n while (true) {\n controls.update();\n\n if (AxisRotateControl.axisControlActive && AxisRotateControl.mouseDown) {\n updateRotationAxis();\n updateQuats();\n\n syncStates();\n }\n\n mainRender();\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"width = 960;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"height = 360;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1319,"value":"function format_sign_only(num) {\n return (num > 0.0 ? \"+\" : \"\") + num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":532,"value":"function format(x) {\n const num = (Math.round(x * 100.0) / 100.0).toFixed(2);\n return (num >= 0.0 ? \"+\" : \"\") + num;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":254,"value":"// this must be called every novel frame\nupdateRotationAxis = () => { // rotateAxis from view space\n const sensitivity = 0.002;\n\n const cameraRightVec = new THREE.Vector3();\n const cameraUpVec = new THREE.Vector3();\n cameraRightVec.setFromMatrixColumn(camera.matrixWorld, 0).normalize();\n cameraUpVec.setFromMatrixColumn(camera.matrixWorld, 1).normalize();\n\n const { deltaX, deltaY } = consumeAxisDelta();\n const quatX = new THREE.Quaternion().setFromAxisAngle(cameraRightVec, deltaY * sensitivity);\n const quatY = new THREE.Quaternion().setFromAxisAngle(cameraUpVec, deltaX * sensitivity);\n\n const axisVec = new THREE.Vector3(rotationAxis.x, rotationAxis.y, rotationAxis.z);\n axisVec.applyQuaternion(quatX);\n axisVec.applyQuaternion(quatY);\n axisVec.normalize();\n\n mutable rotationAxis = axisVec;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1019,"value":"// this must be called every novel frame\nupdateQuats = () => {\n finalStateQ.setFromAxisAngle(mutable rotationAxis, rotationAngle);\n\n finalPos.copy(initialPos).applyQuaternion(finalStateQ);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"consumeAxisDelta = () => {\n const { deltaX, deltaY } = AxisRotateControl;\n AxisRotateControl.deltaX = 0.0;\n AxisRotateControl.deltaY = 0.0;\n return { deltaX, deltaY };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"function pointObjAlongVector(object3D, dirVec) {\n const dir = dirVec.clone().normalize();\n const localUp = new THREE.Vector3(0, 1, 0);\n const quat = new THREE.Quaternion().setFromUnitVectors(localUp, dir);\n object3D.quaternion.copy(quat);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"syncStates = () => {\n syncRotationAxisObj();\n syncInterpolatedMeshObj();\n syncRotatedMeshObj();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1007,"value":"function disposeGroup(group) {\n group.children.forEach(child => {\n if (child.geometry) child.geometry.dispose();\n if (child.material) {\n if (Array.isArray(child.material)) {\n child.material.forEach(mat => mat.dispose());\n } else {\n child.material.dispose();\n }\n }\n });\n group.clear();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"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":192,"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":642,"value":"meshWireframeObj = {\n const geometry = await teapotGeometry;\n const material = new THREE.MeshPhongMaterial({\n color: 0xffffff, shininess: 128, wireframe: true,\n });\n const obj = new THREE.Mesh(geometry, material);\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"grid = {\n const gridGP = new THREE.Group();\n\n const grid = new THREE.GridHelper( 2, 4, 0x666666, 0x444444 );\n\n gridGP.add(grid);\n \n return gridGP;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"teapotGeometry = new THREE.TeapotGeometry( 0.5, 8 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"import { style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1298,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"