2a:null 2b:["$","title",null,{"children":"Euler Angles | VIDI Intro Graphics | Observable"}] 30:T513,## 3D Rotation # Euler Angles Ever wondered how to describe the orientation of an object in 3D space using just three numbers? **Euler angles** provide exactly that: a sequence of three rotations, applied in a specific order, that can represent any 3D orientation. There are two common variants of this concept: - **Proper Euler angles**: use a repeated rotation axes (e.g., *YXY*) - **Tait–Bryan angles**: use three distinct axes (e.g., *XYZ*) In computer graphics, the term "Euler angles" is often used loosely to refer to both, even though they are technically different. The example here demonstrates a *YXY* proper Euler rotation, but Tait–Bryan angle conventions are also widely used. However, a known drawback of Euler angles of any rotation order is **gimbal lock**, a condition where one degree of rotational freedom is lost due to certain alignment of rotation axes. This notebook includes the following features: - **Proper Euler Rotation**: *YXY* rotation sequence with interactive controls. - **Angle Manipulation**: Adjust three angles (alpha, beta, and gamma) to see real-time effects. - **Matrix Visualization**: View individual and combined rotation matrices as angles change. - **Point Transformation**: Watch a point's coordinates transform through the composed rotation.31:T7fc,Rotation angles: ${tex.block` \alpha = ${angleAlphaInDeg}\degree = ${format(angleAlphaInDeg / 180)}\pi (\text{rad}), \quad \beta = ${angleBetaInDeg} \degree = ${format(angleBetaInDeg / 180) }\pi (\text{rad}), \quad \gamma = ${angleGammaInDeg}\degree = ${format(angleGammaInDeg / 180)}\pi (\text{rad}) `} Rotation Matrices: ${tex.block` R_{Y}( \alpha ) = \begin{bmatrix} ${format( cosAlpha)} & \textcolor{gray}{0} & ${format(sinAlpha)} \\ \textcolor{gray}{0} & \textcolor{gray}{1} & \textcolor{gray}{0} \\ ${format(-sinAlpha)} & \textcolor{gray}{0} & ${format(cosAlpha)} \end{bmatrix}, R_{X}( \beta ) = \begin{bmatrix} \textcolor{gray}{1} & \textcolor{gray}{0} & \textcolor{gray}{0} \\ \textcolor{gray}{0} & ${format(cosBeta)} & ${format(-sinBeta)} \\ \textcolor{gray}{0} & ${format(sinBeta)} & ${format( cosBeta)} \end{bmatrix}, R_{Y}( \gamma ) = \begin{bmatrix} ${format( cosGamma)} & \textcolor{gray}{0} & ${format(sinGamma)} \\ \textcolor{gray}{0} & \textcolor{gray}{1} & \textcolor{gray}{0} \\ ${format(-sinGamma)} & \textcolor{gray}{0} & ${format(cosGamma)} \end{bmatrix} `} Rotation of a point is given by: ${tex.block` R\cdot p=R_{Y}( \alpha ) \cdot R_{X}( \beta ) \cdot R_{Y}( \gamma ) \cdot p = \begin{bmatrix} ${format(rotationMat.elements[0])} & ${format(rotationMat.elements[3])} & ${format(rotationMat.elements[6])} \\ ${format(rotationMat.elements[1])} & ${format(rotationMat.elements[4])} & ${format(rotationMat.elements[7])} \\ ${format(rotationMat.elements[2])} & ${format(rotationMat.elements[5])} & ${format(rotationMat.elements[8])} \end{bmatrix} \begin{bmatrix} \textcolor{red} {${format(pos.x)}}\\ \textcolor{green} {${format(pos.y)}}\\ \textcolor{blue} {${format(pos.z)}} \end{bmatrix} = \begin{bmatrix} \textcolor{red} {${format(rotatedPos.x)}}\\ \textcolor{green} {${format(rotatedPos.y)}}\\ \textcolor{blue} {${format(rotatedPos.z)}} \end{bmatrix} =p' `}32:T42f,rotationMat = { const alpha = angleAlpha; const beta = angleBeta; const gamma = angleGamma; if (manualMatrixMath) { // heaving lifting but more efficient and faster const mat3 = new THREE.Matrix3(); mat3.set( // row-major order - sinAlpha * cosBeta * sinGamma + cosAlpha * cosGamma, sinAlpha * sinBeta, sinAlpha * cosBeta * cosGamma + cosAlpha * sinGamma, sinBeta * sinGamma, cosBeta, - sinBeta * cosGamma, - cosAlpha * cosBeta * sinGamma - sinAlpha * cosGamma, cosAlpha * sinBeta, cosAlpha * cosBeta * cosGamma - sinAlpha * sinGamma, ); return mat3; } const RyAlpha = new THREE.Matrix4().makeRotationY(alpha); const RxBeta = new THREE.Matrix4().makeRotationX(beta); const RyGamma = new THREE.Matrix4().makeRotationY(gamma); // R = Ry(alpha) * Rx(beta) * Ry(gamma) const rotationMatrix4 = new THREE.Matrix4().multiply(RyAlpha).multiply(RxBeta).multiply(RyGamma); const mat3 = new THREE.Matrix3().setFromMatrix4(rotationMatrix4); return mat3; }33:[] 2e:{"id":"52f68855d6e0868b","slug":"euler-angles","title":"Euler Angles","thumbnail":"f78a1f05ab646f57a598a3e46b5f45e2b81a1e3a03cc15da76cf4a3ede3dc515","access_level":"public","create_time":"$D2025-08-06T08:21:32.130Z","update_time":"$D2026-01-08T07:44:35.287Z","view_time":null,"first_public_time":"$D2025-08-08T11:13:44.364Z","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":1645,"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":"Euler Angles","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1539,"value":"___\n## Quick Manual\n\n- Adjust the *Alpha*, *Beta*, and *Gamma* angles of the rotation sequence individually using the sliders.\n- Use the *x*, *y*, and *z* sliders to input a point and see its transformation in real time through the updated rotation matrix transformation.\n- Toggle the **Gimbal** button to display the gimbal structure, making it easier to understand and visualize the rotation sequence.\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*An example of **Gimbal Lock** occurs at the default angle configuration of Alpha=0, Beta=0, Gamma=0. In this position, the teapot loses the ability to pitch (rotate forward or backward), making frontflips or backflips impossible.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1401,"value":"XYZ Axes are denoted by red, green, blue respectively.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1583,"value":"canvas = html`

\n\n

Object Preview

Point Preview

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"viewof eulerAngles = {\n const div = html`

\n \n Alpha:0°\n \n \n Beta:0°\n \n \n Gamma:0°\n \n

`;\n\n const inputs = div.querySelectorAll(\"input\");\n const spans = div.querySelectorAll(\"span\");\n\n function updateEulerAngles() {\n spans.forEach((span, i) => {\n span.textContent = inputs[i].value;\n });\n\n div.value = {\n alpha: +inputs[0].value,\n beta: +inputs[1].value,\n gamma: +inputs[2].value\n };\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n inputs.forEach(input => {\n input.addEventListener(\"input\", updateEulerAngles);\n });\n\n updateEulerAngles();\n\n return div;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"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).toFixed(1);\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":650,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":597,"value":"### Helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":591,"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":1412,"value":"viewof manualMatrixMath = {\n const form = html``;\n\n const input = form.querySelector('input[name=\"manualMatrixMath\"]');\n\n Object.defineProperty(form, \"value\", {get() {return input.checked;}});\n\n input.addEventListener(\"change\", () => {\n form.dispatchEvent(new CustomEvent(\"input\"));\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1221,"value":"___\n## Math","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":898,"value":"pos = new THREE.Vector3(pointCoord[\"x\"], pointCoord[\"y\"], pointCoord[\"z\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"rotatedPos = pos.clone().applyMatrix3(rotationMat);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1115,"value":"___\n## Teapot Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1118,"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":1121,"value":"meshObjGlobalSpace = {\n const gp = new THREE.Group();\n\n const mat4 = new THREE.Matrix4().setFromMatrix3(rotationMat);\n gp.matrix.copy(mat4);\n gp.matrixAutoUpdate = false;\n \n gp.add(meshObj);\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"___\n## Teapot Axis Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1179,"value":"axisObj = {\n const gp = new THREE.Group();\n\n const aX = createArrow(1.16, 0xff0000);\n const aY = createArrow(1.16, 0x00ff00);\n const aZ = createArrow(1.16, 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":1182,"value":"axisObjGlobalSpace = {\n const gp = new THREE.Group();\n \n const mat4 = new THREE.Matrix4().setFromMatrix3(rotationMat);\n gp.matrix.copy(mat4);\n gp.matrixAutoUpdate = false;\n\n gp.add(axisObj);\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1206,"value":"function createArrow(length, color) {\n const arrow = new THREE.Group();\n\n const shaft = new THREE.Mesh(\n new THREE.CylinderGeometry(0.016, 0.016, length - 0.1),\n new THREE.MeshBasicMaterial({ color: color })\n );\n shaft.position.y = length / 2 - 0.05;\n\n const head = new THREE.Mesh(\n new THREE.ConeGeometry(0.048, 0.1, 12),\n new THREE.MeshBasicMaterial({ color: color })\n );\n head.position.y = length - 0.05;\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":568,"value":"___\n## Gimbal Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":410,"value":"gimbal_inner_radius = 1.2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"gimbal_torus_radius = 0.025;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":451,"value":"gimbal_between_len = 0.2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"torusGamma = {\n const gp = new THREE.Group();\n\n const t = createTorus(gimbal_inner_radius, 0xddddff);\n const handle01 = createCylinder(0xffffff);\n const handle02 = createCylinder(0xffffff);\n\n handle01.position.set(0, -(gimbal_inner_radius + gimbal_torus_radius + gimbal_between_len * 0.5), 0);\n handle02.position.set(0, (gimbal_inner_radius + gimbal_torus_radius + gimbal_between_len * 0.5), 0);\n gp.rotation.set(0, angleGamma, 0);\n\n gp.add(t); gp.add(handle01); gp.add(handle02);\n \n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":388,"value":"torusBeta = {\n const gp = new THREE.Group();\n\n const t = createTorus(gimbal_inner_radius + gimbal_between_len + gimbal_torus_radius * 2, 0xddffdd);\n const handle01 = createCylinder(0xffffff);\n const handle02 = createCylinder(0xffffff);\n\n handle01.rotation.set(0, 0, deg90inRad);\n handle02.rotation.set(0, 0, deg90inRad);\n handle01.position.set(-(gimbal_inner_radius + gimbal_torus_radius * 3 + gimbal_between_len * 1.5), 0, 0);\n handle02.position.set( (gimbal_inner_radius + gimbal_torus_radius * 3 + gimbal_between_len * 1.5), 0, 0);\n gp.rotation.set(angleBeta, 0, 0);\n\n gp.add(t); gp.add(handle01); gp.add(handle02);\n gp.add(torusGamma);\n \n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"torusAlpha = {\n const gp = new THREE.Group();\n\n const t = createTorus(gimbal_inner_radius + gimbal_between_len * 2 + gimbal_torus_radius * 4, 0xffdddd);\n const handle01 = createCylinder(0xffffff);\n const handle02 = createCylinder(0xffffff);\n\n handle01.position.set(0, -(gimbal_inner_radius + gimbal_torus_radius * 5 + gimbal_between_len * 2.5), 0);\n handle02.position.set(0, (gimbal_inner_radius + gimbal_torus_radius * 5 + gimbal_between_len * 2.5), 0);\n gp.rotation.set(0, angleAlpha, 0);\n\n gp.add(t); gp.add(handle01); gp.add(handle02);\n gp.add(torusBeta);\n \n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"gimbal = {\n const gimbalGp = new THREE.Group();\n gimbalGp.add(torusAlpha);\n return gimbalGp\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"function createCylinder(color) {\n const geo = new THREE.CylinderGeometry(0.025, 0.025, gimbal_between_len, 6);\n const mat = new THREE.MeshBasicMaterial({ color: color })\n const cylinder = new THREE.Mesh(geo, mat);\n return cylinder;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"function createTorus(radius, color) {\n const geo = new THREE.TorusGeometry(radius, gimbal_torus_radius, 6, 300);\n const mat = new THREE.MeshPhongMaterial({ color: color, shininess: 0 });\n const torus = new THREE.Mesh(geo, mat);\n return torus;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"___\n## Custom Point Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":824,"value":"pointsObj = {\n const gp = new THREE.Group();\n\n const point = createPointObj(pos, 0x666666, 0x660000, 0x006600, 0x000066);\n const rotatedPoint = createPointObj(rotatedPos, 0xffffff, 0xff0000, 0x00ff00, 0x0000ff);\n \n gp.add(point);\n gp.add(rotatedPoint);\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":859,"value":"function createPointObj(pos, color, colorX, colorY, colorZ) {\n const gp = new THREE.Group();\n\n const x = pos.x;\n const y = pos.y;\n const z = pos.z;\n\n const icoGeo = createIcosahedron(color);\n const lineX = createLine(new THREE.Vector3(0, y, z), new THREE.Vector3(x, y, z), colorX);\n const lineY = createLine(new THREE.Vector3(x, 0, z), new THREE.Vector3(x, y, z), colorY);\n const lineZ = createLine(new THREE.Vector3(x, y, 0), new THREE.Vector3(x, y, z), colorZ);\n\n icoGeo.position.set(x, y, z);\n\n gp.add(icoGeo); gp.add(lineX); gp.add(lineY); gp.add(lineZ);\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":826,"value":"function createIcosahedron(color) {\n const geo = new THREE.IcosahedronGeometry(0.02, 2);\n const mat = new THREE.MeshBasicMaterial({ color: color })\n const ico = new THREE.Mesh(geo, mat);\n return ico;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":829,"value":"function createLine(start, end, color) {\n const points = [start, end];\n const geo = new THREE.BufferGeometry().setFromPoints(points);\n const mat = new THREE.LineBasicMaterial({ color: color, linewidth: 3 });\n const line = new THREE.Line(geo, mat);\n line.computeLineDistances();\n return line;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":556,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"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":46,"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":105,"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":116,"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":120,"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":550,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":547,"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 if (helper[\"3dGrid\"]) {\n scene.add(grid.clone());\n }\n\n if (helper[\"gimbal\"]) {\n scene.add(gimbal.clone());\n }\n\n if (helper[\"axis\"]) {\n scene.add(axisObjGlobalSpace);\n }\n\n scene.add(meshObjGlobalSpace);\n \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1572,"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 if (helper[\"3dGrid\"]) {\n scene.add(grid.clone());\n }\n\n if (helper[\"gimbal\"]) {\n scene.add(gimbal.clone());\n }\n\n if (helper[\"axis\"]) {\n scene.add(axisObjGlobalSpace.clone());\n }\n\n scene.add(pointsObj);\n \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1599,"value":"mutable oldCamera = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1605,"value":"mutable target = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"camera = {\n const oldCam = mutable oldCamera;\n const oldPos = oldCam ? oldCam.position.clone() : new THREE.Vector3(0.8, 1, 3);\n const oldTarget = target;\n\n const fov = 50;\n const aspect = (width / 2) / 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":5,"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":19,"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":1569,"value":"mainRender = () => {\n renderer.setScissorTest(true);\n\n // Viewport 1\n renderer.setViewport(0, 0, width / 2 - 1, height);\n renderer.setScissor(0, 0, width / 2 - 1, height);\n renderer.render(scene01, camera);\n\n // Viewport 2\n renderer.setViewport(width / 2 + 1, 0, width / 2, height);\n renderer.setScissor(width / 2 + 1, 0, width / 2, height);\n renderer.render(scene02, camera);\n\n renderer.setScissorTest(false);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1512,"value":"___\n## Math Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":378,"value":"deg90inRad = Math.PI / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":605,"value":"angleAlphaInDeg = eulerAngles.alpha;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":609,"value":"angleBetaInDeg = eulerAngles.beta;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"angleGammaInDeg = eulerAngles.gamma;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"angleAlpha = angleAlphaInDeg * Math.PI / 180;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"angleBeta = angleBetaInDeg * Math.PI / 180;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"angleGamma = angleGammaInDeg * Math.PI / 180;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1481,"value":"sinAlpha = Math.sin(angleAlpha);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1483,"value":"cosAlpha = Math.cos(angleAlpha);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1486,"value":"sinBeta = Math.sin(angleBeta);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1490,"value":"cosBeta = Math.cos(angleBeta);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1492,"value":"sinGamma = Math.sin(angleGamma);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1494,"value":"cosGamma = Math.cos(angleGamma);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"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":753,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":757,"value":"height = 400;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1500,"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":17,"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":574,"value":"grid = {\n const gridGP = new THREE.Group();\n\n const gridXZ = new THREE.GridHelper( 2, 4, 0x666666, 0x444444 );\n // const gridYZ = new THREE.GridHelper( 2, 4, 0x666666, 0x444444 );\n // const gridXY = new THREE.GridHelper( 2, 4, 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":432,"value":"teapotGeometry = new THREE.TeapotGeometry( 0.5, 18 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"import { style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1633,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"