个人中心
gpt4 book ai didi

javascript - 在某些情况下，A 型框架缓冲区几何合并似乎会改变实体

转载 作者：行者123 更新时间：2023-11-28 03:21:37 26 4
gpt4 key购买 nike

我有一个使用 buffer-geometry-merger component 的 A 框架场景的简单案例，这在静态 HTML 中编写实体时似乎效果很好，但当通过构建 A-Frame 组件将相同实体注入(inject)到 DOM 中时效果不佳:在这种情况下，几何图形似乎发生了移动，就好像父级的位置一样(再次)应用于合并实体，即使其相对于其父实体的位置为 (0,0,0)。

HTML 文件是:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script>
    <script src="cubes-buffer-min.js"></script>

  </head>
  <body>
    <a-scene renderer="colorManagement: true;" stats>

      <a-box position="-5 0 -3"></a-box>
      <a-box position="-10 0 -3"></a-box>

      <a-entity test position="-5 0 0">
      </a-entity>

      <a-entity position="-5 0 3">
        <a-entity buffer-geometry-merger>
          <a-entity geometry="primitive: box" position="0 0 0"></a-entity>
        </a-entity>
      </a-entity>

      <a-entity camera position="0 15 0" rotation="-90 0 0"></a-entity>
    </a-scene>
  </body>
</html>

定义 test A-Frame 组件(包含在上述 HTML 文件中)的 JavaScript 文件是:

AFRAME.registerComponent('test', {

  init: function () {
    let base = document.createElement('a-entity');
    base.addEventListener('loaded', (e) => {
      base.setAttribute('buffer-geometry-merger', {});
    });
//    setTimeout(function() {
//      base.setAttribute('buffer-geometry-merger', {});
//    }, 2000);
    let box = document.createElement('a-entity');
    box.setAttribute('geometry', {buffer: true, primitive: 'box'});
    box.setAttribute('position', {x: 0, y: 0, z: 0});
    base.appendChild(box);
    this.el.appendChild(base);
  },
});

在浏览器中加载时，您可以看到“静态”框如何出现在预期位置(-5,0,3)，但动态框(由 test 注入(inject)的框 组件)出现向左移动，位于 (-10,0,0)。 (-10,0,-3)和(-5,0,-3)中的前两个框仅供引用。

我添加了注释掉的计时器代码来说明会发生什么。如果禁用“loaded”事件监听器，并取消注释计时器代码，您可以看到动态框如何位于正确的位置，但随后计时器会触发，并且 buffer-geometry-merger添加后，该框被“移动”到了错误的位置。

在此屏幕截图中，白色框仅供引用，紫色框为动态框，蓝色框为静态框:

enter image description here

知道发生了什么，或者如何解决此问题吗？

最佳答案

根据我收集的信息，就您的情况而言:

// pseudo code, before the merge is done
<a-entity test position='-5 0 0'
   <a-entity base buffer-geometry-merger
       <a-entity box

1) 合并正在使用它的世界矩阵( source )创建盒子的克隆。
2) 然后它将几何图形(此处仅是盒子)组合成一个网格，用作基础网格( source )。

但是，嘿，由于其父级，基已经移动了-5 0 0!所以实际上，世界矩阵被应用了两次。

<小时/>为什么这样的设置不会发生这种情况: 

<a-entity position="1 1 -2"> 
   <a-entity buffer-geometry-merger>
     <a-entity geometry="buffer: true; primitive: box;'></a-entity>
   </a-entity>
</a-entity>

非常相似，不是吗？显然不是，因为这里合并是在应用父变换之前完成的。您可以通过日志记录(在具有合并组件的实体上完成)来验证这一点:

var worldPos = new THREE.Vector3();
worldPos.setFromMatrixPosition(this.el.object3D.matrixWorld);
console.log('not loaded', worldPos) // looks like the parent(s) transforms are ignored
base.addEventListener("loaded", e => {
   worldPos.setFromMatrixPosition(this.el.object3D.matrixWorld);
   console.log('loaded', worldPos) // this seems to give a proper value
});

该组件不会等待节点加载 - 因此在“静态”情况下它似乎可以正常工作。

<小时/>

我认为当实体被嵌套或本身具有嵌套实体时，组件不应正常工作。我发现的大多数示例都有简单的布局:

<a-entity buffer-geometry-merger
   <a-box 
   <a-sphere
   .....
<小时/>

最简单的解决方案是从合并后的变换中减去父变换。对于您的情况:

// test component, after setting the merge component:
let mtx = new THREE.Matrix4()
mtx.getInverse(this.el.object3D.matrix)
base.object3D.applyMatrix(mtx)

就像this一样.

关于javascript - 在某些情况下，A 型框架缓冲区几何合并似乎会改变实体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59110629/

26 4 0
文章推荐： html - 从 Bootstrap 类创建自定义 CSS Helper
文章推荐： javascript - howler.js - 按钮淡入和淡出类(class)变化中的音乐
文章推荐： javascript - 选择后查看完整文件名
文章推荐： c++ - 如何使用外部库中的函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com