最新知识：
<X3D>
<Scene>
<viewpoint onviewpointChanged="sync(event);"></viewpoint>
<Transform>
<shape>
......
其中该函数很重要onviewpointChanged="sync(event) ，当视角改变后，应该触发一些函数
<script>
var runtime = null;
function init()
{
console.log("initialize");
runtime = document.getElementsByTagName("x3d")[0].runtime;
runtime.onAnimationStarted = function()
{
console.log("Animation started");
};
runtime.onAnimationFinished = function()
{
console.log("Animation finished");
};
updateRect();
}
function sync(event)
{
updateRect();
}
function updateRect()
{
var rect = runtime.getSceneBRect();
var box = document.getElementById("box");
box.style.left = rect.x + "px";
box.style.top = rect.y + "px";
box.style.width = rect.width + "px";
box.style.height = rect.height + "px";
}
</script>
参考网页：
https://www.x3dom.org/x3dom/example/x3dom_uiEvents.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"></meta>
<link rel="stylesheet" type="text/css" href="https://www.x3dom.org/release/x3dom.css" />
<script type="text/javascript" src="https://www.x3dom.org/release/x3dom-full.js"></script>
</head>
<body style='background-color:#666;'>
<x3d id="boxes" showStat="false" showLog="false" width="800px" height="500px">
<scene DEF="scene">
<viewpoint position="20.1 9.2 14.1" orientation="-0.36193 0.93169 -0.03096 1.06264"
zNear="0.01" zFar="10000" id="aView"></viewpoint>
<background groundAngle='0.9 1.5 1.57' groundColor='0.21 0.18 0.66 0.2 0.44 0.85 0.51 0.81 0.95 0.51 0.81 0.95'
skyAngle='0.9 1.5 1.57' skyColor='0.21 0.18 0.66 0.2 0.44 0.85 0.51 0.81 0.95 0.51 0.81 0.95'
groundTransparency='0.5 0.5 0.5 0.5' skyTransparency='0.5 0.5 0.5 0.5'></background>
<Group onmousemove="updateStuff(event);">
<Transform DEF="coneTrafo" translation="-4.5 0 0"
onmouseover="document.getElementById('mouseOverEvent').innerHTML='cone.isOver=TRUE';"
onmouseout="document.getElementById('mouseOverEvent').innerHTML='cone.isOver=FALSE';">
<Shape DEF="coneShape">
<Appearance DEF="coneApp">
<Material DEF="coneMat" diffuseColor="0 1 0" specularColor=".5 .5 .5"></Material>
</Appearance>
<Cone DEF="cone"></Cone>
</Shape>
</Transform>
<Transform DEF="boxTrafo" translation='-1.5 0 0'
onmouseover="document.getElementById('mouseOverEvent').innerHTML='box.isOver=TRUE';"
onmouseout="document.getElementById('mouseOverEvent').innerHTML='box.isOver=FALSE';">
<Shape DEF="boxShape">
<Appearance DEF="boxApp">
<Material diffuseColor="1 0 1" specularColor=".5 .5 .5"></Material>
</Appearance>
<Box DEF="box"></Box>
</Shape>
</Transform>
<Transform DEF="sphereTrafo" translation="1.5 0 0"
onmouseover="document.getElementById('mouseOverEvent').innerHTML='sphere.isOver=TRUE';"
onmouseout="document.getElementById('mouseOverEvent').innerHTML='sphere.isOver=FALSE';">
<Shape DEF="sphereShape">
<Appearance DEF="sphereApp">
<Material diffuseColor="0 0 1" specularColor=".5 .5 .5"></Material>
</Appearance>
<Sphere DEF="sphere"></Sphere>
</Shape>
</Transform>
<Transform id="blubb" DEF="cylinderTrafo" translation="4.5 0 0"
onmouseover="document.getElementById('mouseOverEvent').innerHTML='cylinder.isOver=TRUE';"
onmouseout="document.getElementById('mouseOverEvent').innerHTML='cylinder.isOver=FALSE';">
<Shape DEF="cylinderShape">
<Appearance DEF="cylinderApp">
<Material id="blubbMat" diffuseColor="1 1 0" specularColor=".5 .5 .5"></Material>
</Appearance>
<Cylinder DEF="cylinder" radius="1.0" height="2.0" bottom="true" top="true" side="true"></Cylinder>
</Shape>
</Transform>
<Transform id="ring" translation="7.0 0 0"
onmouseover="document.getElementById('mouseOverEvent').innerHTML='torus.isOver=TRUE';"
onmouseout="document.getElementById('mouseOverEvent').innerHTML='torus.isOver=FALSE';">
<Shape DEF="cylinderShape">
<Appearance DEF="ringApp">
<Material diffuseColor="0 1 1" specularColor=".5 .5 .5"></Material>
</Appearance>
<Torus DEF="torus" innerRadius="0.25" outerRadius="0.75" subdivision="32 32"></Torus>
</Shape>
</Transform>
</Group>
<Transform id="box_2_id" DEF="box_2">
<Transform translation='-11 0 0' id="box_2_2_id"
"document.getElementById('mouseOverEvent').innerHTML='Mouse: over - draggable';"
"document.getElementById('mouseOverEvent').innerHTML='Mouse: out';">
<Shape>
<Appearance>
<Material diffuseColor='1 0 0' specularColor='.5 .5 .5'></Material>
</Appearance>
<Box size="4.5 4.5 4.5"></Box>
</Shape>
</Transform>
</Transform>
<Transform id="bar" translation="0 0 0">
<Transform id="foo" scale=".1 .4 .1" translation="0 -0.4 0">
<Shape isPickable="false" DEF="float">
<Appearance>
<Material diffuseColor="olivedrab" specularColor="peachpuff"></Material>
</Appearance>
<Cone></Cone>
</Shape>
</Transform>
</Transform>
</scene>
</x3d>
<div style="clear: both; padding: 2px; color: #00ff00; background-color: black; width: 798px;">
<p id="moveEvent" > ==> Drag the red box around with your mouse!
Use left button for pane and right for zoom. </p>
<p id="mouseOverEvent" > ==> Move your mouse over the little primitives to update the markers. </p>
<p id="viewMat" > </p>
</div>
<span id="anno2d" style="position: absolute; background-color: blue; color: yellow; border: yellow solid 1px; z-index: 10; padding: 6px; margin: 2px; width: 60px; height: 30 px; opacity: 0.7; text_align: center; top: 6px; left: 6px;">
Annotation</span>
<script>
// the x3dom runtime object
var runtime = null;
var drag = false;
// on button press
function start(event)
{
if (!drag) {
document.getElementById('moveEvent').innerHTML = "Down: [" + event.layerX + " | " + event.layerY + "]";
drag = true;
}
}
// on mouse move
function moveCallback(elem, trans)
{
document.getElementById('moveEvent').innerHTML = "Move " + elem.id + ": [" + trans + "]";
}
// on button release
function stop(event)
{
if (drag) {
document.getElementById('moveEvent').innerHTML = "Up: [" + event.layerX + " | " + event.layerY + "]";
drag = false;
}
}
// viewpoint changed
function viewFunc(evt)
{
// show viewpoint values
if (evt)
{
var pos = evt.position;
var rot = evt.orientation;
var mat = evt.matrix;
var camPos = pos.x.toFixed(4)+' '+pos.y.toFixed(4)+' '+pos.z.toFixed(4);
var camRot = rot[0].x.toFixed(4)+' '+rot[0].y.toFixed(4)+' '+rot[0].z.toFixed(4)+' '+rot[1].toFixed(4);
document.getElementById("viewMat").innerHTML = "<Viewpoint position='" +
camPos + "' orientation='" + camRot + "'>";
}
// update 2d marker also if camera changes since projection is now wrong
var trans = x3dom.fields.SFVec3f.parse(document.getElementById('bar').getAttribute("translation"));
var pos2d = runtime.calcPagePos(trans.x, trans.y, trans.z);
var anno = document.getElementById("anno2d");
anno.innerHTML = "(" + pos2d[0] + ", " + pos2d[1] + ")";
anno.style.left = (pos2d[0]+1) + "px";
anno.style.top = (pos2d[1]+1) + "px";
}
// update position and orientation of line according to picked position and surface direction
function updateStuff(event)
{
var norm = new x3dom.fields.SFVec3f(event.normalX, event.normalY, event.normalZ);
var qDir = x3dom.fields.Quaternion.rotateFromTo(new x3dom.fields.SFVec3f(0, -1, 0), norm);
var rot = qDir.toAxisAngle();
var t = document.getElementById('bar');
t.setAttribute('rotation', rot[0].x+' '+rot[0].y+' '+rot[0].z+' '+rot[1]);
t.setAttribute('translation', event.worldX+' '+event.worldY+' '+event.worldZ);
var pos2d = runtime.calcPagePos(event.worldX, event.worldY, event.worldZ);
var anno = document.getElementById("anno2d");
anno.innerHTML = "(" + pos2d[0] + ", " + pos2d[1] + ")";
anno.style.left = (pos2d[0]+1) + "px";
anno.style.top = (pos2d[1]+1) + "px";
}
// some inits to attach listeners etc.
document.onload = function()
{
var boxes = document.getElementById("boxes");
runtime = boxes.runtime;
boxes.addEventListener('mouseup', stop, false);
var redBox = document.getElementById("box_2_id");
redBox.addEventListener('mousedown', start, false);
// Moveable wrapper requires x3dom-full.js, its signature is:
// x3dom.Moveable(x3domElement, transformNode, callback, snapToGridSize)
new x3dom.Moveable(boxes, redBox, moveCallback, 0);
document.getElementById('aView').addEventListener('viewpointChanged', viewFunc, false);
viewFunc(null);
}
</script>
</body>
</html>