Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 28, 2016 04:07
Show Gist options
  • Save anonymous/64cce4baa2744bd8ff1a23c670e7bee1 to your computer and use it in GitHub Desktop.
Save anonymous/64cce4baa2744bd8ff1a23c670e7bee1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.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="http://www.x3dom.org/download/dev/x3dom.css" />
<script type="text/javascript" src="http://www.x3dom.org/download/dev/x3dom-full.js"></script>
</head>
<body style='background-color:#666;'>
<x3d id="boxes" showStat="false" showLog="false" width="400px" height="300px">
<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" onmouseover="document.getElementById('mouseOverEvent').innerHTML='Mouse: over - draggable';" onmouseout="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>
<x3d id="x3domAxisSceneView">
<scene>
<navigationInfo type='"NONE" "ANY"'></navigationInfo>
<viewpoint position="0 0 4" orientation="1 0 0 0"></viewpoint>
<transform rotation="1 0 0 0">
<transform id="axes">
<group>
<!-- X arrow and label -->
<Shape isPickable="false" DEF="AXIS_LINE_X">
<IndexedLineSet index="0 1 -1">
<Coordinate point="0 0 0.001, 1 0 0.001" color="1 0 0, 1 0 0"></Coordinate>
</IndexedLineSet>
<Appearance DEF='Red'>
<Material diffuseColor="1 0 0" emissiveColor='0 0 0' specularColor="1 1 1" shininess="1.0"></Material>
</Appearance>
</Shape>
<Transform translation='1 0 0'>
<Transform rotation='0 0 1 -1.57079632679'>
<Shape isPickable="false" DEF="AXIS_ARROW_X">
<Cone DEF='ArrowCone' bottomRadius='.10' height='0.5' subdivision="16"></Cone>
<Appearance USE='Red'></Appearance>
</Shape>
</Transform>
<Transform rotation='1 0 0 0'>
<Billboard axisOfRotation='0 0 0'>
<Transform translation='0 0 1.2'>
<Shape isPickable="false" DEF="AXIS_LABEL_X">
<Text string="X" solid="false">
<FontStyle size="0.3" family="Sans" DEF="sans"></FontStyle>
</Text>
<Appearance USE='Red'></Appearance>
</Shape>
</Transform>
</Billboard>
</Transform>
</Transform>
<!-- Y arrow and label -->
<Shape isPickable="false" DEF="AXIS_LINE_Y">
<IndexedLineSet index="0 1 -1">
<Coordinate point="0 0 0.001, 0 1 0.001" color="0 1 0, 0 1 0"></Coordinate>
</IndexedLineSet>
<Appearance DEF='Green'>
<Material diffuseColor="0 1 0" emissiveColor='0 0 0' specularColor="1 1 1" shininess="1.0"></Material>
</Appearance>
</Shape>
<Transform translation='0 1 0'>
<Shape isPickable="false" DEF="AXIS_ARROW_Y">
<Cone USE='ArrowCone'></Cone>
<Appearance USE='Green'></Appearance>
</Shape>
<Transform rotation='1 0 0 0'>
<Billboard axisOfRotation='0 0 0'>
<Transform translation='0 0 1.2'>
<Shape isPickable="false" DEF="AXIS_LABEL_Y">
<Text string="Y" solid="false">
<FontStyle USE="sans"></FontStyle>
</Text>
<Appearance USE='Green'></Appearance>
</Shape>
</Transform>
</Billboard>
</Transform>
</Transform>
<!-- Z arrow and label -->
<Shape isPickable="false" DEF="AXIS_LINE_Z">
<IndexedLineSet index="0 1 -1">
<Coordinate point="0 0 0.001, 0 0 1" color="0 0 1, 0 0 1"></Coordinate>
</IndexedLineSet>
<Appearance DEF='Blue'>
<Material diffuseColor="0 0 1" emissiveColor='0 0 0' specularColor="1 1 1" shininess="1.0"></Material>
</Appearance>
</Shape>
<Transform translation='0 0 1'>
<Transform rotation='1 0 0 1.57079632679'>
<Shape isPickable="false" DEF="AXIS_ARROW_Z">
<Cone USE='ArrowCone'></Cone>
<Appearance USE='Blue'></Appearance>
</Shape>
<Billboard axisOfRotation='0 0 0'>
<Transform translation='0 0 1.2'>
<Shape isPickable="false" DEF="AXIS_LABEL_Z">
<Text string="Z" solid="false">
<FontStyle USE="sans"></FontStyle>
</Text>
<Appearance USE='Blue'></Appearance>
</Shape>
</Transform>
</Billboard>
</Transform>
</Transform>
</group>
</transform>
</transform>
</scene>
</x3d>
<div style="clear: both; padding: 2px; color: #00ff00; background-color: black; width: 798px;">
<p id="moveEvent"> ==&gt; Drag the red box around with your mouse! Use left button for pane and right for zoom. </p>
<p id="mouseOverEvent"> ==&gt; Move your mouse over the little primitives to update the markers. </p>
<p id="viewMat"> &nbsp; </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 id="jsbin-javascript">
// 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 = "&ltViewpoint position='" +
camPos + "' orientation='" + camRot + "'&gt";
}
// 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";
// AP: link axes
var invrot = x3dom.fields.Quaternion.axisAngle(rot[0], rot[1]).inverse().toAxisAngle();
var axes_trafo = document.querySelector('#axes');
axes_trafo.setAttribute('rotation', invrot[0].x+' '+invrot[0].y+' '+invrot[0].z+' '+invrot[1]);
}
// 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>
<script id="jsbin-source-javascript" type="text/javascript"> // 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 = "&ltViewpoint position='" +
camPos + "' orientation='" + camRot + "'&gt";
}
// 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";
// AP: link axes
var invrot = x3dom.fields.Quaternion.axisAngle(rot[0], rot[1]).inverse().toAxisAngle();
var axes_trafo = document.querySelector('#axes');
axes_trafo.setAttribute('rotation', invrot[0].x+' '+invrot[0].y+' '+invrot[0].z+' '+invrot[1]);
}
// 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>
Raw
jsbin.vihewujine.js
// 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 = "&ltViewpoint position='" +
camPos + "' orientation='" + camRot + "'&gt";
}
// 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";
// AP: link axes
var invrot = x3dom.fields.Quaternion.axisAngle(rot[0], rot[1]).inverse().toAxisAngle();
var axes_trafo = document.querySelector('#axes');
axes_trafo.setAttribute('rotation', invrot[0].x+' '+invrot[0].y+' '+invrot[0].z+' '+invrot[1]);
}
// 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment