Created
August 28, 2016 04:07
-
-
Save anonymous/64cce4baa2744bd8ff1a23c670e7bee1 to your computer and use it in GitHub Desktop.
// source http://jsbin.com/vihewujine
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> ==> 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 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 = "<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"; | |
// 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 = "<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"; | |
// 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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"; | |
// 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