克隆A帧实体时轮换问题

时间:2017-01-03 19:28:24

标签: javascript aframe

尝试创建一个用于克隆实体的组件,整体而言似乎工作得很好。然而,我用" mesh.lookAt(正常)"设置的旋转。没有来到克隆。我认为它与对象层次结构有关,因为控制台中的结果对于原始和克隆是不同的。

// Returns Mesh
console.log(initial.getObject3D('mesh'));
// Returns undefined
console.log(clone.getObject3D('mesh'));

为什么这两条线路会返回不同的东西?

谢谢!

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Duplicate Test</title>
        <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
    </head>

    <body>

        <script>

            // Duplicate
            AFRAME.registerComponent('duplicate', {
                init: function () {     

                    // Geometry
                    var initial = this.el;
                    var scene = this.el.sceneEl;

                    // Click
                    var duplicate_button = document.getElementById( 'duplicate' );
                    duplicate_button.addEventListener('click', function() {
                        var clone = initial.cloneNode(true);
                        clone.setAttribute('position', {x: -1.5, y: 1.5, z: -2.5});
                        scene.appendChild(clone);

                        // Returns Mesh
                        console.log(initial.getObject3D('mesh'));
                        // Returns undefined
                        console.log(clone.getObject3D('mesh'));

                    });
                }
            });
        </script>

        <!-- Button -->
        <button type="button" class="button" id="duplicate">DUPLICATE MESH</button>

        <!-- A-Frame Scene -->
        <a-scene>
            <a-assets>
                <a-asset-item id="tree-obj" src="geo/tree.obj"></a-asset-item>
            </a-assets>
            <a-entity>
                <a-box id="box" position="1.5 1.5 -2.5"
                          rotation="0 0 0" duplicate
                      ></a-box>
            </a-entity>
            <a-sky color="#2c3e50"></a-sky>
        </a-scene>

    </body>
</html>

1 个答案:

答案 0 :(得分:1)

尝试等待克隆附加并初始化:

clone.addEventListener('loaded', function () {
  console.log(clone.getObject3D('mesh'));
});