Question

这是我的样本360ImageView

如何在aframe全景图中添加热点功能，任何人都可以指导我或给我一些关于如何实现这一点的线索

由于

Answer 1

您可以简单地获取光标位置并在该特定位置创建球体或圆形实体。这是代码。

    function createmarker(){
    var b = document.createElement("a-sphere");
    var cursor = document.querySelector("a-cursor");

    var cursor_pos = new THREE.Vector3().copy(cursor.object3D.getWorldPosition()); // get cursor's world position

    b.setAttribute("position", {
        "x" : cursor_pos.x,
        "y" : cursor_pos.y,
        "z" : cursor_pos.z
    });
    console.log(cursor_pos);
    b.setAttribute("radius","0.07");
    b.setAttribute("color","#fff");


    var a = document.getElementById('aframe-scene');
    a.appendChild(b);
}

这是aframe html部分

<a-scene id="aframe-scene">
    <a-sky id="sky" src="/user_images/<%= name %>" id="sky"    rotation="0 -130 0"></a-sky>
    <a-entity id="enti" camera="userHeight: 1.6" position="0 0 1.6" look-controls wsad-controls mouse-cursor>
       <a-cursor style="z-index: 9999">
       </a-cursor>
    </a-entity>
</a-scene>

您可以添加单击侦听器组件并向其添加函数createmarker。关于添加文本和图像的查询，您可以将路径附加到球体的innerHTML并创建悬停组件，并在悬停时从该球体的内部html中获取路径并将其显示在球体附近。如需进一步帮助，请查看my github repo

A-Frame中的HotSpot

1 个答案: