how to do a copy/mirror of x3d in web

I want to have two elements in a web that are 3D models (both are the same generated from .x3d file), and when I rotate one of them has change in the other like a mirror.

To get html code from .x3d file I do these steps:

  1. Open my .x3d file in a sublime text (code editor).
  2. Copy xml code that I see when I open .x3d file.
  3. Encode xml code to html5 here: http://doc.instantreality.org/tools/x3d_encoding_converter/
  4. Copy html code and paste in a html file and then I open in a browser.

HTML code example

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta>
    <link rel='stylesheet' type='text/css' href='http://www.x3dom.org/x3dom/release/x3dom.css'></link>
    <script type='text/javascript' src='http://www.x3dom.org/x3dom/release/x3dom.js'></script>
  </head>
  <body>
    <x3d id='someUniqueId' showStat='false' showLog='false' x='0px' y='0px' width='400px' height='400px'>
      <scene>
        <transform rotation='0 1 0 1.57'>
          <shape>
            <appearance DEF='A'>
              <material diffuseColor='0 0.5 0.7'></material>
            </appearance>
            <box></box>
          </shape>
          <transform scale='1 5 1' translation='0 -5 0'>
            <shape>
              <appearance USE='A'></appearance>
              <sphere></sphere>
            </shape>
          </transform>
          <transform rotation='0 1 0 1.57' translation='1.5 0 0'>
            <transform translation='0 -3 0'>
              <shape>
                <appearance USE='A'></appearance>
                <cylinder height='4' radius='0.5'></cylinder>
              </shape>
            </transform>
          </transform>
          <transform rotation='0 -1 0 1.57' translation='-1.5 0 0'></transform>
        </transform>
      </scene>
    </x3d>
  </body>
</html>

Answers


If you want to do a mirroring effect between 2 3D model, you have to create a Viewpoint and manage the change listener. see the code below for example. JSFiddle Html file

    <body>
  <div>
  Move on the grey part
  </div>
    <x3d id='someUniqueId' showStat='false' showLog='false' x='0px' y='0px' width='400px' height='400px'>
      <scene>
      <Background skyColor=' 0.8 0.8 0.8' bind='true' ></Background>
      <Viewpoint bind='true' isActive="true" centerOfRotation='0,0,0'></Viewpoint>        <transform rotation='0 1 0 1.57'>
          <shape>
            <appearance DEF='A'>
              <material diffuseColor='0 0.5 0.7'></material>
            </appearance>
            <box></box>
          </shape>
          <transform scale='1 5 1' translation='0 -5 0'>
            <shape>
              <appearance USE='A'></appearance>
              <sphere></sphere>
            </shape>
          </transform>
          <transform rotation='0 1 0 1.57' translation='1.5 0 0'>
            <transform translation='0 -3 0'>
              <shape>
                <appearance USE='A'></appearance>
                <cylinder height='4' radius='0.5'></cylinder>
              </shape>
            </transform>
          </transform>
          <transform rotation='0 -1 0 1.57' translation='-1.5 0 0'></transform>
        </transform>
      </scene>
    </x3d>
    <x3d id='someUniqueId2' showStat='false' showLog='false' x='0px' y='0px' width='400px' height='400px'>
      <scene>
      <transform id="ManageRotation">
        <transform rotation='0 1 0 1.57'>
          <shape>
            <appearance DEF='A'>
              <material diffuseColor='0 0.5 0.7'></material>
            </appearance>
            <box></box>
          </shape>
          <transform scale='1 5 1' translation='0 -5 0'>
            <shape>
              <appearance USE='A'></appearance>
              <sphere></sphere>
            </shape>
          </transform>
          <transform rotation='0 1 0 1.57' translation='1.5 0 0'>
            <transform translation='0 -3 0'>
              <shape>
                <appearance USE='A'></appearance>
                <cylinder height='4' radius='0.5'></cylinder>
              </shape>
            </transform>
          </transform>
          <transform rotation='0 -1 0 1.57' translation='-1.5 0 0'></transform>
        </transform>
        </transform>
      </scene>
    </x3d>
  </body>

JavaScript Part

$("Viewpoint","x3d").each(function () {
        this.addEventListener('viewpointChanged', function (pEvent) {
         var rot = pEvent.orientation;
      $("#ManageRotation").each(function () {
                    this.setAttribute('position', 0 + ' ' + 0 + ' ' + 0);
                    this.setAttribute('rotation', -1 *rot[0].x + ' ' + rot[0].y + ' ' + rot[0].z + ' ' + rot[1]);
                });
    }
    )
    });

Need Your Help

Can Vala be used without GObject?

vala gobject

I'm new to Vala. I'm not familiar with GObject. As I understand it, GObject was spun off from the GLib project from GNOME. Correct me if I'm wrong.