Name
*
Code
{"properties":{"frame":0,"maxFrame":600,"maxFrameLocked":false,"realtimeState":true,"mainCameraPath":"/geo2/geo2:sopGroup/perspectiveCamera_FOLLOW","versions":{"polygonjs":"1.2.57"}},"root":{"type":"root","nodes":{"grid":{"type":"geo","nodes":{"planeHelper1":{"type":"planeHelper","flags":{"display":true}}},"flags":{"display":true}},"lights":{"type":"geo","nodes":{"hemisphereLight1":{"type":"hemisphereLight"},"merge1":{"type":"merge","inputs":["hemisphereLight1","polarTransform1"],"flags":{"display":true}},"polarTransform1":{"type":"polarTransform","params":{"longitude":64.8,"latitude":39.6,"depth":4.2},"inputs":["spotLight1"]},"spotLight1":{"type":"spotLight"}},"flags":{"display":true}},"clickableObjects":{"type":"geo","nodes":{"merge2":{"type":"merge","inputs":["cameraLookAtClickableObjects1","null1"],"flags":{"display":true}},"perspectiveCamera_FOLLOW":{"type":"perspectiveCamera","params":{"position":[0,0.5,2.9]}},"cameraLookAtClickableObjects1":{"type":"cameraLookAtClickableObjects","polyNode":{"locked":true},"params":{"initLookAt":[0,0.43999999999999995,0]},"inputs":["perspectiveCamera_FOLLOW","null1"]},"null1":{"type":"null","inputs":["merge1"],"cloned_state_overriden":true},"fileGLTF1":{"type":"fileGLTF"},"transform1":{"type":"transform","params":{"applyOn":1,"t":[-1.624962803205223,0,0]},"inputs":["fileGLTF1"]},"fileGLTF2":{"type":"fileGLTF","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/models/resources/threedscans.com/horse_head.glb"}},"fileGLTF3":{"type":"fileGLTF","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/models/resources/threedscans.com/rhino.glb"}},"transform2":{"type":"transform","params":{"applyOn":1,"t":[-0.11431279664546157,0,0]},"inputs":["fileGLTF2"]},"transform3":{"type":"transform","params":{"applyOn":1,"t":[1.632836513500666,0,0]},"inputs":["fileGLTF3"]},"merge1":{"type":"merge","inputs":["transform1","transform2","transform3"]}},"flags":{"display":true}}},"params":{"mainCameraPath":"/geo2/geo2:sopGroup/perspectiveCamera_FOLLOW"}},"ui":{"nodes":{"grid":{"pos":[-50,-250],"nodes":{"planeHelper1":{"pos":[0,0]}}},"lights":{"pos":[-50,-150],"selection":["spotLight1"],"nodes":{"hemisphereLight1":{"pos":[-200,-200]},"merge1":{"pos":[-50,200]},"polarTransform1":{"pos":[150,-50]},"spotLight1":{"pos":[150,-200]}}},"clickableObjects":{"pos":[-50,-50],"nodes":{"merge2":{"pos":[250,500]},"perspectiveCamera_FOLLOW":{"pos":[-300,0]},"cameraLookAtClickableObjects1":{"pos":[-50,300]},"null1":{"pos":[250,50]},"fileGLTF1":{"pos":[-100,-550]},"transform1":{"pos":[-100,-400]},"fileGLTF2":{"pos":[250,-550]},"fileGLTF3":{"pos":[550,-550]},"transform2":{"pos":[250,-400]},"transform3":{"pos":[550,-400]},"merge1":{"pos":[250,-100]}}}}},"shaders":{},"embeddedPolyNodes":{"sop/cameraLookAtClickableObjects":{"metadata":{"version":{"editor":"1.2.57-1","polygonjs":"1.2.57","marketplace":1},"createdAt":1668125112242},"nodeContext":"sop","inputs":{"simple":{"min":2,"max":2,"names":[]}},"params":[{"name":"initLookAt","type":"vector3","rawInput":[0,0.6000000000000001,0],"initValue":[0,0,0],"options":{}},{"name":"transitionSpeed","type":"float","rawInput":0.05,"initValue":0.05,"options":{"range":[0,1],"rangeLocked":[true,true]}},{"name":"displayClickableObjects","type":"boolean","rawInput":false,"initValue":false,"options":{}}],"nodes":{"subnetInput1":{"type":"subnetInput","params":{"input":1},"flags":{"display":true}},"delete1":{"type":"delete","params":{"class":1,"invert":true,"byExpression":true,"expression":"@objnum==copy('../copy1')"},"inputs":["PRE_DELETE"]},"copy1":{"type":"copy","params":{"count":"objectsCount('../PRE_DELETE')"},"inputs":["transformReset1"]},"PRE_DELETE":{"type":"null","inputs":["subnetInput1"]},"box1":{"type":"box","inputs":["delete1"]},"transformReset1":{"type":"transformReset","params":{"mode":2},"inputs":["box1"]},"attribCreate1":{"type":"attribCreate","params":{"class":1,"name":"lookAtTarget","size":3,"value3":["ch(\"../initLookAtx\")","ch(\"../initLookAty\")","ch(\"../initLookAtz\")"]},"inputs":["subnetInput0"]},"hierarchy1":{"type":"hierarchy","inputs":["actor_clickableObjects"]},"objectProperties1":{"type":"objectProperties","params":{"tname":true,"name":"clickableBoxes","tvisible":true,"visible":"ch(\"../displayClickableObjects\")"},"inputs":["actor_clickableObjectsParent"]},"merge2":{"type":"merge","inputs":["actor_camera","objectProperties1"]},"subnetOutput1":{"type":"subnetOutput","inputs":["merge2"]},"material1":{"type":"material","params":{"material":"../MAT/meshStandard1"},"inputs":["copy1"]},"MAT":{"type":"materialsNetwork","nodes":{"meshStandard1":{"type":"meshStandard","params":{"wireframe":1}}}},"subnetInput0":{"type":"subnetInput"},"actor_camera":{"type":"actor","nodes":{"getObjectAttribute1":{"type":"getObjectAttribute","params":{"attribName":"lookAtTarget","type":6},"connection_points":{"in":[{"name":"Object3D","type":"Object3D","isArray":false}],"out":[{"name":"val","type":"Vector3","isArray":false}]}},"onTick1":{"type":"onTick"},"setObjectLookAt1":{"type":"setObjectLookAt","params":{"targetPosition":{"overriden_options":{}},"up":{"overriden_options":{}},"lerp":{"raw_input":"ch(\"../../transitionSpeed\")","overriden_options":{}},"invertDirection":{"overriden_options":{}},"updateMatrix":{"overriden_options":{}}},"maxInputsCount":7,"inputs":[{"index":0,"node":"onTick1","output":"trigger"},null,{"index":2,"node":"getObjectAttribute1","output":"val"}]}},"inputs":["attribCreate1"]},"actor_clickableObjectsParent":{"type":"actor","nodes":{"onChildAttributeUpdate1":{"type":"onChildAttributeUpdate","params":{"attribName":"hovered","type":0},"connection_points":{"in":[],"out":[{"name":"trigger","type":"trigger","isArray":false},{"name":"newValues","type":"boolean[]","isArray":true},{"name":"previousValues","type":"boolean[]","isArray":true}]}},"or1":{"type":"or","inputs":[{"index":0,"node":"onChildAttributeUpdate1","output":"newValues"}],"connection_points":{"in":[{"name":"booleans","type":"boolean[]","isArray":true}],"out":[{"name":"val","type":"boolean","isArray":false}]}},"setViewer1":{"type":"setViewer","params":{"className":{"overriden_options":{}},"set":{"overriden_options":{}}},"maxInputsCount":3,"inputs":[{"index":0,"node":"onChildAttributeUpdate1","output":"trigger"},null,{"index":2,"node":"or1","output":"val"}]}},"inputs":["hierarchy1"]},"actor_clickableObjects":{"type":"actor","nodes":{"getObject1":{"type":"getObject","params":{"getCurrentObject":false,"mask":"*/`cameraName('../../subnetInput0',0)`"},"maxInputsCount":2},"getObjectProperty1":{"type":"getObjectProperty"},"onObjectClick1":{"type":"onObjectClick"},"onObjectHover1":{"type":"onObjectHover"},"setObjectAttribute1":{"type":"setObjectAttribute","params":{"trigger":{"overriden_options":{}},"attribName":"lookAtTarget","type":6,"lerp":{"type":"float","default_value":1,"options":{"spare":true,"editable":true}},"val":{"type":"vector3","default_value":[0,0,0],"options":{"spare":true,"editable":true},"overriden_options":{}}},"maxInputsCount":4,"inputs":[{"index":0,"node":"onObjectClick1","output":"trigger"},{"index":1,"node":"getObject1","output":"object3D"},null,{"index":3,"node":"getObjectProperty1","output":"position"}],"connection_points":{"in":[{"name":"trigger","type":"trigger","isArray":false},{"name":"Object3D","type":"Object3D","isArray":false},{"name":"lerp","type":"float","isArray":false},{"name":"val","type":"Vector3","isArray":false}],"out":[]}},"setObjectAttribute2":{"type":"setObjectAttribute","params":{"trigger":{"overriden_options":{}},"attribName":"hovered","type":0,"lerp":{"type":"float","default_value":1,"options":{"spare":true,"editable":true}},"val":{"type":"boolean","default_value":false,"options":{"spare":true,"editable":true},"overriden_options":{}}},"maxInputsCount":4,"inputs":[{"index":0,"node":"onObjectHover1","output":"trigger"},null,null,{"index":3,"node":"onObjectHover1","output":"hovered"}],"connection_points":{"in":[{"name":"trigger","type":"trigger","isArray":false},{"name":"Object3D","type":"Object3D","isArray":false},{"name":"lerp","type":"float","isArray":false},{"name":"val","type":"boolean","isArray":false}],"out":[]}}},"inputs":["material1"]}},"ui":{"subnetInput1":{"pos":[300,-150],"comment":"This imports the objects"},"delete1":{"pos":[300,200],"comment":"the delete node isolate a single object, and that object changes on every iteration from the copy node. This is done using the expression `@objnum==copy('../copy1')`"},"copy1":{"pos":[300,1050],"comment":"the copy node iterates over each object from the PRE_DELETE node.\\n\\nYou can see other examples using this node, in the [instancing section](https://polygonjs.com/docs/examples). Or you can check this one showing [how to create procedural stairs](https://polygonjs.com/demo?example=bycategory/instancing/stairsarefun/staircasesimple) too."},"PRE_DELETE":{"pos":[300,0],"comment":"The PRE_DELETE node is used by the copy node below as a reference, to know how many objects are imported, using the [objectsCount](https://polygonjs.com/docs/expressions/objectscount) expression."},"box1":{"pos":[300,500],"comment":"This creates a box from an isolated object"},"transformReset1":{"pos":[300,700],"comment":"By default, the way the box is created is that the object's center is at the origin, but the points of the box mesh are adapted to the input.\\nIn this case, we need the center of the box to be at the center of the object. This is what the transformReset do."},"attribCreate1":{"pos":[-100,2550],"comment":"this adds a default `lookAtTarget` attribute to the camera. This defines where the camera looks at when the scene starts playing. "},"hierarchy1":{"pos":[300,2200],"comment":"this adds a parent to the clickable objects. The reason we need a parent is to apply the following [actor](../actor_clickableObjectsParent) node, which set the cursor to a pointer"},"objectProperties1":{"pos":[300,2750],"comment":"By default, this hides the input objects. But this can be overriden by the parameter `displayClickableObjects` on the polynode. You can see the `visible` param is linked to it using the [ch](https://polygonjs.com/docs/expressions/ch) expression"},"merge2":{"pos":[100,3200]},"subnetOutput1":{"pos":[100,3350]},"material1":{"pos":[300,1500],"comment":"this assigns a basic material on the boxes, with wireframe `on`. This is only apparent if you toggle the `displayClickableObjects` param of the polyNode."},"MAT":{"pos":[100,1500],"selection":["meshStandard1"],"nodes":{"meshStandard1":{"pos":[0,0]}}},"subnetInput0":{"pos":[-100,2350]},"actor_camera":{"pos":[-100,2900],"selection":["setObjectLookAt1"],"nodes":{"getObjectAttribute1":{"pos":[0,100]},"onTick1":{"pos":[0,-100]},"setObjectLookAt1":{"pos":[400,0],"comment":"this is triggered on every frame, as the [onTick](../onTick1) node is plugged in its `trigger` input.\\nThis therefore constantly reads the value of the `lookAtTarget` attribute on the camera, and sets it to look at that position in space.\\nNote that the lerp is linked to the `transitionSpeed` parameter on the polynode, which defines how quickly the camera rotates."}}},"actor_clickableObjectsParent":{"pos":[300,2450],"comment":"this node checks if any children of the current object (the parent created by the hierarchy node) has the attribute `hovered` set to true. If that's the case, the viewer will have its class set to `active`, which has a rule to set the cursor to a pointer","selection":["setViewer1"],"nodes":{"onChildAttributeUpdate1":{"pos":[-50,300]},"or1":{"pos":[150,350]},"setViewer1":{"pos":[350,300]}}},"actor_clickableObjects":{"pos":[300,1750],"comment":"This adds 2 behaviors to each box. Dive [inside this node](.) to see how it does.\\nIn short, the behaviors are:\\n- sets a `hovered` attribute to true when the cursor hovers over the box\\n- sets a `lookAtTarget` attribute on the camera, using the box position as value. This is what the camera will use to know which direction to rotate to.","selection":["getObject1"],"nodes":{"getObject1":{"pos":[-100,300],"comment":"this node returns the camera object from the first input, using the [cameraName](https://polygonjs.com/docs/expressions/cameraName) expression, with the [subnetInput0](../../subnetInput0) as argument "},"getObjectProperty1":{"pos":[-50,700]},"onObjectClick1":{"pos":[-100,150]},"onObjectHover1":{"pos":[0,-150]},"setObjectAttribute1":{"pos":[350,250],"comment":"This node is triggered when the object is clicked. When that happens, it sets the attribute `lookAtTarget` of the camera to the `position` of the current object."},"setObjectAttribute2":{"pos":[250,-150],"comment":"this sets a `hovered` attribute to the object, which is then used by this [actor node](../../actor_clickableObjectsParent) to set the cursor to a pointer"}}}}}}}
Code editor
{"multiple_panel":{"split_ratio":0.5,"split_panel0":{"split_ratio":0.5,"split_panel0":{"panelTypes":["viewer"],"currentPanelIndex":0,"panel_data":{"camera":"/clickableObjects/clickableObjects:sopGroup/perspectiveCamera_FOLLOW","isViewerInitLayoutData":true,"linkIndex":1}},"split_panel1":{"panelTypes":["params"],"currentPanelIndex":0,"panel_data":{"active_folder":40,"linkIndex":1}},"split_mode":"vertical"},"split_panel1":{"panelTypes":["network","params","viewer"],"currentPanelIndex":0,"panel_data":{"camera":{"position":{"x":-365.093096975006,"y":-11.961970734779321},"zoom":0.5522496570644719},"history":{"2":{"position":{"x":-48,"y":-22},"zoom":0.6140000000000001},"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":125,"y":-100},"zoom":0.6140000000000001},"131":{"position":{"x":-59.04899999999998,"y":-65.1854},"zoom":0.8467543904215146},"151":{"position":{"x":-365.093096975006,"y":-11.961970734779321},"zoom":0.5522496570644719},"398":{"position":{"x":-207.21074214939952,"y":-231.4960896252153},"zoom":0.5512496570644719},"602":{"position":{"x":0,"y":0},"zoom":0.6140000000000001},"614":{"position":{"x":-205.10063952068407,"y":-2913.314613306272},"zoom":0.7250000000000002},"820":{"position":{"x":-344.84614658230925,"y":-46.690004361765716},"zoom":0.8790000000000009},"836":{"position":{"x":-87.43228602383525,"y":-400.7583965330444},"zoom":0.8500000000000003}},"linkIndex":1}},"split_mode":"horizontal"},"currentNodes":["/clickableObjects","/","/","/","/","/","/","/"],"navigationHistory":{"nodePaths":{"1":["/clickableObjects","/","/clickableObjects"],"2":["/"],"3":["/"],"4":["/"],"5":["/"],"6":["/"],"7":["/"],"8":["/"]},"index":{"1":2,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0}},"fullscreenPanelId":null,"saveOptions":{"createExport":true,"skipExportSinceRemoteAssetsPresents":false,"minimizeFilesCount":false,"compressJs":true,"createZip":false,"runPostExportCommand":false},"paramsModal":[]}
Used nodes
actor/getObject;actor/getObjectAttribute;actor/getObjectProperty;actor/onChildAttributeUpdate;actor/onObjectClick;actor/onObjectHover;actor/onTick;actor/or;actor/setObjectAttribute;actor/setObjectLookAt;actor/setViewer;mat/meshStandard;obj/geo;sop/actor;sop/attribCreate;sop/box;sop/cameraLookAtClickableObjects;sop/copy;sop/delete;sop/fileGLTF;sop/hemisphereLight;sop/hierarchy;sop/material;sop/materialsNetwork;sop/merge;sop/null;sop/objectProperties;sop/perspectiveCamera;sop/planeHelper;sop/polarTransform;sop/spotLight;sop/subnetInput;sop/subnetOutput;sop/transform;sop/transformReset
Used operations
Used modules
Used assemblers
Used integrations
[]
Used assets
Nodes map
{"/grid":"obj/geo","/grid/planeHelper1":"sop/planeHelper","/lights":"obj/geo","/lights/hemisphereLight1":"sop/hemisphereLight","/lights/merge1":"sop/merge","/lights/polarTransform1":"sop/polarTransform","/lights/spotLight1":"sop/spotLight","/clickableObjects":"obj/geo","/clickableObjects/merge2":"sop/merge","/clickableObjects/perspectiveCamera_FOLLOW":"sop/perspectiveCamera","/clickableObjects/cameraLookAtClickableObjects1":"sop/cameraLookAtClickableObjects","/clickableObjects/cameraLookAtClickableObjects1/subnetInput1":"sop/subnetInput","/clickableObjects/cameraLookAtClickableObjects1/delete1":"sop/delete","/clickableObjects/cameraLookAtClickableObjects1/copy1":"sop/copy","/clickableObjects/cameraLookAtClickableObjects1/PRE_DELETE":"sop/null","/clickableObjects/cameraLookAtClickableObjects1/box1":"sop/box","/clickableObjects/cameraLookAtClickableObjects1/transformReset1":"sop/transformReset","/clickableObjects/cameraLookAtClickableObjects1/attribCreate1":"sop/attribCreate","/clickableObjects/cameraLookAtClickableObjects1/hierarchy1":"sop/hierarchy","/clickableObjects/cameraLookAtClickableObjects1/objectProperties1":"sop/objectProperties","/clickableObjects/cameraLookAtClickableObjects1/merge2":"sop/merge","/clickableObjects/cameraLookAtClickableObjects1/subnetOutput1":"sop/subnetOutput","/clickableObjects/cameraLookAtClickableObjects1/material1":"sop/material","/clickableObjects/cameraLookAtClickableObjects1/MAT":"sop/materialsNetwork","/clickableObjects/cameraLookAtClickableObjects1/MAT/meshStandard1":"mat/meshStandard","/clickableObjects/cameraLookAtClickableObjects1/subnetInput0":"sop/subnetInput","/clickableObjects/cameraLookAtClickableObjects1/actor_camera":"sop/actor","/clickableObjects/cameraLookAtClickableObjects1/actor_camera/getObjectAttribute1":"actor/getObjectAttribute","/clickableObjects/cameraLookAtClickableObjects1/actor_camera/onTick1":"actor/onTick","/clickableObjects/cameraLookAtClickableObjects1/actor_camera/setObjectLookAt1":"actor/setObjectLookAt","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent":"sop/actor","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent/onChildAttributeUpdate1":"actor/onChildAttributeUpdate","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent/or1":"actor/or","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent/setViewer1":"actor/setViewer","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects":"sop/actor","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/getObject1":"actor/getObject","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/getObjectProperty1":"actor/getObjectProperty","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/onObjectClick1":"actor/onObjectClick","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/onObjectHover1":"actor/onObjectHover","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/setObjectAttribute1":"actor/setObjectAttribute","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/setObjectAttribute2":"actor/setObjectAttribute","/clickableObjects/null1":"sop/null","/clickableObjects/fileGLTF1":"sop/fileGLTF","/clickableObjects/transform1":"sop/transform","/clickableObjects/fileGLTF2":"sop/fileGLTF","/clickableObjects/fileGLTF3":"sop/fileGLTF","/clickableObjects/transform2":"sop/transform","/clickableObjects/transform3":"sop/transform","/clickableObjects/merge1":"sop/merge"}
Js version
Editor version
Engine version
Name
*
Code
{"properties":{"frame":0,"maxFrame":600,"maxFrameLocked":false,"realtimeState":true,"mainCameraPath":"/geo2/geo2:sopGroup/perspectiveCamera_FOLLOW","versions":{"polygonjs":"1.2.57"}},"root":{"type":"root","nodes":{"grid":{"type":"geo","nodes":{"planeHelper1":{"type":"planeHelper","flags":{"display":true}}},"flags":{"display":true}},"lights":{"type":"geo","nodes":{"hemisphereLight1":{"type":"hemisphereLight"},"merge1":{"type":"merge","inputs":["hemisphereLight1","polarTransform1"],"flags":{"display":true}},"polarTransform1":{"type":"polarTransform","params":{"longitude":64.8,"latitude":39.6,"depth":4.2},"inputs":["spotLight1"]},"spotLight1":{"type":"spotLight"}},"flags":{"display":true}},"clickableObjects":{"type":"geo","nodes":{"merge2":{"type":"merge","inputs":["cameraLookAtClickableObjects1","null1"],"flags":{"display":true}},"perspectiveCamera_FOLLOW":{"type":"perspectiveCamera","params":{"position":[0,0.5,2.9]}},"cameraLookAtClickableObjects1":{"type":"cameraLookAtClickableObjects","polyNode":{"locked":true},"params":{"initLookAt":[0,0.43999999999999995,0]},"inputs":["perspectiveCamera_FOLLOW","null1"]},"null1":{"type":"null","inputs":["merge1"],"cloned_state_overriden":true},"fileGLTF1":{"type":"fileGLTF"},"transform1":{"type":"transform","params":{"applyOn":1,"t":[-1.624962803205223,0,0]},"inputs":["fileGLTF1"]},"fileGLTF2":{"type":"fileGLTF","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/models/resources/threedscans.com/horse_head.glb"}},"fileGLTF3":{"type":"fileGLTF","params":{"url":"https://raw.githubusercontent.com/polygonjs/polygonjs-assets/master/models/resources/threedscans.com/rhino.glb"}},"transform2":{"type":"transform","params":{"applyOn":1,"t":[-0.11431279664546157,0,0]},"inputs":["fileGLTF2"]},"transform3":{"type":"transform","params":{"applyOn":1,"t":[1.632836513500666,0,0]},"inputs":["fileGLTF3"]},"merge1":{"type":"merge","inputs":["transform1","transform2","transform3"]}},"flags":{"display":true}}},"params":{"mainCameraPath":"/geo2/geo2:sopGroup/perspectiveCamera_FOLLOW"}},"ui":{"nodes":{"grid":{"pos":[-50,-250],"nodes":{"planeHelper1":{"pos":[0,0]}}},"lights":{"pos":[-50,-150],"selection":["spotLight1"],"nodes":{"hemisphereLight1":{"pos":[-200,-200]},"merge1":{"pos":[-50,200]},"polarTransform1":{"pos":[150,-50]},"spotLight1":{"pos":[150,-200]}}},"clickableObjects":{"pos":[-50,-50],"nodes":{"merge2":{"pos":[250,500]},"perspectiveCamera_FOLLOW":{"pos":[-300,0]},"cameraLookAtClickableObjects1":{"pos":[-50,300]},"null1":{"pos":[250,50]},"fileGLTF1":{"pos":[-100,-550]},"transform1":{"pos":[-100,-400]},"fileGLTF2":{"pos":[250,-550]},"fileGLTF3":{"pos":[550,-550]},"transform2":{"pos":[250,-400]},"transform3":{"pos":[550,-400]},"merge1":{"pos":[250,-100]}}}}},"shaders":{},"embeddedPolyNodes":{"sop/cameraLookAtClickableObjects":{"metadata":{"version":{"editor":"1.2.57-1","polygonjs":"1.2.57","marketplace":1},"createdAt":1668125112242},"nodeContext":"sop","inputs":{"simple":{"min":2,"max":2,"names":[]}},"params":[{"name":"initLookAt","type":"vector3","rawInput":[0,0.6000000000000001,0],"initValue":[0,0,0],"options":{}},{"name":"transitionSpeed","type":"float","rawInput":0.05,"initValue":0.05,"options":{"range":[0,1],"rangeLocked":[true,true]}},{"name":"displayClickableObjects","type":"boolean","rawInput":false,"initValue":false,"options":{}}],"nodes":{"subnetInput1":{"type":"subnetInput","params":{"input":1},"flags":{"display":true}},"delete1":{"type":"delete","params":{"class":1,"invert":true,"byExpression":true,"expression":"@objnum==copy('../copy1')"},"inputs":["PRE_DELETE"]},"copy1":{"type":"copy","params":{"count":"objectsCount('../PRE_DELETE')"},"inputs":["transformReset1"]},"PRE_DELETE":{"type":"null","inputs":["subnetInput1"]},"box1":{"type":"box","inputs":["delete1"]},"transformReset1":{"type":"transformReset","params":{"mode":2},"inputs":["box1"]},"attribCreate1":{"type":"attribCreate","params":{"class":1,"name":"lookAtTarget","size":3,"value3":["ch(\"../initLookAtx\")","ch(\"../initLookAty\")","ch(\"../initLookAtz\")"]},"inputs":["subnetInput0"]},"hierarchy1":{"type":"hierarchy","inputs":["actor_clickableObjects"]},"objectProperties1":{"type":"objectProperties","params":{"tname":true,"name":"clickableBoxes","tvisible":true,"visible":"ch(\"../displayClickableObjects\")"},"inputs":["actor_clickableObjectsParent"]},"merge2":{"type":"merge","inputs":["actor_camera","objectProperties1"]},"subnetOutput1":{"type":"subnetOutput","inputs":["merge2"]},"material1":{"type":"material","params":{"material":"../MAT/meshStandard1"},"inputs":["copy1"]},"MAT":{"type":"materialsNetwork","nodes":{"meshStandard1":{"type":"meshStandard","params":{"wireframe":1}}}},"subnetInput0":{"type":"subnetInput"},"actor_camera":{"type":"actor","nodes":{"getObjectAttribute1":{"type":"getObjectAttribute","params":{"attribName":"lookAtTarget","type":6},"connection_points":{"in":[{"name":"Object3D","type":"Object3D","isArray":false}],"out":[{"name":"val","type":"Vector3","isArray":false}]}},"onTick1":{"type":"onTick"},"setObjectLookAt1":{"type":"setObjectLookAt","params":{"targetPosition":{"overriden_options":{}},"up":{"overriden_options":{}},"lerp":{"raw_input":"ch(\"../../transitionSpeed\")","overriden_options":{}},"invertDirection":{"overriden_options":{}},"updateMatrix":{"overriden_options":{}}},"maxInputsCount":7,"inputs":[{"index":0,"node":"onTick1","output":"trigger"},null,{"index":2,"node":"getObjectAttribute1","output":"val"}]}},"inputs":["attribCreate1"]},"actor_clickableObjectsParent":{"type":"actor","nodes":{"onChildAttributeUpdate1":{"type":"onChildAttributeUpdate","params":{"attribName":"hovered","type":0},"connection_points":{"in":[],"out":[{"name":"trigger","type":"trigger","isArray":false},{"name":"newValues","type":"boolean[]","isArray":true},{"name":"previousValues","type":"boolean[]","isArray":true}]}},"or1":{"type":"or","inputs":[{"index":0,"node":"onChildAttributeUpdate1","output":"newValues"}],"connection_points":{"in":[{"name":"booleans","type":"boolean[]","isArray":true}],"out":[{"name":"val","type":"boolean","isArray":false}]}},"setViewer1":{"type":"setViewer","params":{"className":{"overriden_options":{}},"set":{"overriden_options":{}}},"maxInputsCount":3,"inputs":[{"index":0,"node":"onChildAttributeUpdate1","output":"trigger"},null,{"index":2,"node":"or1","output":"val"}]}},"inputs":["hierarchy1"]},"actor_clickableObjects":{"type":"actor","nodes":{"getObject1":{"type":"getObject","params":{"getCurrentObject":false,"mask":"*/`cameraName('../../subnetInput0',0)`"},"maxInputsCount":2},"getObjectProperty1":{"type":"getObjectProperty"},"onObjectClick1":{"type":"onObjectClick"},"onObjectHover1":{"type":"onObjectHover"},"setObjectAttribute1":{"type":"setObjectAttribute","params":{"trigger":{"overriden_options":{}},"attribName":"lookAtTarget","type":6,"lerp":{"type":"float","default_value":1,"options":{"spare":true,"editable":true}},"val":{"type":"vector3","default_value":[0,0,0],"options":{"spare":true,"editable":true},"overriden_options":{}}},"maxInputsCount":4,"inputs":[{"index":0,"node":"onObjectClick1","output":"trigger"},{"index":1,"node":"getObject1","output":"object3D"},null,{"index":3,"node":"getObjectProperty1","output":"position"}],"connection_points":{"in":[{"name":"trigger","type":"trigger","isArray":false},{"name":"Object3D","type":"Object3D","isArray":false},{"name":"lerp","type":"float","isArray":false},{"name":"val","type":"Vector3","isArray":false}],"out":[]}},"setObjectAttribute2":{"type":"setObjectAttribute","params":{"trigger":{"overriden_options":{}},"attribName":"hovered","type":0,"lerp":{"type":"float","default_value":1,"options":{"spare":true,"editable":true}},"val":{"type":"boolean","default_value":false,"options":{"spare":true,"editable":true},"overriden_options":{}}},"maxInputsCount":4,"inputs":[{"index":0,"node":"onObjectHover1","output":"trigger"},null,null,{"index":3,"node":"onObjectHover1","output":"hovered"}],"connection_points":{"in":[{"name":"trigger","type":"trigger","isArray":false},{"name":"Object3D","type":"Object3D","isArray":false},{"name":"lerp","type":"float","isArray":false},{"name":"val","type":"boolean","isArray":false}],"out":[]}}},"inputs":["material1"]}},"ui":{"subnetInput1":{"pos":[300,-150],"comment":"This imports the objects"},"delete1":{"pos":[300,200],"comment":"the delete node isolate a single object, and that object changes on every iteration from the copy node. This is done using the expression `@objnum==copy('../copy1')`"},"copy1":{"pos":[300,1050],"comment":"the copy node iterates over each object from the PRE_DELETE node.\\n\\nYou can see other examples using this node, in the [instancing section](https://polygonjs.com/docs/examples). Or you can check this one showing [how to create procedural stairs](https://polygonjs.com/demo?example=bycategory/instancing/stairsarefun/staircasesimple) too."},"PRE_DELETE":{"pos":[300,0],"comment":"The PRE_DELETE node is used by the copy node below as a reference, to know how many objects are imported, using the [objectsCount](https://polygonjs.com/docs/expressions/objectscount) expression."},"box1":{"pos":[300,500],"comment":"This creates a box from an isolated object"},"transformReset1":{"pos":[300,700],"comment":"By default, the way the box is created is that the object's center is at the origin, but the points of the box mesh are adapted to the input.\\nIn this case, we need the center of the box to be at the center of the object. This is what the transformReset do."},"attribCreate1":{"pos":[-100,2550],"comment":"this adds a default `lookAtTarget` attribute to the camera. This defines where the camera looks at when the scene starts playing. "},"hierarchy1":{"pos":[300,2200],"comment":"this adds a parent to the clickable objects. The reason we need a parent is to apply the following [actor](../actor_clickableObjectsParent) node, which set the cursor to a pointer"},"objectProperties1":{"pos":[300,2750],"comment":"By default, this hides the input objects. But this can be overriden by the parameter `displayClickableObjects` on the polynode. You can see the `visible` param is linked to it using the [ch](https://polygonjs.com/docs/expressions/ch) expression"},"merge2":{"pos":[100,3200]},"subnetOutput1":{"pos":[100,3350]},"material1":{"pos":[300,1500],"comment":"this assigns a basic material on the boxes, with wireframe `on`. This is only apparent if you toggle the `displayClickableObjects` param of the polyNode."},"MAT":{"pos":[100,1500],"selection":["meshStandard1"],"nodes":{"meshStandard1":{"pos":[0,0]}}},"subnetInput0":{"pos":[-100,2350]},"actor_camera":{"pos":[-100,2900],"selection":["setObjectLookAt1"],"nodes":{"getObjectAttribute1":{"pos":[0,100]},"onTick1":{"pos":[0,-100]},"setObjectLookAt1":{"pos":[400,0],"comment":"this is triggered on every frame, as the [onTick](../onTick1) node is plugged in its `trigger` input.\\nThis therefore constantly reads the value of the `lookAtTarget` attribute on the camera, and sets it to look at that position in space.\\nNote that the lerp is linked to the `transitionSpeed` parameter on the polynode, which defines how quickly the camera rotates."}}},"actor_clickableObjectsParent":{"pos":[300,2450],"comment":"this node checks if any children of the current object (the parent created by the hierarchy node) has the attribute `hovered` set to true. If that's the case, the viewer will have its class set to `active`, which has a rule to set the cursor to a pointer","selection":["setViewer1"],"nodes":{"onChildAttributeUpdate1":{"pos":[-50,300]},"or1":{"pos":[150,350]},"setViewer1":{"pos":[350,300]}}},"actor_clickableObjects":{"pos":[300,1750],"comment":"This adds 2 behaviors to each box. Dive [inside this node](.) to see how it does.\\nIn short, the behaviors are:\\n- sets a `hovered` attribute to true when the cursor hovers over the box\\n- sets a `lookAtTarget` attribute on the camera, using the box position as value. This is what the camera will use to know which direction to rotate to.","selection":["getObject1"],"nodes":{"getObject1":{"pos":[-100,300],"comment":"this node returns the camera object from the first input, using the [cameraName](https://polygonjs.com/docs/expressions/cameraName) expression, with the [subnetInput0](../../subnetInput0) as argument "},"getObjectProperty1":{"pos":[-50,700]},"onObjectClick1":{"pos":[-100,150]},"onObjectHover1":{"pos":[0,-150]},"setObjectAttribute1":{"pos":[350,250],"comment":"This node is triggered when the object is clicked. When that happens, it sets the attribute `lookAtTarget` of the camera to the `position` of the current object."},"setObjectAttribute2":{"pos":[250,-150],"comment":"this sets a `hovered` attribute to the object, which is then used by this [actor node](../../actor_clickableObjectsParent) to set the cursor to a pointer"}}}}}}}
Code editor
{"multiple_panel":{"split_ratio":0.5,"split_panel0":{"split_ratio":0.5,"split_panel0":{"panelTypes":["viewer"],"currentPanelIndex":0,"panel_data":{"camera":"/clickableObjects/clickableObjects:sopGroup/perspectiveCamera_FOLLOW","isViewerInitLayoutData":true,"linkIndex":1}},"split_panel1":{"panelTypes":["params"],"currentPanelIndex":0,"panel_data":{"active_folder":40,"linkIndex":1}},"split_mode":"vertical"},"split_panel1":{"panelTypes":["network","params","viewer"],"currentPanelIndex":0,"panel_data":{"camera":{"position":{"x":-365.093096975006,"y":-11.961970734779321},"zoom":0.5522496570644719},"history":{"2":{"position":{"x":-48,"y":-22},"zoom":0.6140000000000001},"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":125,"y":-100},"zoom":0.6140000000000001},"131":{"position":{"x":-59.04899999999998,"y":-65.1854},"zoom":0.8467543904215146},"151":{"position":{"x":-365.093096975006,"y":-11.961970734779321},"zoom":0.5522496570644719},"398":{"position":{"x":-207.21074214939952,"y":-231.4960896252153},"zoom":0.5512496570644719},"602":{"position":{"x":0,"y":0},"zoom":0.6140000000000001},"614":{"position":{"x":-205.10063952068407,"y":-2913.314613306272},"zoom":0.7250000000000002},"820":{"position":{"x":-344.84614658230925,"y":-46.690004361765716},"zoom":0.8790000000000009},"836":{"position":{"x":-87.43228602383525,"y":-400.7583965330444},"zoom":0.8500000000000003}},"linkIndex":1}},"split_mode":"horizontal"},"currentNodes":["/clickableObjects","/","/","/","/","/","/","/"],"navigationHistory":{"nodePaths":{"1":["/clickableObjects","/","/clickableObjects"],"2":["/"],"3":["/"],"4":["/"],"5":["/"],"6":["/"],"7":["/"],"8":["/"]},"index":{"1":2,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0}},"fullscreenPanelId":null,"saveOptions":{"createExport":true,"skipExportSinceRemoteAssetsPresents":false,"minimizeFilesCount":false,"compressJs":true,"createZip":false,"runPostExportCommand":false},"paramsModal":[]}
Used nodes
actor/getObject;actor/getObjectAttribute;actor/getObjectProperty;actor/onChildAttributeUpdate;actor/onObjectClick;actor/onObjectHover;actor/onTick;actor/or;actor/setObjectAttribute;actor/setObjectLookAt;actor/setViewer;mat/meshStandard;obj/geo;sop/actor;sop/attribCreate;sop/box;sop/cameraLookAtClickableObjects;sop/copy;sop/delete;sop/fileGLTF;sop/hemisphereLight;sop/hierarchy;sop/material;sop/materialsNetwork;sop/merge;sop/null;sop/objectProperties;sop/perspectiveCamera;sop/planeHelper;sop/polarTransform;sop/spotLight;sop/subnetInput;sop/subnetOutput;sop/transform;sop/transformReset
Used operations
Used modules
Used assemblers
Used integrations
[]
Used assets
Nodes map
{"/grid":"obj/geo","/grid/planeHelper1":"sop/planeHelper","/lights":"obj/geo","/lights/hemisphereLight1":"sop/hemisphereLight","/lights/merge1":"sop/merge","/lights/polarTransform1":"sop/polarTransform","/lights/spotLight1":"sop/spotLight","/clickableObjects":"obj/geo","/clickableObjects/merge2":"sop/merge","/clickableObjects/perspectiveCamera_FOLLOW":"sop/perspectiveCamera","/clickableObjects/cameraLookAtClickableObjects1":"sop/cameraLookAtClickableObjects","/clickableObjects/cameraLookAtClickableObjects1/subnetInput1":"sop/subnetInput","/clickableObjects/cameraLookAtClickableObjects1/delete1":"sop/delete","/clickableObjects/cameraLookAtClickableObjects1/copy1":"sop/copy","/clickableObjects/cameraLookAtClickableObjects1/PRE_DELETE":"sop/null","/clickableObjects/cameraLookAtClickableObjects1/box1":"sop/box","/clickableObjects/cameraLookAtClickableObjects1/transformReset1":"sop/transformReset","/clickableObjects/cameraLookAtClickableObjects1/attribCreate1":"sop/attribCreate","/clickableObjects/cameraLookAtClickableObjects1/hierarchy1":"sop/hierarchy","/clickableObjects/cameraLookAtClickableObjects1/objectProperties1":"sop/objectProperties","/clickableObjects/cameraLookAtClickableObjects1/merge2":"sop/merge","/clickableObjects/cameraLookAtClickableObjects1/subnetOutput1":"sop/subnetOutput","/clickableObjects/cameraLookAtClickableObjects1/material1":"sop/material","/clickableObjects/cameraLookAtClickableObjects1/MAT":"sop/materialsNetwork","/clickableObjects/cameraLookAtClickableObjects1/MAT/meshStandard1":"mat/meshStandard","/clickableObjects/cameraLookAtClickableObjects1/subnetInput0":"sop/subnetInput","/clickableObjects/cameraLookAtClickableObjects1/actor_camera":"sop/actor","/clickableObjects/cameraLookAtClickableObjects1/actor_camera/getObjectAttribute1":"actor/getObjectAttribute","/clickableObjects/cameraLookAtClickableObjects1/actor_camera/onTick1":"actor/onTick","/clickableObjects/cameraLookAtClickableObjects1/actor_camera/setObjectLookAt1":"actor/setObjectLookAt","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent":"sop/actor","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent/onChildAttributeUpdate1":"actor/onChildAttributeUpdate","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent/or1":"actor/or","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjectsParent/setViewer1":"actor/setViewer","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects":"sop/actor","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/getObject1":"actor/getObject","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/getObjectProperty1":"actor/getObjectProperty","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/onObjectClick1":"actor/onObjectClick","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/onObjectHover1":"actor/onObjectHover","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/setObjectAttribute1":"actor/setObjectAttribute","/clickableObjects/cameraLookAtClickableObjects1/actor_clickableObjects/setObjectAttribute2":"actor/setObjectAttribute","/clickableObjects/null1":"sop/null","/clickableObjects/fileGLTF1":"sop/fileGLTF","/clickableObjects/transform1":"sop/transform","/clickableObjects/fileGLTF2":"sop/fileGLTF","/clickableObjects/fileGLTF3":"sop/fileGLTF","/clickableObjects/transform2":"sop/transform","/clickableObjects/transform3":"sop/transform","/clickableObjects/merge1":"sop/merge"}
Js version
Editor version
Engine version
Logout
0%
There was a problem displaying your scene:
view scene source