[X3D-Public] X3DOM: Proximity Sensor

Joe D Williams joedwil at earthlink.net
Tue May 17 13:58:04 PDT 2011


Yes, it is different, but if the DOM is live, then shouldn't we be 
able to attach an event that becomes active when the property value 
changes or mutates? Or, is that stuff in DOM5? Anyway it is great that 
you can show onclick working.
But thanks for getting your example out there to look at because now I 
want to look more into X3DOM again especially the runtime scene 
access.

I found an old example I worked on at:
http://x3dom.org/x3dom/example/x3dom_x3dLogo.xhtml

then grabbed that and hosted it alongside a latest version in .x3d.

http://www.hypermultimedia.com/x3d/x3dom/x3dom_x3dLogo.xhtml

This combo page of in-line X3D user code domified using the x3dom 
script and x3dom css that should play in any WebGL WWW browser 
"alongside" the latest .x3d scene that is included in the page using 
the object element that should play using any registered .x3d plugin.

This leaves IE out, at least here, with Safari and Opera vainly 
hunting for a Flash plugin that never installs to their satisfaction, 
but playing fine in all latest Firefox and Chromium browsers.

Not sure now about how to handle the hosting for x3dom script and css.

Thanks Again and Best Regards,
Joe






 DOesn't it seem like there ought to be a way to attach a DOM event
that gets sent when a value in a node changeschanges?


> Hi Joe,
> this is my prefered way to implement such behaviour too. Your code
> example works like a charm in BSContact. There is unfortunately no
> ProximitySensor Node in X3DOM and no chance to adopt your example.
>
> Cheers
> Darky
>
> Am 13.05.2011 21:05, schrieb Joe D Williams:
>> Just in case, re ProximitySensor and Viewpoint, try this in
>> BSContact or Instant or any other X3D player. I think I see what
>> you were aiming at with the navigation increeasing speed as you
>> move. As for Examine not giving you data, try listening for a
>> change in viewpoint orientation, like this one does. Here, the
>> viewpoint data is updated when the viewpoint data changes. instead
>> of just when a key is pressed.
>>
>>
>> #X3D V3.0 utf8
>> PROFILE Immersive
>> META "filename" "SixViewpointTour4.x3dv"
>> # [meta] reference: Web3D.org X3D Bindable-Nodes, Viewpoint:
>> NavigationInfo {
>>  type ["EXAMINE" "ANY"]
>> }
>> Viewpoint {
>>  description "Front View "
>>  position 0 0 10
>>  orientation 0 1 0 0
>> }
>> Viewpoint {
>>  description "Rear View"
>>  position 0 0 -10
>>  orientation 0 1 0 3.14
>> }
>> Viewpoint {
>>  description "Top View"
>>  position 0 10 0
>>  orientation -1 0 0 1.57
>> }
>> Viewpoint {
>>  description "Bottom View"
>>  position 0 -10 0
>>  orientation 1 0 0 1.57
>> }
>> Viewpoint {
>>  description "Left View"
>>  position -10 0 0
>>  orientation 0 -1 0 1.57
>> }
>> Viewpoint {
>>  description "Right View"
>>  position 10 0 0
>>  orientation 0 1 0 1.57
>> }
>> DEF Tour Viewpoint {
>>  description "Tour Views"
>>  position 0 0 10
>>  orientation 0 1 0 0
>> }
>> Background {
>>  backUrl "textures/bgBack.jpg"
>>  leftUrl "textures/bgLeft.jpg"
>>  bottomUrl "textures/bgBot.jpg"
>>  frontUrl "textures/bgFront.jpg"
>>  rightUrl "textures/bgRight.jpg"
>>  topUrl "textures/bgTop.jpg"
>> }
>> DEF PROX_SENSOR ProximitySensor {
>>  center 0 0 0
>>  size 100 100 100
>> }
>> DEF TRANS0 Transform {
>>  children [
>>    Transform { translation -8 5 -20
>>      children [
>>        Shape {
>>          appearance Appearance {
>>            material Material {
>>              diffuseColor 0 0 0 specularColor 0 0 0
>>              ambientIntensity 1.0 shininess 1.0 emissiveColor 0 0 0
>>            }
>>          }
>>          geometry DEF TYPESTRING0 Text {
>>            string [ "The First Viewpoint is the default Viewpoint
>> Position and Orientation."
>>                        "Box is at 0 0 0 with textures that name the
>> Front (gaze +z) and other surfaces"
>>                        "Backgroung elements are labelled according
>> to the Specification"
>>                        "Select From Six typical Viewpoints and a
>> Tour."
>>                        "Current Viewpoint Position ( x y z )"
>>                        "and Orientation ( x y z angle) Shown
>> Below:"]
>>            fontStyle FontStyle { style "BOLD" }
>>          }
>>        }
>>      ]
>>    }
>>    Transform { translation -3.5 -2.50 -10
>>      children [
>>        Shape {
>>          appearance Appearance {
>>            material Material {
>>              diffuseColor 0 0 0 specularColor 0 0 0
>>              ambientIntensity 0.0 shininess 0.0 emissiveColor 1 0
>> 0 }
>>          }
>>          geometry DEF PositionString Text { string [ "Position"]
>>            fontStyle FontStyle { style "BOLD" }
>>          }
>>        }
>>        Transform { translation -0.75 -0.75 0
>>          children [
>>            Shape {
>>              appearance Appearance {
>>                material Material {
>>                  diffuseColor 0 0 0 specularColor 0 0 0
>>                  ambientIntensity 0.0 shininess 0.0 emissiveColor 1
>> 0 0
>>                }
>>              }
>>              geometry DEF OrientationString Text { string [
>> "Orientation" ]
>>                fontStyle FontStyle { style "BOLD" }
>>              }
>>            }
>>          ]
>>        }
>>      ]
>>    }
>>  ]
>> }
>> DEF PositionData Script {
>>  outputOnly MFString position
>>  inputOnly SFVec3f printPosition
>>  initializeOnly SFString sep ", "
>>  url "ecmascript:
>>    function printPosition (value,ts) {
>>      var viewPos = new SFVec3f;
>>      viewPos = value;
>>      var x = Math.round(viewPos.x*100)/100; // simple 2 decimal
>> digits
>>      var y = Math.round(viewPos.y*100)/100;
>>      var z = Math.round(viewPos.z*100)/100;
>>      position = new MFString ( x + sep + y + sep + z );
>>    }
>>  "
>> }
>> DEF OrientationData Script {
>>  outputOnly MFString orientation
>>  inputOnly SFRotation printOrientation
>>  initializeOnly SFString sep ", "
>>  url "ecmascript:
>>    function printOrientation (value,ts) {
>>      var x = Math.round(value.x*100)/100;
>>      var y = Math.round(value.y*100)/100;
>>      var z = Math.round(value.z*100)/100;
>>      var angle = Math.round(value.angle*100)/100;
>>      orientation = new MFString ( x + sep + y + sep + z + sep +
>> angle );
>>    }
>>  "
>> }
>>
>> ROUTE PROX_SENSOR.position_changed TO PositionData.printPosition
>> ROUTE PROX_SENSOR.orientation_changed TO
>> OrientationData.printOrientation
>>
>> ROUTE PositionData.position TO PositionString.string
>> ROUTE OrientationData.orientation TO OrientationString.string
>>
>> ROUTE PROX_SENSOR.position_changed TO TRANS0.set_translation
>> ROUTE PROX_SENSOR.orientation_changed TO TRANS0.set_rotation
>>
>> # Box
>> DEF boxfront Shape {
>>  appearance Appearance {
>>    material Material { }
>>    texture ImageTexture {
>>      url [ "textures/boxfront.jpg" ]
>>    }
>>  }
>>  geometry IndexedFaceSet {
>>    coordIndex [ 0 1 2 3 -1 ]
>>    coord Coordinate {
>>      point [ -1 -1 1, 1 -1 1, 1 1 1, -1 1 1 ]
>>    }
>>    texCoordIndex [ 0 1 2 3 -1 ]
>>    texCoord TextureCoordinate {
>>      point [ 0 0 1 0 1 1 0 1 ]
>>    }
>>  }
>> }
>> DEF boxright Shape {
>>  appearance Appearance {
>>    material Material { }
>>    texture ImageTexture {
>>      url [ "textures/boxright.jpg" ]
>>    }
>>  }
>>  geometry IndexedFaceSet {
>>    coordIndex [ 0 1 2 3 -1 ]
>>    coord Coordinate {
>>      point [ 1 -1 1, 1 -1 -1, 1 1 -1, 1 1 1 ]
>>    }
>>    texCoordIndex [ 0 1 2 3 -1 ]
>>    texCoord TextureCoordinate {
>>      point [ 0 0 1 0 1 1 0 1 ]
>>    }
>>  }
>> }
>> DEF boxrear Shape {
>>  appearance Appearance {
>>    material Material { }
>>    texture ImageTexture {
>>      url [ "textures/boxrear.jpg" ]
>>    }
>>  }
>>  geometry IndexedFaceSet {
>>    coordIndex [ 0 1 2 3 -1 ]
>>    coord Coordinate {
>>      point [ 1 -1 -1, -1 -1 -1, -1 1 -1, 1 1 -1 ]
>>    }
>>    texCoordIndex [ 0 1 2 3 -1 ]
>>    texCoord TextureCoordinate {
>>      point [ 0 0 1 0 1 1 0 1 ]
>>    }
>>  }
>> }
>> DEF boxleft Shape {
>>  appearance Appearance {
>>    material Material { }
>>    texture ImageTexture {
>>      url [ "textures/boxleft.jpg" ]
>>    }
>>  }
>>  geometry IndexedFaceSet {
>>    coordIndex [ 0 1 2 3 -1  ]
>>    coord Coordinate {
>>      point [ -1 -1 1, -1 1 1, -1 1 -1, -1 -1 -1 ]
>>    }
>>    texCoordIndex [ 1 2 3 0 -1 ]
>>    texCoord TextureCoordinate {
>>      point [ 0 0 1 0 1 1 0 1 ]
>>    }
>>  }
>> }
>> DEF boxtop Shape {
>>  appearance Appearance {
>>    material Material { }
>>    texture ImageTexture {
>>      url [ "textures/boxtop.jpg" ]
>>    }
>>  }
>>  geometry IndexedFaceSet {
>>    coordIndex [ 0 1 2 3 -1 ]
>>    coord Coordinate {
>>      point [ -1 1 1, 1 1 1, 1 1 -1, -1 1 -1 ]
>>    }
>>    texCoordIndex [ 0 1 2 3 -1 ]
>>    texCoord TextureCoordinate {
>>      point [ 0 0 1 0 1 1 0 1 ]
>>    }
>>  }
>> }
>> DEF boxbottom Shape {
>>  appearance Appearance {
>>    material Material { }
>>    texture ImageTexture {
>>      url [ "textures/boxbottom.jpg" ]
>>    }
>>  }
>>  geometry IndexedFaceSet {
>>    coordIndex [  0 1 2 3 -1  ]
>>    coord Coordinate {
>>      point [ -1 -1 -1, 1 -1 -1, 1 -1 1, -1 -1 1 ]
>>    }
>>    texCoordIndex [ 0 1 2 3 -1 ]
>>    texCoord TextureCoordinate {
>>      point [ 0 0 1 0 1 1 0 1 ]
>>    }
>>  }
>> }
>>
>> DEF TourTime TimeSensor { cycleInterval 66 loop TRUE }
>>
>> DEF TourPosition PositionInterpolator {
>> key [ 0.0 0.125 0.25 0.378 0.5 0.625 0.75 0.875 1.0 ]
>> keyValue [ 0 0 10, -10 0 0, 0 0 -10, 10 0 0, 0 0 10, 0 10 0,
>> 0 0 10, 0 -10 0, 0 0 10 ]}
>>
>> DEF TourOrientation OrientationInterpolator {
>> key [ 0.0 0.125 0.25 0.378 0.5 0.625 0.75 0.875 1.0 ]
>> keyValue [ 0 1 0 0, 0 -1 0 1.57, 0 1 0 3.14, 0 1 0 1.57,
>> 0 1 0 0, -1 0 0 1.57, 0 1 0 0, 1 0 0 1.57, 0 1 0 0 ]}
>>
>> ROUTE TourTime.fraction_changed TO TourOrientation.set_fraction
>> ROUTE TourOrientation.value_changed TO Tour.orientation
>> ROUTE TourTime.fraction_changed TO TourPosition.set_fraction
>> ROUTE TourPosition.value_changed TO Tour.position
>>
>> Good Luck,
>> Joe
>>
>>
>> ----- Original Message ----- From: "Dark Before Dawn"
>> <dark.before.dawn at gmail.com>
>> To: "Joe D Williams" <joedwil at earthlink.net>
>> Cc: <x3d-public at web3d.org>
>> Sent: Friday, May 13, 2011 6:20 AM
>> Subject: Re: [X3D-Public] X3DOM: Proximity Sensor
>>
>>
>>> Hi Joe!
>>> Thats right, it is possible to define own navigation methods and
>>> you can also apply mouse rotations via JavaScript to ViewPoints.
>>> But it conflicts with x3d/x3dom navigation mode "Examine". You can
>>> rotate/drag the whole world around and the external positions and
>>> rotations are never updated. It is a nice workaround, but i would
>>> suggest to implement something similiar to X3D's ProximitySensor
>>> in future versions.
>>>
>>> Cheers
>>> Darky
>>>
>>> Am 13.05.2011 00:07, schrieb Joe D Williams:
>>>> If the keys and clicks are getting handled, then great.
>>>>
>>>> how about?
>>>> since for every key:
>>>> var tmp = ((document.getElementById('vp'))...
>>>> then, for example, maybe in the cases:
>>>> tmp.position="' + 't_pos_x + ' ' + t_pos_y + ' ' +
>>>> (t_pos_z-speed)'";
>>>>  break; ...
>>>>
>>>> Otherwise, since this could get complicated with collision and
>>>> all, I would still say to prototype this in X3D because it may be
>>>> easier if you need to touch and connect stuff and when multiple
>>>> changes need to occur. Since Instant is so close, I bet this
>>>> would also work very well using all X3D nodes and events and the
>>>> scripting is more simple.
>>>>
>>>> Meanwhile, I am reading x3dom.js and wishing you very well for
>>>> getting your example working with X3DOM.
>>>>
>>>> After the scripts at the beginning, the xmlized x3d looks very
>>>> friendly and if the DOM key events and onclicks are that easy to
>>>> handle then all the more fun.
>>>>
>>>> Best Regards,
>>>> Joe
>>>>
>>>>
>>>>
>>>>
>>>> ----- Original Message ----- From: "Dark Before Dawn"
>>>> <dark.before.dawn at gmail.com>
>>>> To: <x3d-public at web3d.org>
>>>> Sent: Tuesday, May 10, 2011 9:06 AM
>>>> Subject: [X3D-Public] X3DOM: Proximity Sensor
>>>>
>>>>
>>>>> Hello :)
>>>>> is there any way to read out camera position and orientation via
>>>>> JavaScript? It seems there is no ProximitySensor or equivalent
>>>>> in
>>>>> X3DOM.
>>>>>
>>>>> 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.
>>>>>
>>>>> Thanks in advance :)
>>>>> Cheers
>>>>> Darky
>>>>>
>>>>> Code Snippet:
>>>>>
>>>>> <html>
>>>>> <head>
>>>>> <script
>>>>> type='text/javascript'src='http://www.x3dom.org/x3dom/release/x3dom.js
>>>>> <view-source:http://www.x3dom.org/x3dom/release/x3dom.js>'></script>
>>>>> <link
>>>>> rel="stylesheet"type="text/css"href="http://www.x3dom.org/x3dom/release/x3dom.css
>>>>> <view-source:http://www.x3dom.org/x3dom/release/x3dom.css>"/>
>>>>>
>>>>> <script  type='text/javascript'>
>>>>> 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();
>>>>> }
>>>>> </script>
>>>>>
>>>>> <script  type="text/javascript">
>>>>>
>>>>> 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;
>>>>>             }
>>>>> </script>
>>>>> </head>
>>>>> <body>
>>>>> <x3d  id='xdoc_1'width='400px'height='400px'>
>>>>>
>>>>> <scene>
>>>>> <navigationInfo  type='"examine" "any"'></navigationInfo>
>>>>> <viewpoint  id='vp'position='0 0 5'></viewpoint>
>>>>> <transform  id='s_cone1'scale='0.2 0.2 0.2'center='0 0
>>>>> 0'onclick='updatePositionInfoLabel();'>
>>>>> <shape>
>>>>> <appearance >
>>>>> <material  id='dc_yellow'diffuseColor='yellow'></material>
>>>>> </appearance >
>>>>> <cone/>
>>>>>
>>>>> </shape>
>>>>> </transform>
>>>>> </scene>
>>>>> </x3d>
>>>>> <label  id="movement">Movement</label>
>>>>> </body>
>>>>> </html>
>>>>>
>>>>>
>>>>>
>>>>
>>>>
>>>> --------------------------------------------------------------------------------
>>>>
>>>>
>>>>
>>
>>
>




More information about the X3D-Public mailing list