javascript - 在 Aframe 中的小地图上反映用户在运行时的位置和旋转

Question

我正在尝试为我的虚拟现实场景制作一个小地图，并在运行时更新用户的位置和位置。我已经做了以下：

<script>
        AFRAME.registerComponent('cam-listener', {
            init: function(){
                var canvas = document.querySelector("#myCanvas");
                //line 124(log result in the image)
                console.log(canvas);
                var context = canvas.getContext("2d");
                //line 126(log result in the image)
                console.log(context);

                function drawTriangle(x, y) {
                  // the triangle
                  context.beginPath();
                  context.moveTo(x, y);
                  context.lineTo(x - 6, y + 10);
                  context.lineTo(x + 6, y + 10);
                  context.closePath();

                  // the outline
                  context.lineWidth = 4;
                  context.strokeStyle = "rgba(102, 102, 102, 1)";
                  context.stroke();

                  // the fill color
                  context.fillStyle = "rgba(255, 204, 0, 1)";
                  context.fill();
                }
                drawTriangle(100, 100);
            }
            tick: function(){
                console.log(this.el.getAttribute('position'));
                console.log(document.querySelector('[camera]').getAttribute('rotation'));
            }
        })
 </script>

下面是 div 和画布：

<div id="canvasWrapper">
        <canvas id="myCanvas" width="223.99" height="358.93">
        </canvas>
</div>

但问题是，当我运行脚本时，控制台给了我非常混乱的结果：（下面是图片链接）

检索到画布但上下文为空

但如果我不使用 Aframe 组件系统并将脚本放在正文底部，一切正常。那么有人知道原因吗？提前致谢！

顺便说一句，如果有人知道如何在 Aframe vr 场景中制作小地图，我很乐意讨论和学习。如果没有，我会在之后发布我的解决方案。

标签： javascripthtml5-canvasaframewebvr