clickable_html_in_3d

Name *

Code

{"properties":{"frame":0,"maxFrame":600,"maxFrameLocked":false,"realtimeState":true,"mainCameraPath":"/perspectiveCamera1","versions":{"polygonjs":"1.1.262"}},"root":{"type":"root","nodes":{"geo1":{"type":"geo","nodes":{"CSS2DObject1":{"type":"CSS2DObject","params":{"className":"CSS2DObject-iframe","html":"<iframe\n\tstyle='pointer-events: auto'\n\tsrc='https://www.youtube.com/embed/QY4t1ppfq0o'>\n</iframe>"},"inputs":["transform1"]},"CSS2DObject2":{"type":"CSS2DObject","params":{"html":"<div\n\tclass='CSS2DObject-text-only'\n\tonclick='alert(\"clicked\")'>\n\tclick me\n</div>"},"inputs":["transform2"]},"box1":{"type":"box","params":{"center":[-2,0,0]}},"box2":{"type":"box","params":{"center":[2,0,0]}},"merge1":{"type":"merge","inputs":["box1","CSS2DObject2"],"cloned_state_overriden":true},"merge2":{"type":"merge","inputs":["box2","CSS2DObject1"]},"merge3":{"type":"merge","inputs":["merge1","merge2"],"flags":{"display":true}},"scatter1":{"type":"scatter","params":{"pointsCount":1,"seed":12},"inputs":["box1"]},"scatter2":{"type":"scatter","params":{"pointsCount":1,"seed":12},"inputs":["box2"]},"transform1":{"type":"transform","params":{"t":[0,2,0]},"inputs":["scatter2"]},"transform2":{"type":"transform","params":{"t":[0,0.6,0]},"inputs":["scatter1"]}},"flags":{"display":true},"selection":["CSS2DObject1"]},"hemisphereLight1":{"type":"hemisphereLight","flags":{"display":true}},"perspectiveCamera1":{"type":"perspectiveCamera","nodes":{"events1":{"type":"eventsNetwork","nodes":{"cameraOrbitControls1":{"type":"cameraOrbitControls","params":{"target":[0.04513319314050034,1.070165580820751,0.13041866295292243]}}},"selection":["cameraOrbitControls1"]},"renderersNetwork1":{"type":"renderersNetwork","nodes":{"CSS2DRenderer1":{"type":"CSS2DRenderer","params":{"css":".CSS2DObject {\n\tpointer-events: auto;\n}\n.CSS2DObject-text-only {\n\tbackground-color: white;\n\tpadding: 10px;\n\tcursor: pointer\n}"}},"WebGLRenderer1":{"type":"WebGLRenderer"}}}},"params":{"t":[3.0161526633531355,1.1787657307191874,2.814738208647524],"r":[-22.723127930556515,44.66532130223666,16.403892417511617],"controls":"./events1/cameraOrbitControls1","renderer":"renderersNetwork1/WebGLRenderer1","setCSSRenderer":true,"CSSRenderer":"renderersNetwork1/CSS2DRenderer1"},"flags":{"display":true}},"COP":{"type":"copNetwork","nodes":{"envMap":{"type":"envMap","inputs":["imageEnv"]},"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}}}}},"params":{"mainCameraPath":"/perspectiveCamera1"}},"ui":{"nodes":{"geo1":{"pos":[0,-150],"comment":"Go into this node in order to see how the CSS2DObjects are set up.","nodes":{"CSS2DObject1":{"pos":[450,550],"comment":"unlike the HTML element on the left, this one does have the same CSS class. So it will not have the same CSS rule applied, and will therefore NOT have the pointer-events: auto.\\n\\nThis is to show an alternative way to apply this rule, which is by simply adding a style attribute to the html element itself."},"CSS2DObject2":{"pos":[50,550],"comment":"The HTML element created by the CSS2DObject is not clickable by default.\\nIn order to make it clickable, we add the css rule in the CSS2DRenderer node, which is inside the camera."},"box1":{"pos":[-50,150]},"box2":{"pos":[350,150]},"merge1":{"pos":[-50,850]},"merge2":{"pos":[350,850]},"merge3":{"pos":[100,1000]},"scatter1":{"pos":[50,250]},"scatter2":{"pos":[450,250]},"transform1":{"pos":[450,400]},"transform2":{"pos":[50,400]}}},"hemisphereLight1":{"pos":[200,100]},"perspectiveCamera1":{"pos":[-150,100],"comment":"Go inside the camera to see how the ROP/CSS2DRenderer is set up.","nodes":{"events1":{"pos":[-200,50],"nodes":{"cameraOrbitControls1":{"pos":[150,50]}}},"renderersNetwork1":{"pos":[-200,150],"comment":"Go inside this ropNetwork to see the CSS2DRenderer\\n","nodes":{"CSS2DRenderer1":{"pos":[-50,200],"comment":"This CSS2DRenderer sets the global CSS rule that will be applied to the whole page.\\nSo it is a good place to create rules for the CSSObjects.\\n\\nIn this case, we add a pointer-events:auto to them, in order to make them clickable.\\n\\nNote that the iframe will not have the class name CSS2DObject (since the default value in the CSS2DObject node that creates it has been changed), so the pointer-events css rule is created right on its html tag instead.\\nBut the result is the same, and both element end up being clickable."},"WebGLRenderer1":{"pos":[-50,100]}}}}},"COP":{"pos":[-150,200],"nodes":{"envMap":{"pos":[50,200]},"imageEnv":{"pos":[50,100]},"imageUv":{"pos":[-100,100]}}}}}}

Code editor

{"multiple_panel":{"split_ratio":0.5,"split_panel0":{"split_ratio":0.5,"split_panel0":{"panelTypes":["viewer"],"currentPanelIndex":0,"panel_data":{"camera":"/perspectiveCamera1","linkIndex":1}},"split_panel1":{"panelTypes":["params"],"currentPanelIndex":0,"panel_data":{"active_folder":null,"linkIndex":1}},"split_mode":"vertical"},"split_panel1":{"panelTypes":["network","params","viewer"],"currentPanelIndex":0,"panel_data":{"camera":{"position":{"x":-48,"y":-22},"zoom":1.2905873958565992},"history":{"2":{"position":{"x":-48,"y":-22},"zoom":1.2905873958565992},"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},"76":{"position":{"x":200,"y":-100},"zoom":1.2905873958565992},"131":{"position":{"x":-59.04899999999998,"y":-65.1854},"zoom":0.8467543904215146},"291":{"position":{"x":-0.7520840589999764,"y":-331.3127888519999},"zoom":1.2905873958565992},"357":{"position":{"x":-328.3499664540001,"y":-590.679151345},"zoom":0.7620789513793633},"563":{"position":{"x":200,"y":-100},"zoom":1.2905873958565992},"640":{"position":{"x":-0.7520840589999764,"y":-331.3127888519999},"zoom":1.2905873958565992}},"linkIndex":1}},"split_mode":"horizontal"},"currentNodes":["/","/","/","/","/","/","/","/"],"navigationHistory":{"nodePaths":{"1":["/","/geo1","/","/perspectiveCamera1","/perspectiveCamera1/renderersNetwork1","/perspectiveCamera1","/"],"2":["/"],"3":["/"],"4":["/"],"5":["/"],"6":["/"],"7":["/"],"8":["/"]},"index":{"1":6,"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

Web
Analytics