文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在web上复制/镜像x3d

问如何在web上复制/镜像x3d
EN

Stack Overflow用户

提问于 2016-09-22 01:29:09

回答 1查看 233关注 0票数 0

我希望web中有两个元素是3D模型(这两个元素都是从.x3d文件中生成的)，当我旋转时，其中一个元素的变化就像镜子一样。

为了从.x3d文件中获取html代码，我执行以下步骤：

以崇高的文本(代码编辑器)打开我的.x3d文件。
复制我打开.x3d文件时看到的xml代码。
将xml代码编码到html5：转换器/
复制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>

javascript

html

canvas

blender

x3dom

回答 1

Stack Overflow用户

发布于 2017-01-19 10:26:15

如果要在二维模型之间执行镜像效果，则必须创建一个Viewpoint并管理更改侦听器。例如，请参阅下面的代码。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]);
                });
    }
    )
    });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39628876

复制

相似问题

问如何在web上复制/镜像x3d
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在web上复制/镜像x3dEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在web上复制/镜像x3d
EN