Question

如何在I-Frame中排列变宽文本实体？

我正在尝试开发一个I-Frame WordPress模板，但我遇到了我无法理解的新问题。我正在使用循环将菜单项吐出到aframe-text-component实体中，但我希望它们能够自动排列，而无需编辑每个项目位置。问题是宽度。我有什么方法可以测量物品的宽度，然后将它们放在一起，然后在每个物品组之间留有预定的空间吗？

或者使用I-Frame的API循环浏览每个项目并在页面加载时定位它们？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>MyPage</title>
        <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/aframe.min.js"></script>
        <script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
    </head>
    <body>
        <a-scene>
            <? $my_menu = wp_get_nav_menu_items('Menu 1');
            foreach ($my_menu as $key => $menu_item) { ?>
                <a-entity id='menu_i_<? echo $key; ?>' material="color: #FFC65D" position="0 3.25 -4" text="text: <? echo $menu_item->title; ?>" url='<? echo $menu_item->url; ?>'></a-entity>              
            <? } ?>
        </a-scene>
    </body>
</html>

Answer 1

使用效率更高，更漂亮且自动对齐的bmfont-text component。

但您也可以尝试使用边界框并偏移文本。

var bbox = new THREE.Box3().setFromObject(textEl.getObject3D('mesh'));
textEl.setAttribute('position', {
  x: (bbox.max.x - bbox.min.x) / 2,
  y: textEl.object3D.position.y,
  z: textEl.object3D.position.z
});

如何在I-Frame中排列可变宽度的文本实体？

1 个答案: