Three.js: 将图像添加到 6 立方体全景中的纹理底部作为热点

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

Three.js: 将图像添加到 6 立方体全景中的纹理底部作为热点

Three.js: Add Image to Texture Bottom in 6 Cube Panorama as a Hotspot

javascript

three.js

360-panorama