html_in_3d

Name *

Code

{"properties":{"frame":0,"maxFrame":600,"maxFrameLocked":false,"realtimeState":true,"mainCameraPath":"/perspectiveCamera1","versions":{"polygonjs":"1.1.261"}},"root":{"type":"root","nodes":{"geo1":{"type":"geo","nodes":{"scatter1":{"type":"scatter","params":{"pointsCount":5,"seed":53},"inputs":["transform1"]},"CSS2DObject1":{"type":"CSS2DObject","params":{"useHTMLAttrib":1},"inputs":["attribCreate1"]},"merge1":{"type":"merge","inputs":["transform1","CSS2DObject1"],"flags":{"display":true}},"attribCreate1":{"type":"attribCreate","params":{"type":1,"name":"html","string":"<div class='custom-popup' style='background-color:rgb(`round(255*@color.x)`,`round(255*@color.y)`,`round(255*@color.z)`)'>popup `@id`</div>"},"inputs":["palette1"]},"palette1":{"type":"palette","params":{"paletteName":"cc234","colorsCount":4,"color1":[1,0.807843137254902,0.28627450980392155],"color2":[0.9294117647058824,0.9098039215686274,0.8627450980392157],"color3":[1,0.3411764705882353,0.21176470588235294],"color4":[1,0.6,0.7058823529411765],"color5":[0.49411764705882355,0.49019607843137253,0.0784313725490196]},"inputs":["scatter1"]},"fileGLTF1":{"type":"fileGLTF","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/models/resources/threedscans.com/pan.glb"}},"transform1":{"type":"transform","params":{"scale":3.2},"inputs":["hierarchy1"]},"hierarchy1":{"type":"hierarchy","params":{"mode":1},"inputs":["fileGLTF1"]}},"flags":{"display":true}},"hemisphereLight1":{"type":"hemisphereLight","flags":{"display":true}},"perspectiveCamera1":{"type":"perspectiveCamera","nodes":{"events1":{"type":"eventsNetwork","nodes":{"cameraOrbitControls1":{"type":"cameraOrbitControls","params":{"target":[0.034422669084108716,1.041642878864222,-0.0820537329237424]}}},"selection":["cameraOrbitControls1"]},"renderersNetwork1":{"type":"renderersNetwork","nodes":{"CSS2DRenderer1":{"type":"CSS2DRenderer","params":{"css":".custom-popup {\n\tpadding: 10px;\n\tborder: 1px solid white;\n}"}}}}},"params":{"t":[4.116152663353136,1.1787657307191874,1.5147382086475238],"r":[-22.723127930556515,44.66532130223666,16.403892417511617],"controls":"./events1/cameraOrbitControls1","setCSSRenderer":1,"CSSRenderer":"renderersNetwork1/CSS2DRenderer1"},"flags":{"display":true},"selection":["renderersNetwork1"]},"COP":{"type":"copNetwork","nodes":{"imageEnv":{"type":"imageEXR","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/textures/piz_compressed.exr"}},"imageUv":{"type":"image","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/textures/uv.jpg","tflipY":true}},"envMap":{"type":"envMap","inputs":["imageEnv"]}}}},"params":{"mainCameraPath":"/perspectiveCamera1"}},"ui":{"nodes":{"geo1":{"pos":[-50,-150],"comment":"This object contains:\\n\\n- an imported GLTF\\n- some points scattered on the GLTF, which are then fed into the node CSSObject, which will create the html objects, that are displayed by the CSS2DRenderer.\\n\\nNote that I am creating an attribute \"html\" on the points, which varries for each point thanks to an expression.\\n\\nAnd then that html attribute is used by the CSSObject node.","nodes":{"scatter1":{"pos":[-50,-150]},"CSS2DObject1":{"pos":[-50,250]},"merge1":{"pos":[-200,450]},"attribCreate1":{"pos":[-50,100]},"palette1":{"pos":[-50,-50]},"fileGLTF1":{"pos":[-200,-550]},"transform1":{"pos":[-200,-300]},"hierarchy1":{"pos":[-200,-450]}}},"hemisphereLight1":{"pos":[0,300]},"perspectiveCamera1":{"pos":[-350,-150],"comment":"in order to have the html objects display correctly, we need to assign a CSS2DRenderer to the camera.\\n\\nThis is done via the renderers tab in the camera parameters.","nodes":{"events1":{"pos":[-200,50],"nodes":{"cameraOrbitControls1":{"pos":[150,50]}}},"renderersNetwork1":{"pos":[-200,150],"nodes":{"CSS2DRenderer1":{"pos":[-50,100]}}}}},"COP":{"pos":[-200,300],"nodes":{"imageEnv":{"pos":[50,100]},"imageUv":{"pos":[-100,100]},"envMap":{"pos":[50,200]}}}}}}

Code editor

{"multiple_panel":{"split_ratio":0.5,"split_panel0":{"split_ratio":0.48255813953488375,"split_panel0":{"panelTypes":["viewer"],"currentPanelIndex":0,"panel_data":{"camera":"/perspectiveCamera1","linkIndex":1}},"split_panel1":{"panelTypes":["params"],"currentPanelIndex":0,"panel_data":{"active_folder":81,"linkIndex":1}},"split_mode":"vertical"},"split_panel1":{"panelTypes":["network","params","viewer","spreadsheet"],"currentPanelIndex":0,"panel_data":{"camera":{"position":{"x":114.16148246194572,"y":41.650562541363314},"zoom":0.6715555555555557},"history":{"2":{"position":{"x":64.79999999999998,"y":-6.266000000000005},"zoom":0.7018710562414268},"3":{"position":{"x":-48,"y":-22},"zoom":0.5},"6":{"position":{"x":11.339999999999996,"y":-96.49999999999999},"zoom":0.6172839506172841},"9":{"position":{"x":-32,"y":-88},"zoom":0.5},"33":{"position":{"x":114.16148246194572,"y":41.650562541363314},"zoom":0.6715555555555557},"131":{"position":{"x":-59.04899999999998,"y":-65.1854},"zoom":0.8467543904215146}},"linkIndex":1}},"split_mode":"horizontal"},"currentNodes":["/geo1","/","/","/","/","/","/","/"],"navigationHistory":{"nodePaths":{"1":["/","/geo1","/","/","/geo1","/","/perspectiveCamera1","/perspectiveCamera1/renderersNetwork1","/perspectiveCamera1","/","/perspectiveCamera1","/perspectiveCamera1/renderersNetwork1","/perspectiveCamera1","/","/geo1","/","/perspectiveCamera1","/perspectiveCamera1/renderersNetwork1","/perspectiveCamera1","/","/geo1","/","/geo1","/","/geo1","/","/geo1"],"2":["/"],"3":["/"],"4":["/"],"5":["/"],"6":["/"],"7":["/"],"8":["/"]},"index":{"1":26,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0}},"fullscreenPanelId":null,"saveOptions":{"createExport":true,"compressJs":true,"publishToIntegrations":false},"paramsModal":[]}

Used nodes

Used operations

Used modules

Used assemblers

Used integrations

Used assets

Nodes map

Js version

Editor version

Engine version