2a:null 2b:["$","title",null,{"children":"World Space to View Space | VIDI Intro Graphics | Observable"}] 30:T76e,## Geometric Transformations # World Space to View Space One of the most important, and often most confusing, steps in the World-to-Screen transformation pipeline is **world-to-view space transformation**. This step is performed by multiplying all objects in the scene by the **view matrix** associated with a camera. The view matrix answers only one question: - **Where is the camera, and how is it oriented?** Because of this, the view matrix simply: - translates the world so the camera is at the origin - rotates the world so the camera's axes align with the canonical X, Y, and Z axes. Mathematically, the view matrix is an **affine transform**. More specifically, it is a **rigid (Euclidean) transform**, meaning it consists only of rotation and translation. Rigid transforms preserve distances, angles, sizes, and the overall shape, so objects are not distorted in any way. The view matrix operates exactly like this, moving the entire world relative to the camera without changing the geometry itself. **The view matrix is the inverse of the camera's world transform, but it ignores any scaling that may be applied to the camera.** Although a camera node may technically carry a scale in a scene graph, **cameras conceptually have no size**. Good reasons why cameras do not have size: - A camera is not a physical object in the scene. It represents only a coordinate frame (position and orientation). - The view frustum (orthographic or perspective) is defined entirely by field of view, near and far planes, and aspect ratio. None of these depend on camera scale. As a result, graphics APIs typically ignore camera scaling when constructing the view matrix. Therefore, the view matrix **does not**: - encode any field-of-view information or aspect ratio of the camera - distinguish between orthographic and perspective projection Those details are handled later by the projection matrix.31:T404,viewof nearFarPlanes = { const div = html`

Near Plane:0 Far Plane:0

`; const inputs = div.querySelectorAll("input"); const spans = div.querySelectorAll("span"); function updateValues() { let near = +inputs[0].value; let far = +inputs[1].value; if (cameraType === "PERSPECTIVE") { near = Math.max(near, 0.01); inputs[0].value = near; } if (far < near) { far = near; inputs[1].value = far; } spans[0].textContent = near.toFixed(2); spans[1].textContent = far.toFixed(2); div.value = { near, far }; div.dispatchEvent(new CustomEvent("input")); } inputs.forEach(input => { input.addEventListener("input", updateValues); }); updateValues(); return div; } 32:T53f,tableMeshObj = { const cylGeom = new THREE.CylinderGeometry( 1, 1, 0.1, 64 ); const legGeom = new THREE.BoxGeometry(0.2, 0.6, 0.2); const tableMat = new THREE.MeshPhongMaterial({ color: 0x66443a, shininess: 2, side: THREE.DoubleSide, }); const cylObj = new THREE.Mesh(cylGeom, tableMat); const leg1Obj = new THREE.Mesh(legGeom, tableMat); const leg2Obj = new THREE.Mesh(legGeom, tableMat); const leg3Obj = new THREE.Mesh(legGeom, tableMat); const leg4Obj = new THREE.Mesh(legGeom, tableMat); cylObj.castShadow = true; cylObj.receiveShadow = true; leg1Obj.castShadow = true; leg1Obj.receiveShadow = true; leg2Obj.castShadow = true; leg2Obj.receiveShadow = true; leg3Obj.castShadow = true; leg3Obj.receiveShadow = true; leg4Obj.castShadow = true; leg4Obj.receiveShadow = true; cylObj.position.y = -0.15; leg1Obj.position.y = -0.5; leg1Obj.position.x = 0.5; leg1Obj.position.z = 0.5; leg2Obj.position.y = -0.5; leg2Obj.position.x = 0.5; leg2Obj.position.z = -0.5; leg3Obj.position.y = -0.5; leg3Obj.position.x = -0.5; leg3Obj.position.z = -0.5; leg4Obj.position.y = -0.5; leg4Obj.position.x = -0.5; leg4Obj.position.z = 0.5; const tableGp = new THREE.Group(); tableGp.add(cylObj); tableGp.add(leg1Obj); tableGp.add(leg2Obj); tableGp.add(leg3Obj); tableGp.add(leg4Obj); return tableGp; }33:Tb01,function createFrustumBoxObj(camera, zoom) { // zoom can be read from the camera param // but it is passed explicitly to keep Observable's reactivity happy const points = ((camera, zoom) => { if (camera.isPerspectiveCamera) { const near = camera.near; // 0.5; const far = camera.far; // 2.0; const fov = THREE.MathUtils.degToRad(camera.fov); // math is mathing! const nearHeight = 2 * Math.tan(fov / 2) * near; const nearWidth = nearHeight * camera.aspect; const farHeight = 2 * Math.tan(fov / 2) * far; const farWidth = farHeight * camera.aspect; const nearZ = near; const farZ = far; return [ // near new THREE.Vector3(-nearWidth/2, -nearHeight/2, nearZ), new THREE.Vector3( nearWidth/2, -nearHeight/2, nearZ), new THREE.Vector3( nearWidth/2, nearHeight/2, nearZ), new THREE.Vector3(-nearWidth/2, nearHeight/2, nearZ), // far new THREE.Vector3(-farWidth/2, -farHeight/2, farZ), new THREE.Vector3( farWidth/2, -farHeight/2, farZ), new THREE.Vector3( farWidth/2, farHeight/2, farZ), new THREE.Vector3(-farWidth/2, farHeight/2, farZ), ]; } else if (camera.isOrthographicCamera) { const near = camera.near; // 0.5; const far = camera.far; // 15.0; const zoomReci = 1 / zoom; const left = camera.left * zoomReci; const right = camera.right * zoomReci; const top = camera.top * zoomReci; const bottom = camera.bottom * zoomReci; return [ // near new THREE.Vector3(left, bottom, near), new THREE.Vector3(right, bottom, near), new THREE.Vector3(right, top, near), new THREE.Vector3(left, top, near), // far new THREE.Vector3(left, bottom, far), new THREE.Vector3(right, bottom, far), new THREE.Vector3(right, top, far), new THREE.Vector3(left, top, far), ]; } })(camera, zoom); const frustumIndices = [ 0, 1, 1, 2, 2, 3, 3, 0, // near 4, 5, 5, 6, 6, 7, 7, 4, // far 0, 4, 1, 5, 2, 6, 3, 7 // sides ]; const geometry = new THREE.BufferGeometry(); geometry.setFromPoints(points); geometry.setIndex(frustumIndices); // --- normal --- const material = new THREE.LineBasicMaterial({ color: 0xccffcc }); const line = new THREE.LineSegments(geometry, material); // --- dotted --- // const nonIndexedGeom = geometry.toNonIndexed(); // only god knows why // const material = new THREE.LineDashedMaterial({ // color: 0xccffcc, dashSize: 0.2, gapSize: 0.1, // }); // const line = new THREE.LineSegments(nonIndexedGeom, material); // line.computeLineDistances(); // god is here return line; } 34:T849,// per-frame update // must be called every frame updateObjects = () => { // forward in world space const forward = new THREE.Vector3(); renderCamera.getWorldDirection(forward); const renderCamPos = renderCamera.position; const lookAtWorld = renderCamPos.clone().add(forward); // all camera markers represent the renderCamera // ===== objects in world space viewport ===== cameraMarkerInWorld.position.copy(renderCamPos); cameraMarkerInWorld.lookAt(lookAtWorld); frustumBoxInWorld.position.copy(renderCamPos); frustumBoxInWorld.lookAt(lookAtWorld); // ===== objects in view space viewport ===== cameraMarkerInView.position.copy(renderCamPos); cameraMarkerInView.lookAt(lookAtWorld); cameraMarkerInView.updateMatrixWorld(); // force update to prevent viewCamera wobbling, don't wait frustumBoxInView.position.copy(renderCamPos); frustumBoxInView.lookAt(lookAtWorld); axesObjInView.position.copy(renderCamPos); axesObjInView.lookAt(lookAtWorld); gridInView.position.copy(renderCamPos); gridInView.lookAt(lookAtWorld); // Get marker's up vector in world space viewCamera.up.copy(new THREE.Vector3(0, 1, 0).applyQuaternion(cameraMarkerInView.quaternion)); // unlike cameras, three.js makes +Z looks at lookAt for generic Object3Ds // 180deg must be rotated along Y to fix sign-flipped X and Z viewCamera.position.copy(cameraMarkerInView.localToWorld(viewCamPosOffset.clone().applyQuaternion(rotY180))); viewCamera.lookAt(cameraMarkerInView.localToWorld(viewCamLookAtOffset.clone().applyQuaternion(rotY180))); // ACTUALLY, this is a better way to do this BUT that would require // updating the targets of all directional lights every frame. // which means, I'm not doing it! // renderCamera.updateMatrixWorld(true); // meshesAndLightsInView.matrix.copy(renderCamera.matrixWorldInverse); // meshesAndLightsInView.matrix.decompose( // meshesAndLightsInView.position, // meshesAndLightsInView.quaternion, // meshesAndLightsInView.scale // ); // ===== objects in render viewport ===== // looks like there's nothing to update, huh }35:[] 2e:{"id":"54ef25d7935dd64f","slug":"world-to-view","title":"World Space to View Space","thumbnail":"1cbc1913a158e43ef7265e18b45f385bb59d3426cbb94b93bcc24cc8c07fef98","access_level":"public","create_time":"$D2025-12-15T12:08:58.965Z","update_time":"$D2026-01-14T07:24:35.244Z","view_time":null,"first_public_time":"$D2025-12-17T04:18:32.158Z","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":1111,"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":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"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":"World Space to View Space","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":766,"value":"___\n## Quick Manual\n\n- Switch between **Camera Types** to visualize the frustums for each camera.\n- In the **Helpers** section, you can toggle the *Axes*, *3D Grid* and *View Frustum* buttons to show or hide the components in both the **World Space** and **View Space** viewports.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":771,"value":"XYZ Axes are denoted by red, green, blue respectively.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":999,"value":"### Camera Type:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":894,"value":"viewof cameraType = {\n const form = html``;\n\n form.value = form.mode.value;\n\n form.addEventListener(\"change\", () => {\n form.value = form.mode.value;\n form.dispatchEvent(new CustomEvent(\"input\")); // notify value change\n });\n\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1006,"value":"viewof fovValue = {\n const div = html`

\n Field of View (FOV):\n \n °\n \n

`;\n\n const input = div.querySelector(\"input\");\n const span = div.querySelector(\"span\");\n\n input.value = mutable fov;\n span.textContent = mutable fov;\n\n function updateDisabled() {\n const shouldDisable = cameraType === \"ORTHOGRAPHIC\";\n input.disabled = shouldDisable;\n\n updateFov()\n }\n\n function updateFov() {\n mutable fov = +input.value;\n span.textContent = mutable fov;\n div.value = mutable fov;\n\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n\n input.addEventListener(\"input\", updateFov);\n viewof cameraType.addEventListener(\"input\", updateDisabled);\n updateDisabled();\n\n div.value = mutable fov;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":24,"value":"canvas = html`

\n\n

World Space

View Space

Render

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":747,"value":"### Helpers:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":732,"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":563,"value":"___\n## Meshes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":572,"value":"teapotMeshObj = {\n const teapotGeom = await teapotGeometry;\n const teapotMat = new THREE.MeshPhongMaterial({\n color: 0xf4f7f9, shininess: 128,\n side: THREE.DoubleSide,\n });\n const teapotObj = new THREE.Mesh(teapotGeom, teapotMat);\n teapotObj.castShadow = true;\n teapotObj.receiveShadow = true;\n teapotObj.position.y = 0.4;\n return teapotObj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"floorMeshObj = {\n const floorGeom = new THREE.CylinderGeometry( 5, 5, 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 floorObj.position.y = -0.85;\n return floorObj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"worldBoxMeshObj = {\n // const worldBoxGeom = new THREE.CylinderGeometry( 30, 30, 60, 128 );\n // const worldBoxMat = new THREE.MeshPhongMaterial({\n // color: 0xffffff, shininess: 0,\n // side: THREE.DoubleSide,\n // });\n // const worldBoxObj = new THREE.Mesh(worldBoxGeom, worldBoxMat);\n // return worldBoxObj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"sceneMeshObj = {\n const gp = new THREE.Group();\n\n gp.add(teapotMeshObj);\n\n gp.add(tableMeshObj);\n\n gp.add(floorMeshObj);\n\n // gp.add(worldBoxMeshObj); // meh\n \n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"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":112,"value":"___\n## Scenes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":662,"value":"frustumBoxInWorld = createFrustumBoxObj(renderCamera, renderCameraZoom);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":727,"value":"frustumBoxInView = createFrustumBoxObj(renderCamera, renderCameraZoom);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"cameraMarkerInWorld = createCameraMarker(renderCamera);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"cameraMarkerInView = createCameraMarker(renderCamera);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":358,"value":"axesObjInView = {\n const gp = new THREE.Group();\n const axes = createAxesObj(1.2, 0.02);\n axes.rotation.y = deg90inRad * 2; // don't ask. this has to be done!\n return gp.add(axes);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"gridInView = createGrid();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"sceneWorld = {\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(3.0, 0.06)); }\n if (helper[\"3dGrid\"]) { scene.add(createGrid()); }\n\n scene.add(cameraMarkerInWorld);\n \n if (helper[\"frustum\"]) { scene.add(frustumBoxInWorld); }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"sceneView = {\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(axesObjInView); }\n if (helper[\"3dGrid\"]) { scene.add(gridInView); }\n\n scene.add(cameraMarkerInView);\n if (helper[\"frustum\"]) { scene.add(frustumBoxInView); }\n \n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"sceneRender = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n\n scene.add(meshesAndLights.clone());\n if (helper[\"3dGrid\"]) { scene.add(createGrid()); }\n\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"___\n## Cameras","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":617,"value":"resetCamera = () => {\n mutable renderCameraPosition = new THREE.Vector3(3.2, 0, 2.6);\n mutable renderCameraTarget = new THREE.Vector3(0, 0, 0);\n mutable renderCameraZoom = 1.0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"worldCamera = {\n const pos = new THREE.Vector3(9, 6.5, 9);\n const target = new THREE.Vector3(0, 1, 0);\n\n const fov = 40;\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(pos);\n cam.lookAt(target);\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"viewCamPosOffset = new THREE.Vector3(3.2, 1.6, 3.8);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"viewCamLookAtOffset = new THREE.Vector3(0, 0, -5);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"viewCamera = {\n const fov = 40;\n const aspect = width / height;\n const near = 0.01;\n const far = 1000;\n const cam = new THREE.PerspectiveCamera(fov, aspect, near, far);\n\n return cam;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":913,"value":"mutable renderCameraPosition = new THREE.Vector3(2, 2, 3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"mutable renderCameraTarget = new THREE.Vector3(0, 0, 0);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":950,"value":"mutable renderCameraZoom = 1.0;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"renderCamera = {\n const aspect = width / height;\n let cam;\n\n const near = nearFarPlanes[\"near\"];\n const far = nearFarPlanes[\"far\"];\n\n if (cameraType === \"ORTHOGRAPHIC\") {\n const size = 2;\n\n cam = new THREE.OrthographicCamera(\n -size * aspect,\n size * aspect,\n size,\n -size,\n near,\n far\n );\n cam.zoom = renderCameraZoom;\n cam.updateProjectionMatrix();\n } else {\n cam = new THREE.PerspectiveCamera(fovValue, aspect, near, far);\n }\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":122,"value":"___\n## Light Sources","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":126,"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":129,"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 = 6;\n light.shadow.camera.bottom = -6;\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":132,"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 = 6;\n light.shadow.camera.bottom = -6;\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":476,"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":135,"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":138,"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":151,"value":"___\n## Camera Marker, Axis, Grid and Frustum Box","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":187,"value":"function createCameraMarker(camera) {\n\n const gp = new THREE.Group();\n \n const material = new THREE.MeshPhongMaterial({\n color: 0xcccccc, shininess: 16,\n side: THREE.DoubleSide,\n });\n\n const camBodyGeom = new THREE.BoxGeometry(0.26, 0.4, 0.6);\n const coneGeom = new THREE.ConeGeometry(0.15, 0.6, 12);\n const cylinderGeom = new THREE.CylinderGeometry(0.2, 0.2, 0.1, 12)\n \n const camBody = new THREE.Mesh(camBodyGeom, material);\n\n const cone = new THREE.Mesh(coneGeom, material);\n cone.rotation.x = -deg90inRad;\n cone.position.z = 0.2;\n\n const fCylinder = new THREE.Mesh(cylinderGeom, material);\n fCylinder.rotation.z = -deg90inRad;\n fCylinder.position.y = 0.35;\n fCylinder.position.z = 0.2;\n\n const bCylinder = new THREE.Mesh(cylinderGeom, material);\n bCylinder.rotation.z = -deg90inRad;\n bCylinder.position.y = 0.35;\n bCylinder.position.z = -0.2;\n \n gp.add(camBody);\n gp.add(cone);\n gp.add(fCylinder);\n gp.add(bCylinder);\n\n return gp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"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":145,"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":304,"value":"createGrid = () => {\n return new THREE.GridHelper( 16, 12, 0x888888, 0x666666 );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"___\n## THREE.js Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":46,"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 * 1.5);\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":49,"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 // god won't like this. I'm pretty sure\n controls.addEventListener(\"end\", () => {\n // sync ortho zoom\n if (renderCamera.isOrthographicCamera) {\n mutable renderCameraZoom = renderCamera.zoom;\n }\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":191,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":52,"value":"mainRender = () => {\n renderer.setScissorTest(true);\n \n // --- world space viewport ---\n renderer.setViewport(0, height + 1, width / 2 - 1, height / 2 - 1);\n renderer.setScissor(0, height + 1, width / 2 - 1, height / 2 - 1);\n renderer.render(sceneWorld, worldCamera);\n \n // --- view space viewport ---\n renderer.setViewport(width / 2 + 1, height + 1, width / 2 - 1, height / 2 - 1);\n renderer.setScissor(width / 2 + 1, height + 1, width / 2 - 1, height / 2 - 1);\n renderer.render(sceneView, viewCamera);\n\n // --- final render viewport ---\n renderer.setViewport(0, 0, width, height - 1);\n renderer.setScissor(0, 0, width, height - 1);\n renderer.render(sceneRender, renderCamera);\n \n renderer.setScissorTest(false);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1028,"value":"___\n## Input States","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1033,"value":"mutable fov = 60;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"___\n## Math Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":153,"value":"deg90inRad = Math.PI / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":853,"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":13,"value":"___\n## Utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"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":18,"value":"width = 800;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"height = 450;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"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":115,"value":"teapotGeometry = new THREE.TeapotGeometry( 0.5, 8 );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import { style } from \"@vidi-intro-graphics/resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"style;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2f:"$2e:body"