<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body text="#000000" bgcolor="#ffffff">
Hello :)<br>
is there any way to read out camera position and orientation via
JavaScript? It seems there is no ProximitySensor or equivalent in
X3DOM.<br>
<br>
I tried to update the viewport node via JavaScript and keydown
Events manualy. This kinda works, but there are also some
disadvantages like manual collission detection. <br>
<br>
Thanks in advance :)<br>
Cheers<br>
Darky<br>
<br>
Code Snippet:<br>
<br>
<pre id="line1"><<span class="start-tag">html</span>>
<<span class="start-tag">head</span>>
<<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">'text/javascript' </span><span class="attribute-name">src</span><span>='</span><a href="view-source:http://www.x3dom.org/x3dom/release/x3dom.js">http://www.x3dom.org/x3dom/release/x3dom.js</a><span>'</span>></<span class="end-tag">script</span>>
<<span class="start-tag">link</span><span class="attribute-name"> rel</span>=<span class="attribute-value">"stylesheet" </span><span class="attribute-name">type</span>=<span class="attribute-value">"text/css" </span><span class="attribute-name">href</span><span>="</span><a href="view-source:http://www.x3dom.org/x3dom/release/x3dom.css">http://www.x3dom.org/x3dom/release/x3dom.css</a><span>" </span><span class="error"><span class="attribute-name">/</span></span>>
<<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">'text/javascript'</span>>
document.onkeydown = handleKeys;
function handleKeys(e)
{
var key = (window.event) ? event.keyCode : e.keyCode;
var tmp = ((document.getElementById('vp')).getAttribute('position')).split(' ', 3);
var t_pos_x = parseFloat(tmp[0]);
var t_pos_y = parseFloat(tmp[1]);
var t_pos_z = parseFloat(tmp[2]);
var speed = 0.5;
switch(key) // custom movement :)
{
case 38:
document.getElementById('vp').setAttribute('position', '' + t_pos_x + ' ' + t_pos_y + ' ' + (t_pos_z-speed));
break;
case 40:
document.getElementById('vp').setAttribute('position', '' + t_pos_x + ' ' + t_pos_y + ' ' + (t_pos_z+speed));
break;
case 39:
document.getElementById('vp').setAttribute('position', '' + (t_pos_x+speed) + ' ' + t_pos_y + ' ' + t_pos_z);
break;
case 37:
document.getElementById('vp').setAttribute('position', '' + (t_pos_x-speed) + ' ' + t_pos_y + ' ' + t_pos_z);
break;
}
updatePositionInfoLabel();
}
</<span class="end-tag">script</span>>
<<span class="start-tag">script</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/javascript"</span>>
var pos_x = 0.0;
var pos_y = 0.0;
var pos_z = 0.0;
function updatePositionInfoLabel()
{
var tmp = ((document.getElementById('vp')).getAttribute('position')).split(' ', 3);
pos_x = tmp[0];
pos_y = tmp[1];
pos_z = tmp[2];
document.getElementById('movement').innerHTML = 'Pos: ' + pos_x + ' ' + pos_y + ' ' + pos_z;
}
</<span class="end-tag">script</span>>
</<span class="end-tag">head</span>>
<<span class="start-tag">body</span>>
<<span class="start-tag">x3d</span><span class="attribute-name"> id</span>=<span class="attribute-value">'xdoc_1' </span><span class="attribute-name">width</span>=<span class="attribute-value">'400px' </span><span class="attribute-name">height</span>=<span class="attribute-value">'400px'</span>>
</pre>
<pre id="line60"> <<span class="start-tag">scene</span>>
<<span class="start-tag">navigationInfo</span><span class="attribute-name"> type</span>=<span class="attribute-value">'"examine" "any"'</span>></<span class="end-tag">navigationInfo</span>>
<<span class="start-tag">viewpoint</span><span class="attribute-name"> id</span>=<span class="attribute-value">'vp' </span><span class="attribute-name">position</span>=<span class="attribute-value">'0 0 5'</span>></<span class="end-tag">viewpoint</span>>
<<span class="start-tag">transform</span><span class="attribute-name"> id</span>=<span class="attribute-value">'s_cone1' </span><span class="attribute-name">scale</span>=<span class="attribute-value">'0.2 0.2 0.2' </span><span class="attribute-name">center</span>=<span class="attribute-value">'0 0 0' </span><span class="attribute-name">onclick</span>=<span class="attribute-value">'updatePositionInfoLabel();'</span>>
<<span class="start-tag">shape</span>>
<<span class="start-tag">appearance</span><span class="attribute-name"> </span>>
<<span class="start-tag">material</span><span class="attribute-name"> id</span>=<span class="attribute-value">'dc_yellow' </span><span class="attribute-name">diffuseColor</span>=<span class="attribute-value">'yellow'</span>></<span class="end-tag">material</span>>
</<span class="end-tag">appearance</span><span class="attribute-name"> </span>>
<<span class="start-tag">cone</span><span class="error"><span class="attribute-name">/</span></span>>
</pre>
<pre id="line69"> </<span class="end-tag">shape</span>>
</<span class="end-tag">transform</span>>
</<span class="end-tag">scene</span>>
</<span class="end-tag">x3d</span>>
<<span class="start-tag">label</span><span class="attribute-name"> id</span>=<span class="attribute-value">"movement"</span>>Movement</<span class="end-tag">label</span>>
</<span class="end-tag">body</span>>
</<span class="end-tag">html</span>></pre>
<br>
</body>
</html>