How to do floating links?

Studio95 · November 16, 2016, 11:34am

Hi there, I have been working on a project for the last few days and I have become stuck. I am wanting to add links that link to pages on my webpage.

In a simple sense, I am wanting to link parts of my 3D object to webpages. I have been looking around and it sounds possible. however, I am not to sure how I can do this.

This is the project so far. all I am wanting to do is now link parts. I just don’t know where to start.

Studio95 · November 16, 2016, 11:35am

I have been reading this but I am still confused… http://developer.playcanvas.com/en/user-manual/publishing/web/communicating-webpage/

max · November 16, 2016, 11:43am

You want to create some UI?

Studio95 · November 16, 2016, 11:49am

how would I do that? I am looking online and its saying something like using CSS3 and using traslate3d or something

max · November 16, 2016, 12:24pm

There have been many discussions on forum and there are many example projects you can find around that show how to create links.

Do not rush, try to understand your task clearly, and then break it into smaller tasks. Learn related bits first, and then build up slowly but steadily your understanding on things.

Check User Manual: http://developer.playcanvas.com/en/user-manual/
Here is project on simple CSS/HTML https://playcanvas.com/editor/scene/380209

If you face any specific issue, and you’ve tried to investigate using Debugging http://developer.playcanvas.com/en/user-manual/scripting/debugging/ and still can’t get it, then it probably worth a question on forum, but do make sure you provide very clear example showcasing your problem and share what you have tried and what works not as expected.

Questions without specifics - are impossible to answer.
And writing code, I’m afraid - you will have to do it yourself, unless you hire someone to do it for you

Studio95 · November 23, 2016, 9:15am

I have been wanting to follow in the foot steps of Unit9 with there http://viewfromabove.emirates.com/3d website, as you can see it has a 3d Sphere that has links that attack to points on the 3d model. I am not trying to rush the project I am just wanting to learn how this is done.

vaios · November 23, 2016, 9:40am

A way to do that is to use HTML for each link and use absolute positioning on each link to place it above various points in the 3d world. So rough steps for this are:

Create a script that you attach on each entity you want to have a floating link above
That script should create a link styled the way you want to when the entity is initialized and it will append that link to the document. Those elements should have position: absolute
In the script’s update method, you should use the worldToScreen method of the camera component to convert your 3D coordinates to 2D space coordinates. So find the camera in the scene and then do var screenPos = cameraEntity.camera.worldToScreen(this.entity.getPosition()). Then you set the top and left coordinates of the style of the floating element to the screen coordinates calculated. That should make the floating element be on top of the 3d element in your scene.
Extra care should be taken to hide those elements when they’re off screen or when they’re not supposed to be visible in general.

That’s rougly how it works. Make sure to check the developer guide for tutorials on how to write scripts, how to use script attributes including HTML / CSS script attributes, and let us know if you need any help.

vaios · November 23, 2016, 6:02pm

Looks like we’ve got a new tutorial related to this http://developer.playcanvas.com/en/tutorials/information-hotspots/

Studio95 · November 30, 2016, 10:39am

I have been looking through the “Tutorial” which hasn’t really shown me much as the majority of the code is hidden. I have copied over the scrips from the original tutorial into my editor I have got some success but I am still confused as to what section does what.

dave · November 30, 2016, 11:57am

What code is hidden?

Studio95 · December 4, 2016, 6:16pm

I just seem to be very confused. the tutorial isnt really a tutorial as I dont really understand JS

Studio95 · December 4, 2016, 6:35pm

see I am copying the code from one and writing the script in the program… Should I copy it into a web editor and save it then upload it? I think thats my problem…

Studio95 · December 4, 2016, 6:55pm

this is my current problem… @vaios @dave

TypeError: Cannot read property ‘camera’ of null
at script.ShapePicker.doRayCast (https://playcanvas.com/api/assets/files/shape-picker.js?id=5849566:33:22)
at script.ShapePicker.onMouseDown (https://playcanvas.com/api/assets/files/shape-picker.js?id=5849566:52:14)
at Mouse.fire (https://code.playcanvas.com/playcanvas-stable.js:571:37)
at Mouse._handleDown (https://code.playcanvas.com/playcanvas-stable.js:16358:10)