worldToScreen issues

david.thibault
Posts: 7
Joined: Fri Dec 09, 2016 2:40 pm

worldToScreen issues

Postby david.thibault » Wed Dec 14, 2016 10:11 am

Hello,
I would like to move a div according to the camera movement.
I tried to setup my div with a central spherical coordinate x= 0, y=0, z=1;

  1. var worldPos = new THREE.Vector3(x, y, z);
  2. var screenPos = view.worldToScreen(worldPos, 0);
  3. hotspot.style.left = screenPos.x + "px";
  4. hotspot.style.top = screenPos.y + "px";


When I move from left to right it's alright, my div is well positioned, but from top to bottom the "y" component doesn't seem ok.
Do you have any idea ? or any solution ?

Thanks.

Here is my full code :
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>KEN - Video</title>
  6.         <style type="text/css">
  7.             html
  8.             {
  9.                 width: 100%;
  10.                 height: 100%;
  11.             }
  12.             body
  13.             {
  14.                 width: 100%;
  15.                 height: 100%;
  16.                 margin: 0;
  17.                 padding: 0;
  18.             }
  19.             div#play-pause
  20.             {
  21.                 position: absolute;
  22.                 bottom: 10px;
  23.                 background: rgba(0, 0, 0, 0.75);
  24.                 color: whitesmoke;
  25.                 padding: 15px;
  26.                 width: 10%;
  27.                 left: 45%;
  28.                 text-align: center;
  29.             }
  30.             div#hotspot
  31.             {
  32.                 position: absolute;
  33.                 background: red;
  34.                 width: 20px;
  35.                 height: 20px;
  36.                 left: 0px;
  37.                 top: 0px;
  38.             }
  39.             div#container
  40.             {
  41.                 width: 100%;
  42.                 height: 100%;
  43.             }
  44.         </style>
  45.     </head>
  46.     <body>
  47.         <div id="container"></div>
  48.         <div id="play-pause">
  49.             Click to play and pause video.
  50.         </div>
  51.         <div id="hotspot">
  52.         </div>
  53.         <!-- Include the KEN library -->
  54.         <script src="http://kenprivatebeta.kolor.com/releases/0.1.0/build/ken.min.js"></script>
  55.        
  56.         <script type="text/javascript">
  57.  
  58.             var video = null;
  59.             var view = null;
  60.             var camera = null;
  61.             var yaw = 0;
  62.             var fov = 90;
  63.             var pitch = 0;
  64.             var roll = 0;
  65.             var rho = 1; //radius.
  66.             var theta = 0;//[-PI:PI]
  67.             var phi = 0;//[-PI/2:PI/2]
  68.  
  69.             var hotspot = document.getElementById("hotspot");
  70.             var playPause = document.getElementById("play-pause");
  71.             playPause.addEventListener("click", playPauseCb);
  72.             var playState = false;
  73.             function playPauseCb()
  74.             {
  75.                 if (video !== null) {
  76.                     if (playState)
  77.                         video.pause();
  78.                     else
  79.                         video.play();
  80.                 }
  81.             }
  82.  
  83.             var viewer = new KEN.Viewer("container", "config.json");
  84.             viewer.onReady.add(onReadyHandler);
  85.             function onReadyHandler()
  86.             {
  87.                 console.log("onReadyViewer");
  88.                 // Listen to the scene load like this
  89.                 viewer.tour.onSceneLoadComplete.add(sceneLoadCompleteHandler);
  90.             }
  91.             function sceneLoadCompleteHandler(event)
  92.             {
  93.                 console.log("onSceneLoadComplete");
  94.                 // Listen to the camera change like this
  95.                 viewer.renderer.camera.onCameraChange.add(cameraChangeHandler);
  96.                 setupVideo();
  97.             }
  98.             function cameraChangeHandler(event)
  99.             {
  100. //                console.log("onCameraChange");
  101.                 var update = false;
  102.                 if (camera.yaw !== yaw) {
  103.                     yaw = camera.yaw;
  104.                     update = true;
  105.                 }
  106.                 if (camera.roll !== roll) {
  107.                     roll = camera.roll;
  108.                     update = true;
  109.                 }
  110.                 if (camera.pitch !== pitch) {
  111.                     pitch = camera.pitch;
  112.                     update = true;
  113.                 }
  114.                 if (camera.fov !== fov) {
  115.                     fov = camera.fov;
  116.                     update = true;
  117.                 }
  118.                 if (update) {
  119. //                    console.log("onCameraChange");
  120.                     updateCamera();
  121.  
  122.                 }
  123.             }
  124.             function updateCamera()
  125.             {
  126.                 var x = rho * Math.cos(theta) * Math.sin(phi);
  127.                 var y = rho * Math.sin(theta) * Math.sin(phi);
  128.                 var z = rho * Math.cos(phi);
  129.  
  130.                 var worldPos = new THREE.Vector3(x, y, z);
  131.                 var screenPos = view.worldToScreen(worldPos, 0);
  132.                 console.log(theta, phi, worldPos, screenPos);
  133.                 hotspot.style.left = screenPos.x + "px";
  134.                 hotspot.style.top = screenPos.y + "px";
  135.             }
  136.  
  137.             window.onkeydown = function (e) {
  138.                 var key = e.keyCode ? e.keyCode : e.which;
  139.                 if (key == 38) {
  140.                     camera.pitch++;
  141. //                    theta += Math.PI / 8;
  142.                 } else if (key == 40) {
  143.                     camera.pitch--;
  144. //                    theta -= Math.PI / 8;
  145.                 } else if (key == 37) {
  146.                     camera.yaw--;
  147. //                    phi -= Math.PI / 8;
  148.                 } else if (key == 39) {
  149.                     camera.yaw++;
  150. //                    phi += Math.PI / 8;
  151.                 } else if (key == 109) {
  152.                     camera.roll++;
  153.                 } else if (key == 107) {
  154.                     camera.roll--;
  155.                 } else if (key == 13) {
  156.                     camera.pitch = 0;
  157.                     camera.roll = 0;
  158.                     camera.yaw = 0;
  159.                 }
  160.                 updateCamera();
  161.             };
  162.  
  163.             function onLoadedMetaDataHandler(event)
  164.             {
  165.                 console.log("onLoadedMetaData");
  166.             }
  167.             function onPlayHandler(event)
  168.             {
  169.                 console.log("onPlay");
  170.                 playState = true;
  171.             }
  172.             function onPauseHandler(event)
  173.             {
  174.                 console.log("onPause");
  175.                 playState = false;
  176.             }
  177. //            function onTimeUpdateHandler(event)
  178. //            {
  179. //                console.log("onTimeUpdate", video.currentTime);
  180. //            }
  181.             function setupVideo()
  182.             {
  183.                 // Try to get the video through the renderer
  184.                 if (viewer.renderer.media !== null)
  185.                 {
  186.                     //Get the video reference
  187.                     video = viewer.renderer.media.displayObject;
  188.                     view = viewer.renderer.view;
  189.                     camera = viewer.renderer.camera;
  190.  
  191.                     // Add any listeners you need to your video (see the KEN.Video documentation)
  192.                     video.onLoadedMetaData.add(onLoadedMetaDataHandler);
  193.                     video.onPlay.add(onPlayHandler);
  194. //                    video.onTimeUpdate.add(onTimeUpdateHandler);
  195.                     video.onPause.add(onPauseHandler);
  196.                     updateCamera();
  197.                 }
  198.                 // If the media is not available, subscibe to the onMediaReady event!
  199.                 else
  200.                 {
  201.                     if (viewer.renderer.onMediaReady.has(setupVideo) === false)
  202.                     {
  203.                         viewer.renderer.onMediaReady.addOnce(setupVideo);
  204.                     }
  205.                 }
  206.             }
  207.         </script>
  208.     </body>
  209. </html>

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: worldToScreen issues

Postby rroux » Thu Dec 15, 2016 4:09 pm

We made a "proof of concept" of HotspotDOM. We use to do something like this for screen position :

  1. var sphericalPoint = KEN.Utils.toTHREESpherical(radius, theta, phi);
  2. var positionWorld = new THREE.Vector3().setFromSpherical(sphericalPoint);
  3. var positionScreen = view.worldToScreen(positionWorld, 0);


Can you try this ? Maybe a coordinate is inverted I do not remmenber.
We have to work on this subject. I know that we have pretty good 3D hotspots rendered by threeJS and we plan to deliver a component to have HotspotDOM, so that is part of the near future roadmap :) Basically this will be a DOM container positioned in space and time.

I you make any experiments in DOM positioning I'm interested to see your results !

Have a nice day :)
- Raphaël

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: worldToScreen issues

Postby rroux » Thu Dec 15, 2016 4:12 pm

For your information a component to handle keyboard controls will be release in a few days ;)
- Raphaël

User avatar
rroux
ForgeJS Team
Posts: 126
Joined: Wed Oct 26, 2016 12:19 pm

Re: worldToScreen issues

Postby rroux » Wed Jun 21, 2017 8:10 am

Hi! How are you David?

For your information, the wordToScreen and screenToWorld + Hotspot DOM will be released this summer :)
Almost there!

Have a nice day!
- Raphaël

Who is online

Users browsing this forum: No registered users and 2 guests