3e:null 3f:["$","title",null,{"children":"BHoM RenderMesh to threejs | rolyhudson | Observable"}] 45:T528,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, 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; }46:[{"id":"cde8acd7bdcba2fd0d668fa36516f7787041f5928560087d496044741240fc74b2bee07c742dd4cae9b2d809cc0c6475658c62c78e3563d8ccdd6f7e69cb16a6","href":"https://static.observableusercontent.com/files/cde8acd7bdcba2fd0d668fa36516f7787041f5928560087d496044741240fc74b2bee07c742dd4cae9b2d809cc0c6475658c62c78e3563d8ccdd6f7e69cb16a6","name":"stadiumViewQuality.json","type":"application/json","lastModified":1701798911652.256,"size":10043627}] 43:{"id":"42b01e9071257195","slug":null,"title":"BHoM RenderMesh to threejs","thumbnail":"ad41933151130df6a5a25926a94a664b1d365e70324287a275cbcdd125121fc9","access_level":"public","create_time":"$D2023-12-05T17:55:11.652Z","update_time":"$D2023-12-05T17:55:11.652Z","view_time":null,"first_public_time":"$D2023-12-05T17:55:11.652Z","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":"39eb8dd4c906cd6c","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":"starter_2024","bio":"","following":false},"version":208,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cd83edde98ad3724","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"cd83edde98ad3724","login":"rolyhudson","name":"","avatar_url":"https://avatars-next.observableusercontent.com/11a061b4eb5bd17787fef60475aac7edb528a33327c9914e5ddcd149493e8cb7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a99769aee37bc6b1","slug":"olderstuff","title":"OlderStuff","owner":{"id":"39eb8dd4c906cd6c","login":"rolyhudson","name":""}},"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 );\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":"$W46","stdlib":"1"}} 44:"$43:body"