I have a simple case of a A-Frame scene using the buffer-geometry-merger component , which seems to work well when writing entities in static HTML, but not when the same entities are injected in the DOM by building a A-Frame component: in this case, the geometry seems to be shifted, as if the position of the parent were applied (again) to the merged entity, even when its position is (0,0,0) with respect to its parent.
(我有一个使用buffer-geometry-merger组件的A-Frame场景的简单案例,当以静态HTML编写实体时,它似乎工作得很好,但是当通过构建A-Frame组件将相同的实体注入DOM中时,这似乎效果很好:在这种情况下,即使父对象的位置相对于父对象为(0,0,0),也似乎将几何图形移动了,就好像父对象的位置(再次)应用于合并实体。)
The HTML file is:
(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>
The JavaScript file defining the test
A-Frame component (included from the above HTML file) is:
(定义test
A-Frame组件的JavaScript文件(包含在上述HTML文件中)为:)
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);
},
});
When loaded in the browser, you can see how the "static" box appears where it is expected, in (-5,0,3), but the dynamic one (the one injected by the test
component) appears shifted to the left, in (-10,0,0).
(在浏览器中加载后,您可以在(-5,0,3)中看到“静态”框的位置,但动态框(由test
组件注入的框)向左移动,在(-10,0,0)中。)
The first two boxes in (-10,0,-3) and (-5,0,-3) are just for reference.((-10,0,-3)和(-5,0,-3)中的前两个框仅供参考。)
I included the commented out timer code to illustrate what happens.
(我包括注释掉的计时器代码以说明会发生什么。)
If you disable the 'loaded' event listener, and uncoment the timer code, you can see how the dynamic box is located in the right place, but then the timer fires, and the buffer-geometry-merger
is added, the box is "shifted" to the wrong place.(如果您禁用了“已加载”事件侦听器,并且未输入计时器代码,则可以看到动态框位于正确位置的方式,但是计时器将触发,并添加buffer-geometry-merger
,该框为“转移到错误的位置。)
In this screenshot, white boxes are for reference, purple box is the dynamic one, blue box is the static one:
(在此屏幕截图中,白色框仅供参考,紫色框是动态框,蓝色框是静态框:)
Any idea about what is happening, or how to fix this behavior?
(关于正在发生的事情或如何解决此行为的任何想法?)
ask by jgbarah translate from so