31:[] 2f:{"title":"three-elements: Dynamic Object Changes","cells":[{"id":0,"value":"md`# three-elements: Dynamic Object Changes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"html`\n

This is based off the sample three-elements code from the home page.

Leveraging Observable's ability to re-render when panel's value changes, you can dynamically update a scene with just a slider. More experiments here

Github:three-elements

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"viewof meshNum = Range([0, 100], {step:1, value: 25, label: \"Number of dodecahedrons\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n

\n \n \n \n ${genMesh(meshNum)}\n \n\n \n \n \n \n \n\n \n \n\n \n \n \n \n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"genMesh = (m)=> {\n let retval = \"\";\n let randColorArr = [\"hotpink\",\"darkviolet\",\"forestgreen\",\"gold\",\"red\",\"orange\",\"green\",\"blue\",\"white\",\"black\",\"orchid\",\"orangered\",\"skyblue\",\"tan\",\"thistle\",\"grey\",\"yellow\",\"maroon\"]; // x11 colors\n \n for(let i =0; i < m; i++){\n let randX = 5 - Math.random()*10;\n let randY = 5 -Math.random()*10;\n let randZ = -Math.random()*5;\n let randColor = randColorArr[Math.floor(Math.random() * randColorArr.length)]; \n \n retval += `\n \n \n `\n }\n return retval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import('https://unpkg.com/three-elements@0.3.0/dist/index.esm.js?module')","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"import {Button, Checkbox, Toggle, Radio, Range, Select, Text, Textarea, Search, Table} from \"@observablehq/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}