如何在網絡中做x3d的複製/鏡像

我想在網絡中有兩個元素是3D模型（兩者都是從.x3d文件生成的），並且當我旋轉其中一個元素時，其他像鏡子一樣。如何在網絡中做x3d的複製/鏡像

要想從.x3d文件的HTML代碼我做這些步驟：

在打開一個崇高的文本我.x3d文件（代碼編輯器）。
複製當我打開.x3d文件時看到的xml代碼。
編碼XML代碼到HTML5瀏覽： http://doc.instantreality.org/tools/x3d_encoding_converter/
將HTML代碼複製，並在HTML文件粘貼，然後我打開一個瀏覽器。

HTML代碼示例

<!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>

來源

2016-09-22 Victor Roque

最後轉變有一個'-1'在裏面，嘗試改變，爲'1' – sambler

如果你想要做2 3D模型之間的鏡像效果，你必須創建一個觀和管理變化監聽器。例如，請參閱下面的代碼。 JSFiddle HTML文件

<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部分

$("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]); 
       }); 
    } 
    ) 
    });

來源

2017-01-19 10:26:15 Sngvk

如何在網絡中做x3d的複製/鏡像

回答

相關問題