3f:null 40:["$","title",null,{"children":"BHoM RenderMesh to threejs | Bing Wang | Observable"}] 46: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; }47:[{"id":"220ff169eb888c0794a7ffce01c6d94692b4f5b25c0fbfb0d6e2e9e3fb81f44ad2c042c17699b95c941715cb8ad369895406fb9ea7404f6f63d75e211f9d1ab1","href":"https://static.observableusercontent.com/files/220ff169eb888c0794a7ffce01c6d94692b4f5b25c0fbfb0d6e2e9e3fb81f44ad2c042c17699b95c941715cb8ad369895406fb9ea7404f6f63d75e211f9d1ab1","name":"planet.json","type":"application/json","lastModified":1638977589730.554,"size":21244382}] 44:{"id":"f7435b263f2ce07f","slug":"bhom-rendermesh-to-threejs","title":"BHoM RenderMesh to threejs","thumbnail":"76544143b03b19d01de31e8cb9b8280deabb26db42e7f0f71b2cdd365ce6f544","access_level":"public","create_time":"$D2021-12-08T14:38:38.619Z","update_time":"$D2022-07-22T17:53:33.997Z","view_time":null,"first_public_time":"$D2021-12-08T16:04:47.678Z","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":"c15cde14de9b558d","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":"starter_2024","bio":"Senior Building Physicist","following":false},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da9e1c3d7f9660a","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":null,"bio":"Senior Building Physicist","following":false}],"members":[{"type":"individual","id":"5da9e1c3d7f9660a","login":"bingwangus","name":"Bing Wang","avatar_url":"https://avatars-next.observableusercontent.com/8c962c7498ad22167c881d7d443780d59547c4972b3f55fc7accef6ae603e6db","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9f96cf79c1cae763","slug":"template","title":"Template","owner":{"id":"c15cde14de9b558d","login":"bingwangus","name":"Bing Wang"}},"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"