как сделать копию/зеркало x3d в сети

Я хочу иметь два элемента в сети, которые являются 3D-моделями (оба они созданы из файла .x3d), и когда я поворачиваю одно из них, другой, как зеркало.как сделать копию/зеркало x3d в сети

Чтобы получить HTML код из файла .x3d я сделать эти шаги:

Открыть мой .x3d файл в возвышенный текст (код редактора).
Скопируйте xml-код, который я вижу при открытии .x3d-файла.
Encode код 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 в ​​сети

ответ

Смежные вопросы

как сделать копию/зеркало x3d в сети