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
cop/envMap;cop/image;cop/imageEXR;event/cameraOrbitControls;obj/copNetwork;obj/geo;obj/hemisphereLight;obj/perspectiveCamera;rop/CSS2DRenderer;rop/WebGLRenderer;sop/CSS2DObject;sop/box;sop/eventsNetwork;sop/merge;sop/renderersNetwork;sop/scatter;sop/transform
Used operations
Used modules
Used assemblers
Used integrations
[]
Used assets
Nodes map
{"/geo1":"obj/geo","/geo1/CSS2DObject1":"sop/CSS2DObject","/geo1/CSS2DObject2":"sop/CSS2DObject","/geo1/box1":"sop/box","/geo1/box2":"sop/box","/geo1/merge1":"sop/merge","/geo1/merge2":"sop/merge","/geo1/merge3":"sop/merge","/geo1/scatter1":"sop/scatter","/geo1/scatter2":"sop/scatter","/geo1/transform1":"sop/transform","/geo1/transform2":"sop/transform","/hemisphereLight1":"obj/hemisphereLight","/perspectiveCamera1":"obj/perspectiveCamera","/perspectiveCamera1/events1":"sop/eventsNetwork","/perspectiveCamera1/events1/cameraOrbitControls1":"event/cameraOrbitControls","/perspectiveCamera1/renderersNetwork1":"sop/renderersNetwork","/perspectiveCamera1/renderersNetwork1/CSS2DRenderer1":"rop/CSS2DRenderer","/perspectiveCamera1/renderersNetwork1/WebGLRenderer1":"rop/WebGLRenderer","/COP":"obj/copNetwork","/COP/envMap":"cop/envMap","/COP/imageEnv":"cop/imageEXR","/COP/imageUv":"cop/image"}
Js version
Editor version
Engine version
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
cop/envMap;cop/image;cop/imageEXR;event/cameraOrbitControls;obj/copNetwork;obj/geo;obj/hemisphereLight;obj/perspectiveCamera;rop/CSS2DRenderer;rop/WebGLRenderer;sop/CSS2DObject;sop/box;sop/eventsNetwork;sop/merge;sop/renderersNetwork;sop/scatter;sop/transform
Used operations
Used modules
Used assemblers
Used integrations
[]
Used assets
Nodes map
{"/geo1":"obj/geo","/geo1/CSS2DObject1":"sop/CSS2DObject","/geo1/CSS2DObject2":"sop/CSS2DObject","/geo1/box1":"sop/box","/geo1/box2":"sop/box","/geo1/merge1":"sop/merge","/geo1/merge2":"sop/merge","/geo1/merge3":"sop/merge","/geo1/scatter1":"sop/scatter","/geo1/scatter2":"sop/scatter","/geo1/transform1":"sop/transform","/geo1/transform2":"sop/transform","/hemisphereLight1":"obj/hemisphereLight","/perspectiveCamera1":"obj/perspectiveCamera","/perspectiveCamera1/events1":"sop/eventsNetwork","/perspectiveCamera1/events1/cameraOrbitControls1":"event/cameraOrbitControls","/perspectiveCamera1/renderersNetwork1":"sop/renderersNetwork","/perspectiveCamera1/renderersNetwork1/CSS2DRenderer1":"rop/CSS2DRenderer","/perspectiveCamera1/renderersNetwork1/WebGLRenderer1":"rop/WebGLRenderer","/COP":"obj/copNetwork","/COP/envMap":"cop/envMap","/COP/imageEnv":"cop/imageEXR","/COP/imageUv":"cop/image"}
Js version
Editor version
Engine version
Logout
0%
There was a problem displaying your scene:
view scene source
