36:null 37:["$","title",null,{"children":"BHoM RenderMesh to threejs | roly hudson | Observable"}] 3d:T52b,function toThreeMesh(bhomRenderMesh) { const geometry = new THREE.BufferGeometry(); let positions = []; const colours = []; for(var i = 0; i < bhomRenderMesh.Vertices.length; i++) { positions.push(bhomRenderMesh.Vertices[i].Point.X, bhomRenderMesh.Vertices[i].Point.Y, bhomRenderMesh.Vertices[i].Point.Z); colours.push(bhomRenderMesh.Vertices[i].Colour.R/255.0, bhomRenderMesh.Vertices[i].Colour.G/255.0, bhomRenderMesh.Vertices[i].Colour.B/255.0); } const indices = []; for(var i = 0; i < bhomRenderMesh.Faces.length; i++) { if(bhomRenderMesh.Faces[i].D > -1) { indices.push( bhomRenderMesh.Faces[i].A, bhomRenderMesh.Faces[i].B, bhomRenderMesh.Faces[i].D ); // face one indices.push( bhomRenderMesh.Faces[i].B, bhomRenderMesh.Faces[i].C, bhomRenderMesh.Faces[i].D); // face two } else indices.push( bhomRenderMesh.Faces[i].A, bhomRenderMesh.Faces[i].B, bhomRenderMesh.Faces[i].C ); // face one } geometry.setIndex( indices ); geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colours, 3 ) ); geometry.computeBoundingSphere(); return geometry; }3e:[{"id":"cef9ab74c7abf11ae52eb5bfaa11fc53b8cd5b5962b82b140999672f82676a934e8faa07599b4a4ae04f1f1e79447d01768cade0bc6bc8c36b930d06e3dcae7d","href":"https://static.observableusercontent.com/files/cef9ab74c7abf11ae52eb5bfaa11fc53b8cd5b5962b82b140999672f82676a934e8faa07599b4a4ae04f1f1e79447d01768cade0bc6bc8c36b930d06e3dcae7d","name":"craterpockedplanet@1.json","type":"application/json","lastModified":1638976772627.066,"size":21248458},{"id":"18d9498b00ac8c962d0b5447ff78cedf23d49be4c6e752c1a4b3bdeaf7f3e2e4fa8b265e5c73f957bc94a787ea4a9f99824f25bf8ba1db005e7af3917646efb8","href":"https://static.observableusercontent.com/files/18d9498b00ac8c962d0b5447ff78cedf23d49be4c6e752c1a4b3bdeaf7f3e2e4fa8b265e5c73f957bc94a787ea4a9f99824f25bf8ba1db005e7af3917646efb8","name":"Crater.gh","type":"application/octet-stream","lastModified":1638977391377.968,"size":1773784}] 3b:{"id":"80da4f528c4fdf2d","slug":"bhom-rendermesh-to-threejs/2","title":"BHoM RenderMesh to threejs","thumbnail":"bdd07b63cb145ab0a62843d50a7cf6fe8fa90ad3934a5fcadb77818fa92da849","access_level":"public","create_time":"$D2021-12-08T15:06:04.268Z","update_time":"$D2023-07-06T10:45:08.913Z","view_time":null,"first_public_time":"$D2021-12-08T15:22:34.421Z","has_unpublished_edits":null,"fork":{"id":"600d6b7de361fd74","slug":"bhom-rendermesh-to-threejs","title":"BHoM RenderMesh to threejs","owner":{"id":"7a9caff51ab68665","login":"lacunae","name":"roly hudson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a9caff51ab68665","login":"lacunae","name":"roly hudson","avatar_url":"https://avatars-next.observableusercontent.com/ef62c5763748d37a375051e199ed15a59a92462880566ac9d514a472ecbe4240","tier":"starter_2024","bio":"","following":false},"version":244,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aac2ad61db790df6","login":"lacunae","name":"roly hudson","avatar_url":"https://avatars-next.observableusercontent.com/ef62c5763748d37a375051e199ed15a59a92462880566ac9d514a472ecbe4240","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"aac2ad61db790df6","login":"lacunae","name":"roly hudson","avatar_url":"https://avatars-next.observableusercontent.com/ef62c5763748d37a375051e199ed15a59a92462880566ac9d514a472ecbe4240","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"BHoM RenderMesh to threejs","cells":[{"id":0,"value":"md`# BHoM RenderMesh to threejs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`### Quick convert from BH.oM.Graphics.RenderMesh to threejs mesh.\n\nWhat is BHoM? See BHoM github repo\n\n

Create RenderMesh(s) in BHoM
Push to JSON file (UseDatasetSerialization = false)
Upload to notebook file attachments
Update json file name
Zoom, orbit and pan the model
Use the notebook > embed cells option to add the 3d view to a PowerBI dashboard

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"md`## Known limitions\n

Model is centred on origin
Camera does not adapt to model size

\n### Grasshopper3d demo conversion.\nSee the file attachment for using Grasshopper to convert a rhino mesh to a BHoM RenderMesh and then push to a json file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"FileAttachment(\"Crater.gh\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"m = {\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n addMeshes();\n renderer.render(scene, camera);\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"function addMeshes(){\n for(var i=0;i {}\n );\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"FileAttachment(\"Crater.gh\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3c:"$3b:body"