Three.js：将图像添加到6 Cube Panorama中的纹理底部作为热点

Question

我使用this panorama作为项目的基础。现在，我想在一个选定纹理的底部添加一个小图像（圆形），好像这是全景地板上的一个热点，它将响应用户的单击。请参见下面的图片，该图片在地板上有2个圆圈：

我尝试了以下代码将图像添加到全景图的6种纹理之一：

var loader = new THREE.TextureLoader();
loader.load('img/test-circle-sample.png', function ( texture ) {
    var geometry = new THREE.PlaneGeometry( 1, 1 );
    var material = new THREE.MeshBasicMaterial( { map : texture, opacity : 1, side : THREE.DoubleSide, transparent : true } );
    var sprite = new THREE.Mesh( geometry, material );
    scene.add(sprite);
});

虽然看起来实际上是在加载图像，但是圆看起来与上面的图片看起来相去甚远。即使它的大小为256像素并且位于相机周围，它也非常宽-您可以在相机的顶部，底部，侧面看到它，但是看不到它前面的小圆圈。我试过这些设置，但是它们不能很好地工作：

sprite.position.set(0,-360,0);
sprite.rotateOnAxis(  new THREE.Vector3( 1, 0, 0 ), THREE.Math.degToRad(90) );
sprite.scale.set( 1, 1, 1 );

我需要在将图像放置在相机前方任意选定的一侧（或角度）并保持其固定在地板上的情况下获得帮助，因此拖动相机会调整图像的外观（基于角度的偏斜效果）。

更新：我创建了这个Plunker，但是现在根本看不到图像。 http://plnkr.co/edit/KS6dVMn5AIEaXr143Jv3?p=preview

Answer 1

我不确定我是否理解您的问题-据我了解，您是否希望将热点放置在相机下方（即观众的脚旁）？如果是这样，则似乎是您在错误地变换了热点，这可能是它看上去变形的原因。

我在http://plnkr.co/edit/KS6dVMn5AIEaXr143Jv3?p=preview上复制了您的现场演示，并进行了一些更改以使热点正确显示。

尝试并更新变换和旋转热点的方式，如以下代码所示：

function addHotSpot(scene){

    THREE.ImageUtils.crossOrigin = '';
    var loader = new THREE.TextureLoader();
    loader.load('https://i.imgur.com/vU163P4.png', function ( texture ) {
        var geometry = new THREE.PlaneGeometry( 1, 1 );
        var material = new THREE.MeshBasicMaterial( { 
            map:texture, 
            opacity : 1, 
            side : THREE.DoubleSide, 
            transparent : false  // Note, I also set this to false.
        } ); 

        var sprite = new THREE.Mesh( geometry, material );


        // Offset the hotspot so it is below the view origin [Updated]
        sprite.position.set(0,-5,5);

        // Compute the rotation for the hotspot, 90deg around the x-axis
        var rotation = new THREE.Matrix4()
        .makeRotationAxis(new THREE.Vector3(1,0,0), 1.57);

        // Apply rotation to the hotspot so it "sits flat below the camera"
        sprite.rotation.setFromRotationMatrix(rotation);

        scene.add(sprite);
    });
}