带有ThreeJS PerspectiveCamera的可点击元素

Question

我已经用PerspectiveCamera创建了一个全景图像，一切都很顺利。我还设法添加了控件。现在我想在场景中放置一个可点击的元素(链接/按钮/任何东西)，但是我不知道如何添加和定位可点击元素…每一个技巧/建议都是非常感谢的！到目前为止我的代码如下：

function init() {

    const container = document.getElementById( 'three-image' );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );

    scene = new THREE.Scene();

    const geometry = new THREE.SphereGeometry( 500, 60, 40 );
    // invert the geometry on the x-axis so that all of the faces point inward
    geometry.scale( - 1, 1, 1 );

    //let imageLocation = <?php echo $block->getPanoramaImages();?>;
    let imageLocation = '/three/luifel.jpg';
    //alert(imageLocation)

    const texture = new THREE.TextureLoader().load(imageLocation);
    const material = new THREE.MeshBasicMaterial( { map: texture } );

    const mesh = new THREE.Mesh( geometry, material );

    scene.add( mesh );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    container.style.touchAction = 'none';
    container.addEventListener( 'pointerdown', onPointerDown );

    document.addEventListener( 'wheel', onDocumentMouseWheel );

    window.addEventListener( 'resize', onWindowResize );

}

Answer 1

如果你想将一个html元素附加到一个3d元素上，你可以将一个3d位置投影到2d并使用它。

var vector = new THREE.Vector3(100,0,0); // some point
vector.project(camera);


var widthHalf =  window.innerWidth / 2;
var heightHalf = window.innerHeight / 2;

vector.x = vector.x * widthHalf + widthHalf;
vector.y = -(vector.y * heightHalf) + heightHalf;
vector.z = 0;

如果要附加到对象，请使用对象在世界空间中的位置：

vector.setFromMatrixPosition(obj.matrixWorld);
vector.project(camera);

...etc

编辑:我在这里创建了一个示例：https://codepen.io/flatworldstudio/pen/LYbgvgY