Three.js BoxGeometry Demo

[{"id":"ac7f296b-4dc1-4539-924c-3c34ff61d7fe","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Core Concept","styles":{}}],"children":[]},{"id":"eb9abbd5-8771-48d2-9309-fb98c332fc7e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Every visible object in Three.js typically follows this structure:","styles":{}}],"children":[]},{"id":"510ce7bc-26fe-4942-874c-3795a813818b","type":"columnList","props":{},"children":[{"id":"7be5900f-15c2-4fc1-b5b0-aa4249a80339","type":"column","props":{"width":1},"children":[{"id":"b7c0ea1a-6ab5-4dfd-a389-95f5a8ce1659","type":"procode","props":{"code":"const geometry = new THREE.BoxGeometry(1, 1, 1)\nconst material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })\nconst mesh = new THREE.Mesh(geometry, material)\n\nscene.add(mesh)","language":"javascript","filename":"","files":"[{\"id\":\"ge32s6471\",\"name\":\"code\",\"code\":\"const geometry = new THREE.BoxGeometry(1, 1, 1)\\nconst material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })\\nconst mesh = new THREE.Mesh(geometry, material)\\n\\nscene.add(mesh)\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]}]},{"id":"8cff2c79-509b-4c92-9fa0-71f3f57788cd","type":"column","props":{"width":1},"children":[{"id":"86f85f9d-744a-4000-87ea-da1172f28a0b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"How it works","styles":{}}],"children":[]},{"id":"ec44c89f-a8f7-48a8-bbca-52660af359b4","type":"table","props":{"textColor":"default"},"content":{"type":"tableContent","columnWidths":[null,null],"headerRows":1,"rows":[{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Part","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Role","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Geometry","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines the ","styles":{}},{"type":"text","text":"shape","styles":{"bold":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Material","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Defines the ","styles":{}},{"type":"text","text":"appearance","styles":{"bold":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]},{"cells":[{"type":"tableCell","content":[{"type":"text","text":"Mesh","styles":{"code":true}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}},{"type":"tableCell","content":[{"type":"text","text":"Combines geometry + material into a renderable object","styles":{}}],"props":{"colspan":1,"rowspan":1,"backgroundColor":"default","textColor":"default","textAlignment":"left"}}]}]},"children":[]}]}]},{"id":"9c654987-3e48-4d92-97cd-da621e67be31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d6ba3cd8-071b-450e-8400-2341f90d6cdf","type":"divider","props":{},"children":[]},{"id":"16caaa85-ffa7-481c-a6a9-86eca37ca0e5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Available Primitives","styles":{}}],"children":[]},{"id":"5af4f740-30c7-4e85-8ed3-c6e4002155d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Three.js provides a wide range of primitives:","styles":{}}],"children":[]},{"id":"3c40cd52-1086-49a8-b308-5c0add2fc6ec","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Basic Shapes","styles":{}}],"children":[]},{"id":"191183d8-6422-4ca7-9874-0522df56a4cb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"49673586-1f90-47cd-9dcf-5560fc66a2cb","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8a49306b-02e0-457c-871b-1f6ab1a5b87e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"30865348-4274-4bb5-81db-68db661f1032","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"BoxGeometry","styles":{"code":true}},{"type":"text","text":" → cube / rectangular prism","styles":{}}],"children":[]},{"id":"5cc6611a-5210-4f62-84ee-cfea80b317af","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js BoxGeometry Demo\\n \\n \\n \\n

\\n

Three.js Core Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n\\n near 0.1\\n \\n\\n far 100\\n \\n\\n position.x 2\\n \\n\\n position.y 2\\n \\n\\n position.z 2\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n\\n directional intensity 1.5\\n \\n\\n directional pos.x 5\\n \\n\\n directional pos.y 10\\n \\n\\n directional pos.z 7\\n \\n

\\n\\n \\n

\\n

BoxGeometry

\\n width 1\\n \\n\\n height 1\\n \\n\\n depth 1\\n \\n\\n widthSegments 1\\n \\n\\n heightSegments 1\\n \\n\\n depthSegments 1\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n\\n metalness 0\\n \\n\\n roughness 1\\n \\n\\n \\n wireframe\\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 100,\\n);\\ncamera.position.set(2, 2, 2);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(5, 10, 7);\\nscene.add(dirLight);\\n\\n// BoxGeometry + Material + Mesh\\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\\nconst material = new THREE.MeshStandardMaterial({\\n color: 0xe67e22,\\n wireframe: true,\\n});\\nconst cube = new THREE.Mesh(geometry, material);\\nscene.add(cube);\\n\\n// --- HTML Input Handlers ---\\n\\n// Helper: bind a range slider to update a display span and call a callback\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\nbindRange(\\\"dirX\\\", (v) => {\\n dirLight.position.x = v;\\n});\\nbindRange(\\\"dirY\\\", (v) => {\\n dirLight.position.y = v;\\n});\\nbindRange(\\\"dirZ\\\", (v) => {\\n dirLight.position.z = v;\\n});\\n\\n// BoxGeometry\\nconst geoInputs = [\\n \\\"width\\\",\\n \\\"height\\\",\\n \\\"depth\\\",\\n \\\"widthSegments\\\",\\n \\\"heightSegments\\\",\\n \\\"depthSegments\\\",\\n];\\ngeoInputs.forEach((id) => {\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry);\\n});\\n\\nfunction updateGeometry() {\\n const w = parseFloat(document.getElementById(\\\"width\\\").value);\\n const h = parseFloat(document.getElementById(\\\"height\\\").value);\\n const d = parseFloat(document.getElementById(\\\"depth\\\").value);\\n const ws = parseInt(document.getElementById(\\\"widthSegments\\\").value);\\n const hs = parseInt(document.getElementById(\\\"heightSegments\\\").value);\\n const ds = parseInt(document.getElementById(\\\"depthSegments\\\").value);\\n\\n document.getElementById(\\\"v-width\\\").textContent = w;\\n document.getElementById(\\\"v-height\\\").textContent = h;\\n document.getElementById(\\\"v-depth\\\").textContent = d;\\n document.getElementById(\\\"v-widthSegments\\\").textContent = ws;\\n document.getElementById(\\\"v-heightSegments\\\").textContent = hs;\\n document.getElementById(\\\"v-depthSegments\\\").textContent = ds;\\n\\n cube.geometry.dispose();\\n cube.geometry = new THREE.BoxGeometry(w, h, d, ws, hs, ds);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n cube.rotation.y += 0.01;\\n renderer.render(scene, camera);\\n}\\nanimate();\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"6e94e952-b830-4664-aa2a-5b21c0ca1ab1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"340ec8d4-6cf4-41e1-9dd9-7c7430018944","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"SphereGeometry","styles":{"code":true}},{"type":"text","text":" → sphere","styles":{}}],"children":[]},{"id":"e4045574-6848-4b58-b363-dee5fd90bc72","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js SphereGeometry Demo\\n \\n \\n \\n

\\n

Three.js Core Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n\\n near 0.1\\n \\n\\n far 100\\n \\n\\n position.x 2\\n \\n\\n position.y 2\\n \\n\\n position.z 2\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n\\n directional intensity 1.5\\n \\n\\n directional pos.x 5\\n \\n\\n directional pos.y 10\\n \\n\\n directional pos.z 7\\n \\n

\\n\\n \\n

\\n

SphereGeometry

\\n radius 1\\n \\n\\n widthSegments 16\\n \\n\\n heightSegments 12\\n \\n\\n phiStart 0\\n \\n\\n phiLength 6.28\\n \\n\\n thetaStart 0\\n \\n\\n thetaLength 3.14\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n\\n metalness 0\\n \\n\\n roughness 1\\n \\n\\n \\n wireframe\\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 100,\\n);\\ncamera.position.set(2, 2, 2);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(5, 10, 7);\\nscene.add(dirLight);\\n\\n// SphereGeometry + Material + Mesh\\nconst geometry = new THREE.SphereGeometry(1, 16, 12);\\nconst material = new THREE.MeshStandardMaterial({\\n color: 0xe67e22,\\n wireframe: true,\\n side: THREE.DoubleSide,\\n});\\nconst sphere = new THREE.Mesh(geometry, material);\\nscene.add(sphere);\\n\\n// --- HTML Input Handlers ---\\n\\n// Helper: bind a range slider to update a display span and call a callback\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\nbindRange(\\\"dirX\\\", (v) => {\\n dirLight.position.x = v;\\n});\\nbindRange(\\\"dirY\\\", (v) => {\\n dirLight.position.y = v;\\n});\\nbindRange(\\\"dirZ\\\", (v) => {\\n dirLight.position.z = v;\\n});\\n\\n// SphereGeometry\\nconst geoInputs = [\\n \\\"radius\\\",\\n \\\"widthSegments\\\",\\n \\\"heightSegments\\\",\\n \\\"phiStart\\\",\\n \\\"phiLength\\\",\\n \\\"thetaStart\\\",\\n \\\"thetaLength\\\",\\n];\\ngeoInputs.forEach((id) => {\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry);\\n});\\n\\nfunction updateGeometry() {\\n const r = parseFloat(document.getElementById(\\\"radius\\\").value);\\n const ws = parseInt(document.getElementById(\\\"widthSegments\\\").value);\\n const hs = parseInt(document.getElementById(\\\"heightSegments\\\").value);\\n const ps = parseFloat(document.getElementById(\\\"phiStart\\\").value);\\n const pl = parseFloat(document.getElementById(\\\"phiLength\\\").value);\\n const ts = parseFloat(document.getElementById(\\\"thetaStart\\\").value);\\n const tl = parseFloat(document.getElementById(\\\"thetaLength\\\").value);\\n\\n document.getElementById(\\\"v-radius\\\").textContent = r;\\n document.getElementById(\\\"v-widthSegments\\\").textContent = ws;\\n document.getElementById(\\\"v-heightSegments\\\").textContent = hs;\\n document.getElementById(\\\"v-phiStart\\\").textContent = ps;\\n document.getElementById(\\\"v-phiLength\\\").textContent = pl;\\n document.getElementById(\\\"v-thetaStart\\\").textContent = ts;\\n document.getElementById(\\\"v-thetaLength\\\").textContent = tl;\\n\\n sphere.geometry.dispose();\\n sphere.geometry = new THREE.SphereGeometry(r, ws, hs, ps, pl, ts, tl);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n sphere.rotation.y += 0.01;\\n renderer.render(scene, camera);\\n}\\nanimate();\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"13a18e21-298c-4f4f-9084-e09eccad0e49","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9dc7a335-6296-4f12-bfd3-fd3c1a8fb6d6","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"PlaneGeometry","styles":{"code":true}},{"type":"text","text":" → flat surface","styles":{}}],"children":[]},{"id":"2976b56f-38ed-4c46-8d27-2209c1034323","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js PlaneGeometry Demo\\n \\n \\n \\n

\\n

Three.js Core Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n\\n near 0.1\\n \\n\\n far 100\\n \\n\\n position.x 2\\n \\n\\n position.y 2\\n \\n\\n position.z 2\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n\\n directional intensity 1.5\\n \\n\\n directional pos.x 5\\n \\n\\n directional pos.y 10\\n \\n\\n directional pos.z 7\\n \\n

\\n\\n \\n

\\n

PlaneGeometry

\\n width 1\\n \\n\\n height 1\\n \\n\\n widthSegments 1\\n \\n\\n heightSegments 1\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n\\n metalness 0\\n \\n\\n roughness 1\\n \\n\\n \\n wireframe\\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 100,\\n);\\ncamera.position.set(2, 2, 2);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(5, 10, 7);\\nscene.add(dirLight);\\n\\n// PlaneGeometry + Material + Mesh\\nconst geometry = new THREE.PlaneGeometry(1, 1, 1, 1);\\nconst material = new THREE.MeshStandardMaterial({\\n color: 0xe67e22,\\n wireframe: true,\\n side: THREE.DoubleSide,\\n});\\nconst plane = new THREE.Mesh(geometry, material);\\nscene.add(plane);\\n\\n// --- HTML Input Handlers ---\\n\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\nbindRange(\\\"dirX\\\", (v) => {\\n dirLight.position.x = v;\\n});\\nbindRange(\\\"dirY\\\", (v) => {\\n dirLight.position.y = v;\\n});\\nbindRange(\\\"dirZ\\\", (v) => {\\n dirLight.position.z = v;\\n});\\n\\n// PlaneGeometry\\nconst geoInputs = [\\\"width\\\", \\\"height\\\", \\\"widthSegments\\\", \\\"heightSegments\\\"];\\ngeoInputs.forEach((id) => {\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry);\\n});\\n\\nfunction updateGeometry() {\\n const w = parseFloat(document.getElementById(\\\"width\\\").value);\\n const h = parseFloat(document.getElementById(\\\"height\\\").value);\\n const ws = parseInt(document.getElementById(\\\"widthSegments\\\").value);\\n const hs = parseInt(document.getElementById(\\\"heightSegments\\\").value);\\n\\n document.getElementById(\\\"v-width\\\").textContent = w;\\n document.getElementById(\\\"v-height\\\").textContent = h;\\n document.getElementById(\\\"v-widthSegments\\\").textContent = ws;\\n document.getElementById(\\\"v-heightSegments\\\").textContent = hs;\\n\\n plane.geometry.dispose();\\n plane.geometry = new THREE.PlaneGeometry(w, h, ws, hs);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n plane.rotation.y += 0.01;\\n renderer.render(scene, camera);\\n}\\nanimate();\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"d7b3e31f-332d-400d-84ba-a140a194849a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4375fed5-783e-4855-ad30-6780a74219ed","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CircleGeometry","styles":{"code":true}},{"type":"text","text":" → flat circle","styles":{}}],"children":[]},{"id":"85b644b6-3940-48a5-bbbe-2ac3cf0ae81a","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js CircleGeometry Demo\\n \\n \\n \\n

\\n

Three.js Core Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n near 0.1\\n \\n far 100\\n \\n position.x 2\\n \\n position.y 2\\n \\n position.z 2\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n directional intensity 1.5\\n \\n directional pos.x 5\\n \\n directional pos.y 10\\n \\n directional pos.z 7\\n \\n

\\n\\n \\n

\\n

CircleGeometry

\\n radius 1\\n \\n segments 32\\n \\n thetaStart 0\\n \\n thetaLength 6.28\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n metalness 0\\n \\n roughness 1\\n \\n \\n wireframe\\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 100,\\n);\\ncamera.position.set(2, 2, 2);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(5, 10, 7);\\nscene.add(dirLight);\\n\\n// CircleGeometry + Material + Mesh\\nconst geometry = new THREE.CircleGeometry(1, 32);\\nconst material = new THREE.MeshStandardMaterial({\\n color: 0xe67e22,\\n wireframe: true,\\n side: THREE.DoubleSide,\\n});\\nconst circle = new THREE.Mesh(geometry, material);\\nscene.add(circle);\\n\\n// --- HTML Input Handlers ---\\n\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\nbindRange(\\\"dirX\\\", (v) => {\\n dirLight.position.x = v;\\n});\\nbindRange(\\\"dirY\\\", (v) => {\\n dirLight.position.y = v;\\n});\\nbindRange(\\\"dirZ\\\", (v) => {\\n dirLight.position.z = v;\\n});\\n\\n// CircleGeometry\\nconst geoInputs = [\\\"radius\\\", \\\"segments\\\", \\\"thetaStart\\\", \\\"thetaLength\\\"];\\ngeoInputs.forEach((id) => {\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry);\\n});\\n\\nfunction updateGeometry() {\\n const r = parseFloat(document.getElementById(\\\"radius\\\").value);\\n const s = parseInt(document.getElementById(\\\"segments\\\").value);\\n const ts = parseFloat(document.getElementById(\\\"thetaStart\\\").value);\\n const tl = parseFloat(document.getElementById(\\\"thetaLength\\\").value);\\n\\n document.getElementById(\\\"v-radius\\\").textContent = r;\\n document.getElementById(\\\"v-segments\\\").textContent = s;\\n document.getElementById(\\\"v-thetaStart\\\").textContent = ts;\\n document.getElementById(\\\"v-thetaLength\\\").textContent = tl;\\n\\n circle.geometry.dispose();\\n circle.geometry = new THREE.CircleGeometry(r, s, ts, tl);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n circle.rotation.y += 0.01;\\n renderer.render(scene, camera);\\n}\\nanimate();\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.html","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"e6e3d361-156e-4e3e-8a73-457d59460097","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7e36c57c-ceb2-4b9f-8313-ce08b3f6c64b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"ConeGeometry","styles":{"code":true}},{"type":"text","text":" → cone","styles":{}}],"children":[]},{"id":"b78c4afa-094a-4985-886f-5bb5a850a819","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js ConeGeometry Demo\\n \\n \\n \\n

\\n

Three.js Core Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n near 0.1\\n \\n far 100\\n \\n position.x 2\\n \\n position.y 2\\n \\n position.z 2\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n directional intensity 1.5\\n \\n directional pos.x 5\\n \\n directional pos.y 10\\n \\n directional pos.z 7\\n \\n

\\n\\n \\n

\\n

ConeGeometry

\\n radius 1\\n \\n\\n height 2\\n \\n\\n radialSegments 32\\n \\n\\n heightSegments 1\\n \\n\\n openEnded \\n\\n thetaStart 0\\n \\n\\n thetaLength 6.28\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n metalness 0\\n \\n roughness 1\\n \\n \\n wireframe\\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n\\n\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 100,\\n);\\ncamera.position.set(3, 3, 3);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(5, 10, 7);\\nscene.add(dirLight);\\n\\n// ConeGeometry + Material + Mesh\\n// radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength\\nconst geometry = new THREE.ConeGeometry(1, 2, 32, 1, false, 0, Math.PI * 2);\\nconst material = new THREE.MeshStandardMaterial({\\n color: 0xe67e22,\\n wireframe: true,\\n side: THREE.DoubleSide,\\n});\\nconst cone = new THREE.Mesh(geometry, material);\\nscene.add(cone);\\n\\n// --- HTML Input Handlers ---\\n\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\nbindRange(\\\"dirX\\\", (v) => {\\n dirLight.position.x = v;\\n});\\nbindRange(\\\"dirY\\\", (v) => {\\n dirLight.position.y = v;\\n});\\nbindRange(\\\"dirZ\\\", (v) => {\\n dirLight.position.z = v;\\n});\\n\\n// ConeGeometry\\nconst geoInputs = [\\n \\\"radius\\\",\\n \\\"height\\\",\\n \\\"radialSegments\\\",\\n \\\"heightSegments\\\",\\n \\\"thetaStart\\\",\\n \\\"thetaLength\\\",\\n];\\ngeoInputs.forEach((id) => {\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry);\\n});\\ndocument.getElementById(\\\"openEnded\\\").addEventListener(\\\"change\\\", updateGeometry);\\n\\nfunction updateGeometry() {\\n const r = parseFloat(document.getElementById(\\\"radius\\\").value);\\n const h = parseFloat(document.getElementById(\\\"height\\\").value);\\n const rs = parseInt(document.getElementById(\\\"radialSegments\\\").value);\\n const hs = parseInt(document.getElementById(\\\"heightSegments\\\").value);\\n const oe = document.getElementById(\\\"openEnded\\\").checked;\\n const ts = parseFloat(document.getElementById(\\\"thetaStart\\\").value);\\n const tl = parseFloat(document.getElementById(\\\"thetaLength\\\").value);\\n\\n document.getElementById(\\\"v-radius\\\").textContent = r;\\n document.getElementById(\\\"v-height\\\").textContent = h;\\n document.getElementById(\\\"v-radialSegments\\\").textContent = rs;\\n document.getElementById(\\\"v-heightSegments\\\").textContent = hs;\\n document.getElementById(\\\"v-thetaStart\\\").textContent = ts;\\n document.getElementById(\\\"v-thetaLength\\\").textContent = tl;\\n\\n cone.geometry.dispose();\\n cone.geometry = new THREE.ConeGeometry(r, h, rs, hs, oe, ts, tl);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n cone.rotation.y += 0.01;\\n cone.rotation.x += 0.005; // Added slight X rotation to view top/bottom better\\n renderer.render(scene, camera);\\n}\\nanimate();\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"6dce1b5a-d74f-47e5-a95e-c858f18dd468","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b84240e5-54e9-4ec5-bd74-f3526715dca3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"317d3477-ebe1-4c00-b06f-904d665a90d5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"CylinderGeometry","styles":{"code":true}},{"type":"text","text":" → cylinder","styles":{}}],"children":[]},{"id":"135a193e-1995-4fc6-b75c-2bda3a9cad30","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js CylinderGeometry Demo\\n \\n \\n \\n

\\n

Three.js Core Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n near 0.1\\n \\n far 100\\n \\n position.x 3\\n \\n position.y 3\\n \\n position.z 3\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n directional intensity 1.5\\n \\n directional pos.x 5\\n \\n directional pos.y 10\\n \\n directional pos.z 7\\n \\n

\\n\\n \\n

\\n

CylinderGeometry

\\n radiusTop 1\\n \\n\\n radiusBottom 1\\n \\n\\n height 2\\n \\n\\n radialSegments 32\\n \\n\\n heightSegments 1\\n \\n\\n openEnded \\n\\n thetaStart 0\\n \\n\\n thetaLength 6.28\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n metalness 0\\n \\n roughness 1\\n \\n \\n wireframe\\n \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\n\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 100,\\n);\\ncamera.position.set(3, 3, 3);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(5, 10, 7);\\nscene.add(dirLight);\\n\\n// CylinderGeometry + Material + Mesh\\n// radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength\\nconst geometry = new THREE.CylinderGeometry(\\n 1,\\n 1,\\n 2,\\n 32,\\n 1,\\n false,\\n 0,\\n Math.PI * 2,\\n);\\nconst material = new THREE.MeshStandardMaterial({\\n color: 0x9b59b6,\\n wireframe: true,\\n side: THREE.DoubleSide,\\n});\\nconst cylinder = new THREE.Mesh(geometry, material);\\nscene.add(cylinder);\\n\\n// --- HTML Input Handlers ---\\n\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\nbindRange(\\\"dirX\\\", (v) => {\\n dirLight.position.x = v;\\n});\\nbindRange(\\\"dirY\\\", (v) => {\\n dirLight.position.y = v;\\n});\\nbindRange(\\\"dirZ\\\", (v) => {\\n dirLight.position.z = v;\\n});\\n\\n// CylinderGeometry\\nconst geoInputs = [\\n \\\"radiusTop\\\",\\n \\\"radiusBottom\\\",\\n \\\"height\\\",\\n \\\"radialSegments\\\",\\n \\\"heightSegments\\\",\\n \\\"thetaStart\\\",\\n \\\"thetaLength\\\",\\n];\\ngeoInputs.forEach((id) => {\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry);\\n});\\ndocument.getElementById(\\\"openEnded\\\").addEventListener(\\\"change\\\", updateGeometry);\\n\\nfunction updateGeometry() {\\n const rt = parseFloat(document.getElementById(\\\"radiusTop\\\").value);\\n const rb = parseFloat(document.getElementById(\\\"radiusBottom\\\").value);\\n const h = parseFloat(document.getElementById(\\\"height\\\").value);\\n const rs = parseInt(document.getElementById(\\\"radialSegments\\\").value);\\n const hs = parseInt(document.getElementById(\\\"heightSegments\\\").value);\\n const oe = document.getElementById(\\\"openEnded\\\").checked;\\n const ts = parseFloat(document.getElementById(\\\"thetaStart\\\").value);\\n const tl = parseFloat(document.getElementById(\\\"thetaLength\\\").value);\\n\\n document.getElementById(\\\"v-radiusTop\\\").textContent = rt;\\n document.getElementById(\\\"v-radiusBottom\\\").textContent = rb;\\n document.getElementById(\\\"v-height\\\").textContent = h;\\n document.getElementById(\\\"v-radialSegments\\\").textContent = rs;\\n document.getElementById(\\\"v-heightSegments\\\").textContent = hs;\\n document.getElementById(\\\"v-thetaStart\\\").textContent = ts;\\n document.getElementById(\\\"v-thetaLength\\\").textContent = tl;\\n\\n cylinder.geometry.dispose();\\n cylinder.geometry = new THREE.CylinderGeometry(rt, rb, h, rs, hs, oe, ts, tl);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n cylinder.rotation.y += 0.01;\\n cylinder.rotation.x += 0.005; // Helps view top and bottom\\n renderer.render(scene, camera);\\n}\\nanimate();\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"4e44845f-9371-42b3-bdf1-d079150c6917","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ff629f1a-64f7-4c27-95ee-1073586eb0b5","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n margin: 0;\\n overflow: hidden;\\n background: #111;\\n}\\n\\n#controls {\\n position: absolute;\\n top: 10px;\\n right: 10px;\\n bottom: 10px;\\n overflow-y: auto;\\n background: rgba(0, 0, 0, 0.75);\\n padding: 14px 18px;\\n border-radius: 8px;\\n color: #ccc;\\n font-family: monospace;\\n font-size: 12px;\\n z-index: 10;\\n width: 240px;\\n}\\n\\n#controls h3 {\\n margin: 0 0 10px 0;\\n color: #fff;\\n font-size: 14px;\\n}\\n\\n#controls details {\\n margin-bottom: 10px;\\n}\\n\\n#controls summary {\\n cursor: pointer;\\n color: #fff;\\n font-weight: bold;\\n font-size: 13px;\\n margin-bottom: 6px;\\n}\\n\\n#controls label {\\n display: flex;\\n justify-content: space-between;\\n align-items: center;\\n margin-top: 4px;\\n font-size: 11px;\\n}\\n\\n#controls label span {\\n color: #e67e22;\\n font-weight: bold;\\n}\\n\\n#controls input[type=\\\"range\\\"] {\\n width: 100%;\\n margin: 2px 0 6px 0;\\n}\\n\\n#controls input[type=\\\"color\\\"] {\\n border: none;\\n background: none;\\n width: 30px;\\n height: 20px;\\n cursor: pointer;\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n Three.js TextGeometry Demo\\n \\n \\n \\n \\n \\n Loading Font...\\n \\n\\n

\\n

Three.js Addon Demo

\\n\\n \\n

\\n

Scene

\\n background \\n

\\n\\n \\n

\\n

Camera (Perspective)

\\n fov 75\\n \\n near 0.1\\n \\n far 500\\n \\n position.x 0\\n \\n position.y 0\\n \\n position.z 150\\n \\n

\\n\\n \\n

\\n

Lights

\\n ambient intensity 0.5\\n \\n directional intensity 1.5\\n \\n

\\n\\n \\n

\\n

TextGeometry (Addon)

\\n text\\n \\n\\n size 30\\n \\n\\n depth 10\\n \\n\\n curveSegments 12\\n \\n\\n \\n bevelEnabled\\n \\n\\n bevelThickness 2\\n \\n\\n bevelSize 1.5\\n \\n\\n bevelSegments 3\\n \\n

\\n\\n \\n

\\n

MeshStandardMaterial

\\n color \\n metalness 0.5\\n \\n roughness 0.5\\n \\n wireframe \\n

\\n

\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"import * as THREE from \\\"https://unpkg.com/three@0.160.0/build/three.module.js\\\";\\nimport { FontLoader } from \\\"three/addons/loaders/FontLoader.js\\\";\\nimport { TextGeometry } from \\\"three/addons/geometries/TextGeometry.js\\\";\\n\\n// Scene\\nconst scene = new THREE.Scene();\\nscene.background = new THREE.Color(\\\"#111111\\\");\\n\\n// Camera - Pulled back much further due to text size\\nconst camera = new THREE.PerspectiveCamera(\\n 75,\\n window.innerWidth / window.innerHeight,\\n 0.1,\\n 1000,\\n);\\ncamera.position.set(0, 0, 150);\\ncamera.lookAt(0, 0, 0);\\n\\n// Renderer\\nconst renderer = new THREE.WebGLRenderer({ antialias: true });\\nrenderer.setSize(window.innerWidth, window.innerHeight);\\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\ndocument.body.appendChild(renderer.domElement);\\n\\n// Lights\\nconst ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\\nscene.add(ambientLight);\\n\\nconst dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\\ndirLight.position.set(50, 100, 70);\\nscene.add(dirLight);\\n\\n// Global Variables\\nlet textMesh, loadedFont;\\nconst material = new THREE.MeshStandardMaterial({\\n color: \\\"#3498db\\\",\\n metalness: 0.5,\\n roughness: 0.5,\\n side: THREE.DoubleSide,\\n});\\n\\n// Load Font\\nconst loader = new FontLoader();\\nloader.load(\\n \\\"https://unpkg.com/three@0.160.0/examples/fonts/helvetiker_regular.typeface.json\\\",\\n function (font) {\\n loadedFont = font;\\n\\n // Hide loading, show controls\\n document.getElementById(\\\"loading\\\").style.display = \\\"none\\\";\\n document.getElementById(\\\"controls\\\").style.display = \\\"block\\\";\\n\\n // Create initial geometry\\n updateGeometry();\\n\\n // Start loop\\n animate();\\n },\\n);\\n\\n// --- HTML Input Handlers ---\\nfunction bindRange(id, callback) {\\n const input = document.getElementById(id);\\n const span = document.getElementById(\\\"v-\\\" + id);\\n input.addEventListener(\\\"input\\\", () => {\\n const val = parseFloat(input.value);\\n if (span) span.textContent = val;\\n callback(val);\\n });\\n}\\n\\n// Scene\\ndocument.getElementById(\\\"bgColor\\\").addEventListener(\\\"input\\\", (e) => {\\n scene.background.set(e.target.value);\\n});\\n\\n// Camera\\nbindRange(\\\"fov\\\", (v) => {\\n camera.fov = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"near\\\", (v) => {\\n camera.near = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"far\\\", (v) => {\\n camera.far = v;\\n camera.updateProjectionMatrix();\\n});\\nbindRange(\\\"camX\\\", (v) => {\\n camera.position.x = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camY\\\", (v) => {\\n camera.position.y = v;\\n camera.lookAt(0, 0, 0);\\n});\\nbindRange(\\\"camZ\\\", (v) => {\\n camera.position.z = v;\\n camera.lookAt(0, 0, 0);\\n});\\n\\n// Lights\\nbindRange(\\\"ambInt\\\", (v) => {\\n ambientLight.intensity = v;\\n});\\nbindRange(\\\"dirInt\\\", (v) => {\\n dirLight.intensity = v;\\n});\\n\\n// TextGeometry\\nconst geoStringInputs = [\\\"textValue\\\"];\\nconst geoNumInputs = [\\n \\\"size\\\",\\n \\\"depth\\\",\\n \\\"curveSegments\\\",\\n \\\"bevelThickness\\\",\\n \\\"bevelSize\\\",\\n \\\"bevelSegments\\\",\\n];\\n\\ngeoStringInputs.forEach((id) =>\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry),\\n);\\ngeoNumInputs.forEach((id) =>\\n document.getElementById(id).addEventListener(\\\"input\\\", updateGeometry),\\n);\\ndocument\\n .getElementById(\\\"bevelEnabled\\\")\\n .addEventListener(\\\"change\\\", updateGeometry);\\n\\nfunction updateGeometry() {\\n if (!loadedFont) return; // safeguard\\n\\n const textObj = document.getElementById(\\\"textValue\\\");\\n const size = parseFloat(document.getElementById(\\\"size\\\").value);\\n const depth = parseFloat(document.getElementById(\\\"depth\\\").value);\\n const curves = parseInt(document.getElementById(\\\"curveSegments\\\").value);\\n const bevelEnabled = document.getElementById(\\\"bevelEnabled\\\").checked;\\n const bevelThickness = parseFloat(\\n document.getElementById(\\\"bevelThickness\\\").value,\\n );\\n const bevelSize = parseFloat(document.getElementById(\\\"bevelSize\\\").value);\\n const bevelSegments = parseInt(\\n document.getElementById(\\\"bevelSegments\\\").value,\\n );\\n\\n // Update text values in UI\\n document.getElementById(\\\"v-size\\\").textContent = size;\\n document.getElementById(\\\"v-depth\\\").textContent = depth;\\n document.getElementById(\\\"v-curveSegments\\\").textContent = curves;\\n document.getElementById(\\\"v-bevelThickness\\\").textContent = bevelThickness;\\n document.getElementById(\\\"v-bevelSize\\\").textContent = bevelSize;\\n document.getElementById(\\\"v-bevelSegments\\\").textContent = bevelSegments;\\n\\n // Cleanup old mesh if exists\\n if (textMesh) {\\n textMesh.geometry.dispose();\\n scene.remove(textMesh);\\n }\\n\\n // Create new Geometry\\n const geometry = new TextGeometry(textObj.value, {\\n font: loadedFont,\\n size: size,\\n depth: depth,\\n curveSegments: curves,\\n bevelEnabled: bevelEnabled,\\n bevelThickness: bevelThickness,\\n bevelSize: bevelSize,\\n bevelSegments: bevelSegments,\\n });\\n\\n // Calculate bounding box to center the text\\n geometry.computeBoundingBox();\\n const xOffset =\\n -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);\\n const yOffset =\\n -0.5 * (geometry.boundingBox.max.y - geometry.boundingBox.min.y);\\n geometry.translate(xOffset, yOffset, 0);\\n\\n textMesh = new THREE.Mesh(geometry, material);\\n scene.add(textMesh);\\n}\\n\\n// Material\\ndocument.getElementById(\\\"matColor\\\").addEventListener(\\\"input\\\", (e) => {\\n material.color.set(e.target.value);\\n});\\nbindRange(\\\"metalness\\\", (v) => {\\n material.metalness = v;\\n});\\nbindRange(\\\"roughness\\\", (v) => {\\n material.roughness = v;\\n});\\ndocument.getElementById(\\\"wireframe\\\").addEventListener(\\\"change\\\", (e) => {\\n material.wireframe = e.target.checked;\\n});\\n\\n// Animate\\nfunction animate() {\\n requestAnimationFrame(animate);\\n if (textMesh) {\\n textMesh.rotation.y += 0.01;\\n }\\n renderer.render(scene, camera);\\n}\\n\\n// Resize\\nwindow.addEventListener(\\\"resize\\\", () => {\\n camera.aspect = window.innerWidth / window.innerHeight;\\n camera.updateProjectionMatrix();\\n renderer.setSize(window.innerWidth, window.innerHeight);\\n});\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"3da6db3b-e493-421e-a140-e69d1b4a859a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]