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);
    });
}