3f:null 40:["$","title",null,{"children":"BHoM RenderMesh to threejs | Michael Hoehn | Observable"}] 46:T579,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].Color.R/255.0, // this property has been updated to Colour in newer versions of the BHoM bhomRenderMesh.Vertices[i].Color.G/255.0, bhomRenderMesh.Vertices[i].Color.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; }47:[{"id":"b56df31f92aa19bed3aac30d5b6619914d7568b4957675cb50440eb3f445c50dda215a4f41752cf2e9df9b302c4962ccebd4a60104d69a2de0da5299eb4c7596","href":"https://static.observableusercontent.com/files/b56df31f92aa19bed3aac30d5b6619914d7568b4957675cb50440eb3f445c50dda215a4f41752cf2e9df9b302c4962ccebd4a60104d69a2de0da5299eb4c7596","name":"test.json","type":"application/json","lastModified":1617914963272.21,"size":422427}] 44:{"id":"e0fe053a85dba719","slug":"bhom-rendermesh-to-threejs","title":"BHoM RenderMesh to threejs","thumbnail":"04cf3d2b7a6fa6ceb9eea0faa4780edc16552be5f9c3cd7341e87a38858afc56","access_level":"public","create_time":"$D2021-04-08T20:47:59.709Z","update_time":"$D2022-03-24T01:18:28.622Z","view_time":null,"first_public_time":"$D2021-04-15T22:25:26.297Z","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":1,"starred":false,"owner":{"type":"team","id":"ba470ffbbd0b0190","login":"michaelhoehn","name":"Michael Hoehn","avatar_url":"https://avatars-next.observableusercontent.com/03c5bbbacd0f154825eda8b69989435b503621d46b6c618c6b51587b7a260421","tier":"starter_2024","bio":"","following":false},"version":209,"publish_version":209,"role":null,"authored":false,"authors":[{"type":"individual","id":"1ed9fc6905a17e7d","login":"michaelhoehn","name":"Michael Hoehn","avatar_url":"https://avatars-next.observableusercontent.com/03c5bbbacd0f154825eda8b69989435b503621d46b6c618c6b51587b7a260421","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1ed9fc6905a17e7d","login":"michaelhoehn","name":"Michael Hoehn","avatar_url":"https://avatars-next.observableusercontent.com/03c5bbbacd0f154825eda8b69989435b503621d46b6c618c6b51587b7a260421","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"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

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"{\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 return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 45:"$44:body"