3D object attached to the screen

Follow

Dadeko

Snap Lens Network Member Lens Studio Team

• May 30, 2018 20:21

Hello everyone,

Is there a way to attach a 3D object to the screen or to put a 3D object in the billboard ? I mean, I want to attach 3D flags on the sides of the screen but when I test it, the flags are not at the same place on different phones and I cannot display them with the orthogonal camera that I use for the billboard.

Thank you for considering my question,

Maureen :) !

0

• 

  Kaitlyn Benitez-Strine

  Snap Lens Network Member Lens Studio Team

  • May 30, 2018 22:58

  Hey Maureen,

  Sounds like you're interested in including a first person attached object into the Lens. Have you seen this guide yet? Let us know if this wasn't the effect you were going for and we can further direct.

  Cheers,
  Kaitlyn

  Comment actions Permalink
• 

  Dadeko

  Snap Lens Network Member Lens Studio Team

  • May 31, 2018 10:32

  Hello Kaitlyn,

  Thank you for your answer. I tried to follow the guide you sent me but the problem is still there :

  The view I have on Lens Studio : 
  
  
  

  The view I have on iPhone X :

  

  And the view I have on a Huawei :

  

   

  So I still don't know how to attach them to the borders of the screen :/

  Thanks, 

  Maureen

  Comment actions Permalink
• 

  Jacob

  Snap Lens Network Member Lens Studio Team

  • June 01, 2018 19:08

  Hi Maureen,

  You can use a script to convert screen a space position to world space and then move your object there.

  1. Make sure your flag objects are children of the camera you'd like them to draw them. This will fix problems if you're using the DeviceTracking component.

  2. Add the following script to each of your flag objects, making sure it's binded to the "Initialize" event.

  //@input Component.Camera cam
  //@input vec2 screenPoint
  //@input float distFromNear = 40.0
  
  script.createEvent("LateUpdateEvent").bind(function(){
      var pos = script.cam.screenSpaceToWorldSpace(script.screenPoint, script.distFromNear);
      script.getTransform().setWorldPosition(pos);
  });

  3. For each flag object, set "cam" to your camera.

  4. Adjust "screenPoint" to the screen space position you'd like the flag to stick to. (0.0, 0.5) would be the left side of the screen, centered vertically, and (1.0, 0.5) would be the right side of the screen, centered vertically.

  5. Adjust "distFromNear" to change how far away the flag will be positioned from the camera's near plane.

   

  If you're having issues, make sure your flag object's origin point is where you want it anchored to the screen (most likely the base of the flag). This will also only affect position and not scale, which you would have to calculate and apply in a similar way.

  Hope this works for you! Let me know if you have any questions.

  Comment actions Permalink

Please sign in to leave a comment.