2a:null 2b:["$","title",null,{"children":"Scene Graphs | VIDI Intro Graphics | Observable"}] 30:T65c,## Hierarchical Transformations # Scene Graphs Every object in a 3D scene has a **world matrix** that maps it from its local space into world space. For small scenes, assigning world transforms directly works just fine. But as the number of objects grows in the scene, managing world transforms directly becomes tedious. **Objects that should move together must be updated together**. Fortunately, the real world already provides an intuitive model. Many objects do not exist independently; they are defined relative to something else. **Scene graphs** formalize this idea by organizing objects into parent-child hierarchies, allowing complex motion to be composed automatically from simple relative transforms. That is, moving a parent automatically moves all its children. The idea is that, each node in a scene graph stores a **local transform**, describing its scale, orientation, and position in its parent's coordinate frame (parent's local space). The **world transform** of a node is computed by recursively composing transforms from the root of the graph down to that node. Because of this structure, transformations naturally **propagate downward**: scaling, rotating, or translating a parent affects all of its descendants. This makes scene graphs especially well-suited for modeling articulated objects and grouped geometry built from simpler relative transforms. However, this convenience comes with consequences. Transform order matters, parent scaling is inherited, and rotations occur about the parent's origin, which can be complex at first, etc., but entirely consistent once the hierarchy is understood.31:T516,In this notebook example, a simple robotic arm is modeled as a hierarchy. The hand is attached to the forearm, the forearm is attached to the upper arm, and the upper arm is attached to the shoulder base, which is placed in world space. Define the **local transforms** as follows: ${tex.block` \begin{aligned} M_{\text{local hand}} & =\text{Hand's local transform relative to the forearm}\\ M_{\text{local forearm}} & =\text{Forearm's local transform relative to the upper arm}\\ M_{\text{local upper arm}} & =\text{Upper arm's local transform relative to the shoulder base (world root)}\\ \end{aligned} `} Then, the **world transforms** are computed as: ${tex.block` \begin{aligned} & M_{\textcolor{brown}{\text{world}} \text{ hand}} & & =M_{\textcolor{brown}{\text{world}} \text{ forearm}} \cdot M_{\text{local hand}} & & =M_{\text{local upper arm}} \cdot M_{\text{local forearm}} \cdot M_{\text{local hand}}\\ & M_{\textcolor{brown}{\text{world}} \text{ forearm}} & & =M_{\textcolor{brown}{\text{world}} \text{ upper arm}} \cdot M_{\text{local forearm}} & & =M_{\text{local upper arm}} \cdot M_{\text{local forearm}}\\ & M_{\textcolor{brown}{\text{world}} \text{ upper arm}} & & =\textcolor{gray}{I} \cdot M_{\text{local upper arm}} & & =M_{\text{local upper arm}}\\ \end{aligned} `}32:T63d,viewof transformationParams = { const div = html`

Hand Local Transform Wrist:0°

Forearm Local Transform Elbow:0°

Upper Arm Local Transform Shoulder Pitch: 0° Shoulder Yaw: 0°

`; const inputs = div.querySelectorAll("input"); const spans = div.querySelectorAll("span"); function update() { spans.forEach((span, i) => { span.textContent = inputs[i].value; }); div.value = { wristR: +inputs[0].value, elbowR: +inputs[1].value, shoulderRP: +inputs[2].value, shoulderRY: +inputs[3].value, }; div.dispatchEvent(new CustomEvent("input")); } inputs.forEach(input => input.addEventListener("input", update)); update(); return div; } 33:T4c9,handMeshObj = { const baseCyl = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 16); const handCyl = new THREE.CylinderGeometry(0.05, 0.15, 0.6, 8); const connectorCyl = new THREE.CylinderGeometry(0.15, 0.15, 0.2, 16); const connectorInnerCyl = new THREE.CylinderGeometry(0.14, 0.14, 0.1, 16); const baseCylObj = new THREE.Mesh(baseCyl, whiteMat); const handCylObj = new THREE.Mesh(handCyl, whiteMat); const connectorCylObj = new THREE.Mesh(connectorCyl, whiteMat); const connectorInnerCylObj = new THREE.Mesh(connectorInnerCyl, blackMat); baseCylObj.position.y = 0.1; handCylObj.position.y = 0.6; connectorCylObj.rotation.z = degToRad(90); connectorCylObj.position.x = 0.2; connectorInnerCylObj.rotation.z = degToRad(90); connectorInnerCylObj.position.x = 0.3; baseCylObj.castShadow = true; baseCylObj.receiveShadow = true; handCylObj.castShadow = true; handCylObj.receiveShadow = true; connectorCylObj.castShadow = true; connectorCylObj.receiveShadow = true; connectorInnerCylObj.castShadow = true; connectorInnerCylObj.receiveShadow = true; const gp = new THREE.Group(); gp.add(baseCylObj); gp.add(handCylObj); gp.add(connectorCylObj); gp.add(connectorInnerCylObj); return gp; }34:T740,forearmMeshObj = { const baseBCyl = new THREE.CylinderGeometry(0.3, 0.3, 0.8, 16); const connectorBCyl = new THREE.CylinderGeometry(0.25, 0.25, 0.3, 16); const connectorBInnerCyl = new THREE.CylinderGeometry(0.24, 0.24, 0.2, 16); const handCyl = new THREE.CylinderGeometry(0.2, 0.3, 2.0, 16); const baseTCyl = new THREE.CylinderGeometry(0.2, 0.2, 0.5, 16); const connectorTCyl = new THREE.CylinderGeometry(0.15, 0.15, 0.2, 16); const baseBCylObj = new THREE.Mesh(baseBCyl, whiteMat); const connectorBCylObj = new THREE.Mesh(connectorBCyl, whiteMat); const connectorBInnerCylObj = new THREE.Mesh(connectorBInnerCyl, blackMat); const handCylObj = new THREE.Mesh(handCyl, whiteMat); const baseTCylObj = new THREE.Mesh(baseTCyl, whiteMat); const connectorTCylObj = new THREE.Mesh(connectorTCyl, whiteMat); baseBCylObj.position.y = 0.1; connectorBCylObj.rotation.z = degToRad(90); connectorBCylObj.position.x = -0.25; connectorBInnerCylObj.rotation.z = degToRad(90); connectorBInnerCylObj.position.x = -0.35; handCylObj.position.y = 1.5; baseTCylObj.position.y = 2.7; connectorTCylObj.rotation.z = degToRad(90); connectorTCylObj.position.y = 2.8; connectorTCylObj.position.x = -0.2; baseBCylObj.castShadow = true; baseBCylObj.receiveShadow = true; connectorBCylObj.castShadow = true; connectorBCylObj.receiveShadow = true; connectorBInnerCylObj.castShadow = true; connectorBInnerCylObj.receiveShadow = true; handCylObj.castShadow = true; handCylObj.receiveShadow = true; baseTCylObj.castShadow = true; baseTCylObj.receiveShadow = true; connectorTCylObj.castShadow = true; connectorTCylObj.receiveShadow = true; const gp = new THREE.Group(); gp.add(baseBCylObj); gp.add(connectorBCylObj); gp.add(connectorBInnerCylObj); gp.add(handCylObj); gp.add(baseTCylObj); gp.add(connectorTCylObj); return gp; }35:T5d0,upperArmMeshObj = { const baseBCyl = new THREE.CylinderGeometry(0.4, 0.4, 1.0, 16); const connectorBCyl = new THREE.CylinderGeometry(0.45, 0.45, 1.0, 16); const handCyl = new THREE.CylinderGeometry(0.3, 0.4, 1.8, 16); const baseTCyl = new THREE.CylinderGeometry(0.3, 0.3, 0.8, 16); const connectorTCyl = new THREE.CylinderGeometry(0.25, 0.25, 0.3, 16); const baseBCylObj = new THREE.Mesh(baseBCyl, whiteMat); const connectorBCylObj = new THREE.Mesh(connectorBCyl, whiteMat); const handCylObj = new THREE.Mesh(handCyl, whiteMat); const baseTCylObj = new THREE.Mesh(baseTCyl, whiteMat); const connectorTCylObj = new THREE.Mesh(connectorTCyl, whiteMat); baseBCylObj.position.y = 0.5; connectorBCylObj.rotation.z = degToRad(90); connectorBCylObj.position.x = 0.0; handCylObj.position.y = 1.9; baseTCylObj.position.y = 3.2; connectorTCylObj.rotation.z = degToRad(90); connectorTCylObj.position.y = 3.3; connectorTCylObj.position.x = 0.25; baseBCylObj.castShadow = true; baseBCylObj.receiveShadow = true; connectorBCylObj.castShadow = true; connectorBCylObj.receiveShadow = true; handCylObj.castShadow = true; handCylObj.receiveShadow = true; baseTCylObj.castShadow = true; baseTCylObj.receiveShadow = true; connectorTCylObj.castShadow = true; connectorTCylObj.receiveShadow = true; const gp = new THREE.Group(); gp.add(baseBCylObj); gp.add(connectorBCylObj); gp.add(handCylObj); gp.add(baseTCylObj); gp.add(connectorTCylObj); return gp; }36:[] 2e:{"id":"a7b8cf53af0ea7bb","slug":"scene-graphs","title":"Scene Graphs","thumbnail":"c1433f98dad9672bce7eb8bed7860182410ebe0d66cc21abcae5c40e42a390e9","access_level":"public","create_time":"$D2026-01-03T02:15:04.232Z","update_time":"$D2026-01-27T07:01:44.702Z","view_time":null,"first_public_time":"$D2026-01-04T08:12:29.350Z","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":971,"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":"Scene Graphs","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":537,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":572,"value":"___\n## Quick Manual\n\n- Each of the **Hand**, **Forearm**, and **Upper Arm Local Transform** sections has slider inputs.\n - **Hand Local Transform** moves the hand relative to its parent (the forearm).\n - **Forearm Local Transform** moves the forearm relative to its parent (the upper arm).\n - **Upper Arm Local Transform** moves the upper arm directly in world space, as it sits at the root of the scene graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":520,"value":"XYZ Axes are denoted by red, green, blue respectively.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":502,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":69,"value":"canvas = html`

\n\n

Hand Local Space

Forearm Local Space (Hand's Parent)

Upper Arm Local Space (Forearm's Parent)

World Space

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"### Helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":358,"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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"___\n## Materials and Meshes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":615,"value":"whiteMat = new THREE.MeshPhongMaterial({\n color: 0xf4f7f9, shininess: 8,\n side: THREE.DoubleSide,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":671,"value":"blackMat = new THREE.MeshPhongMaterial({\n color: 0x343739, shininess: 8,\n side: THREE.DoubleSide,\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"shoulderMeshObj = {\n const baseCyl = new THREE.CylinderGeometry(1.0, 1.2, 1.0, 32);\n const connectorCyl = new THREE.CylinderGeometry(0.95, 1.15, 1.0, 32);\n\n const baseCylObj = new THREE.Mesh(baseCyl, whiteMat);\n const connectorCylObj = new THREE.Mesh(connectorCyl, blackMat);\n\n baseCylObj.position.y = 0.5;\n connectorCylObj.position.y = 0.55;\n\n baseCylObj.castShadow = true; baseCylObj.receiveShadow = true;\n connectorCylObj.castShadow = true; connectorCylObj.receiveShadow = true;\n\n const gp = new THREE.Group();\n gp.add(baseCylObj); gp.add(connectorCylObj);\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":835,"value":"floorMeshObj = {\n const floorGeom = new THREE.CylinderGeometry( 2, 2, 0.1, 64 );\n const floorMat = new THREE.MeshPhongMaterial({\n color: 0x282828, shininess: 64,\n side: THREE.DoubleSide,\n });\n const floorObj = new THREE.Mesh(floorGeom, floorMat);\n floorObj.castShadow = true; floorObj.receiveShadow = true;\n return floorObj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"handOnForearmMeshObj = {\n const gp = new THREE.Group();\n\n gp.add(forearmMeshObj);\n\n handMeshObj.position.y = 2.8; handMeshObj.position.x = -0.65;\n handMeshObj.rotation.x = degToRad(transformationParams[\"wristR\"]);\n gp.add(handMeshObj);\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"forearmOnUpperArmMeshObj = {\n const gp = new THREE.Group();\n\n gp.add(upperArmMeshObj);\n \n handOnForearmMeshObj.position.y = 3.3; handOnForearmMeshObj.position.x = 0.85;\n handOnForearmMeshObj.rotation.x = degToRad(transformationParams[\"elbowR\"]);\n gp.add(handOnForearmMeshObj);\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":785,"value":"upperArmOnShoulderMeshObj = {\n const gp = new THREE.Group();\n\n gp.add(shoulderMeshObj);\n \n forearmOnUpperArmMeshObj.position.y = 1.0;\n forearmOnUpperArmMeshObj.rotation.order = \"YXZ\";\n forearmOnUpperArmMeshObj.rotation.x = degToRad(transformationParams[\"shoulderRP\"]);\n forearmOnUpperArmMeshObj.rotation.y = degToRad(transformationParams[\"shoulderRY\"]);\n gp.add(forearmOnUpperArmMeshObj);\n\n floorMeshObj.position.y = -0.05;\n gp.add(floorMeshObj);\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"sceneMeshObj = {\n const gp = new THREE.Group();\n\n gp.add(upperArmOnShoulderMeshObj);\n \n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"meshesAndLights = {\n const gp = new THREE.Group();\n\n gp.add(sceneMeshObj.clone());\n\n gp.add(originTarget.clone());\n gp.add(dirLight01.clone());\n gp.add(dirLight02.clone());\n gp.add(dirLight03.clone());\n gp.add(pointLight01.clone());\n gp.add(pointLight02.clone());\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"___\n## Scenes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":91,"value":"gridInHandLocalView = createGrid();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"gridInForearmLocalView = createGrid();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"gridInUpperArmLocalView = createGrid();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"axesInHandLocalView = {\n const gp = new THREE.Group();\n const axes = createAxesObj(2.2, 0.025);\n return gp.add(axes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":336,"value":"axesInForearmLocalView = {\n const gp = new THREE.Group();\n const axes = createAxesObj(3.6, 0.03);\n return gp.add(axes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"axesInUpperArmLocalView = {\n const gp = new THREE.Group();\n const axes = createAxesObj(4.2, 0.03);\n return gp.add(axes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"sceneHandLocal = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(meshesAndLights.clone());\n\n if (helper[\"axis\"]) { scene.add(axesInHandLocalView); }\n if (helper[\"3dGrid\"]) { scene.add(gridInHandLocalView); }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"sceneForearmLocal = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(meshesAndLights.clone());\n\n if (helper[\"axis\"]) { scene.add(axesInForearmLocalView); }\n if (helper[\"3dGrid\"]) { scene.add(gridInForearmLocalView); }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"sceneUpperArmLocal = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(meshesAndLights.clone());\n\n if (helper[\"axis\"]) { scene.add(axesInUpperArmLocalView); }\n if (helper[\"3dGrid\"]) { scene.add(gridInUpperArmLocalView); }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"sceneRender = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(meshesAndLights.clone());\n\n if (helper[\"axis\"]) { scene.add(createAxesObj(2.6, 0.03)); }\n if (helper[\"3dGrid\"]) { scene.add(createGrid()); }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"___\n## Cameras","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":506,"value":"resetCamera = () => {\n mutable renderCameraPosition = new THREE.Vector3(6, 6, 8);\n mutable renderCameraTarget = new THREE.Vector3(0, 1, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"handLocalCamera = {\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 return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"forearmLocalCamera = {\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 return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"upperArmLocalCamera = {\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 return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"mutable renderCameraPosition = new THREE.Vector3(6, 6, 8);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"mutable renderCameraTarget = new THREE.Vector3(0, 1, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"renderCamera = {\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(renderCameraPosition);\n cam.lookAt(renderCameraTarget);\n\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":113,"value":"originTarget = {\n const targetObject = new THREE.Object3D();\n targetObject.position.set(sceneMeshObj.position.clone());\n return targetObject;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"dirLight01 = {\n const light = new THREE.DirectionalLight(0xffffff, 0.8);\n light.position.set(1, 3, 3);\n light.target = originTarget;\n\n light.castShadow = true;\n light.shadow.camera.left = -6;\n light.shadow.camera.right = 6;\n light.shadow.camera.top = 8;\n light.shadow.camera.bottom = -8;\n light.shadow.mapSize.set(1024, 1024);\n light.shadow.bias = -0.0001; // anti-acne and Peter Pan\n\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"dirLight02 = {\n const light = new THREE.DirectionalLight(0xffffff, 0.8);\n light.position.set(-1, 2, -3);\n light.target = originTarget;\n\n light.castShadow = true;\n light.shadow.camera.left = -6;\n light.shadow.camera.right = 6;\n light.shadow.camera.top = 8;\n light.shadow.camera.bottom = -8;\n light.shadow.mapSize.set(1024, 1024);\n light.shadow.bias = -0.0002; // anti-acne and Peter Pan\n\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"dirLight03 = {\n const light = new THREE.DirectionalLight(0xffffff, 0.2);\n light.position.set(0, -1, 0);\n light.target = originTarget;\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"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":128,"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":80,"value":"___\n## Grid and Axis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"createGrid = (pos) => {\n return new THREE.GridHelper(16, 8, 0x888888, 0x666666);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"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":305,"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":37,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"renderer = {\n const canvas = document.getElementById(\"three-canvas\");\n const renderer = new THREE.WebGLRenderer({ canvas, context: canvas.getContext(\"webgl2\") });\n renderer.setSize(width * 2, height * 2);\n renderer.setPixelRatio(devicePixelRatio);\n\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"controls = {\n const controls = new THREE.OrbitControls(renderCamera, renderer.domElement);\n controls.target.copy(mutable renderCameraTarget);\n controls.enableDamping = true;\n controls.dampingFactor = 0.15;\n controls.rotateSpeed = 0.4;\n controls.addEventListener(\"change\", () => {\n // sync to global target\n mutable renderCameraPosition.copy(renderCamera.position);\n mutable renderCameraTarget.copy(controls.target);\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":468,"value":"// what a joke\nfunction updateLocalSpaceView({\n spaceObject,\n grid,\n axes,\n localCamera,\n renderCamPos,\n renderCamTarget\n}) {\n // inherit full world transform\n grid.matrix.copy(spaceObject.matrixWorld);\n axes.matrix.copy(spaceObject.matrixWorld);\n // gotta force stop this\n grid.matrixAutoUpdate = false;\n axes.matrixAutoUpdate = false;\n\n // camera goes into this space's local coordinates\n const worldMat = new THREE.Matrix4().copy(spaceObject.matrixWorld);\n // linear for up\n localCamera.up.set(0, 1, 0).applyMatrix3(new THREE.Matrix3().setFromMatrix4(worldMat)).normalize();\n // affine for position and lookAt\n localCamera.position.copy(renderCamPos).applyMatrix4(worldMat);\n localCamera.lookAt(renderCamTarget.clone().applyMatrix4(worldMat));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"// per-frame update\n// must be called every frame\nupdateObjects = () => {\n sceneMeshObj.updateWorldMatrix(false, true);\n \n // --- teapot space ---\n updateLocalSpaceView({\n spaceObject: handMeshObj,\n grid: gridInHandLocalView,\n axes: axesInHandLocalView,\n localCamera: handLocalCamera,\n renderCamPos: renderCameraPosition.clone(),\n renderCamTarget: renderCameraTarget.clone()\n });\n\n // --- table space ---\n updateLocalSpaceView({\n spaceObject: handOnForearmMeshObj,\n grid: gridInForearmLocalView,\n axes: axesInForearmLocalView,\n localCamera: forearmLocalCamera,\n renderCamPos: renderCameraPosition.clone(),\n renderCamTarget: renderCameraTarget.clone()\n });\n\n // --- floor space ---\n updateLocalSpaceView({\n spaceObject: forearmOnUpperArmMeshObj,\n grid: gridInUpperArmLocalView,\n axes: axesInUpperArmLocalView,\n localCamera: upperArmLocalCamera,\n renderCamPos: renderCameraPosition.clone(),\n renderCamTarget: renderCameraTarget.clone()\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"mainRender = () => {\n renderer.setScissorTest(true);\n\n // --- teapot space ---\n renderer.setViewport(0, height + 1, width - 1, height - 1);\n renderer.setScissor(0, height + 1, width - 1, height - 1);\n renderer.render(sceneHandLocal, handLocalCamera);\n\n // --- table space ---\n renderer.setViewport(width + 1, height + 1, width - 1, height - 1);\n renderer.setScissor(width + 1, height + 1, width - 1, height - 1);\n renderer.render(sceneForearmLocal, forearmLocalCamera);\n\n // --- floor space ---~\n renderer.setViewport(0, 0, width - 1, height - 1);\n renderer.setScissor(0, 0, width - 1, height - 1);\n renderer.render(sceneUpperArmLocal, upperArmLocalCamera);\n\n // --- final render viewport ---\n renderer.setViewport(width + 1, 0, width - 1, height - 1);\n renderer.setScissor(width + 1, 0, width - 1, height - 1);\n renderer.render(sceneRender, renderCamera);\n \n renderer.setScissorTest(false);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"___\n## Math Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":31,"value":"deg90inRad = Math.PI / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"rotY180 = new THREE.Quaternion().setFromAxisAngle(\n new THREE.Vector3(0, 1, 0),\n Math.PI\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":72,"value":"// Continuously updates\n{\n while (true) {\n controls.update();\n updateObjects();\n mainRender();\n yield null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"width = 450;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"height = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":476,"value":"degToRad = (deg) => { return deg * Math.PI / 180; }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"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":17,"value":"import { style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"