單擊three.js幾何圖形顯示HTML文本註釋？

Question

我想將2d文字註釋添加到類似於this的3d對象。

我還沒有找到任何關於覆蓋3D對象與HTML元素，可以通過點擊關閉和打開的教程。我確實發現了這一點，但不確定是否有其他方法，而不是渲染到畫布上。 Display text over Canvas only onmouseover

好像我應該能夠切換絕對定位元素的顯示樣式，但我無法弄清楚。任何指針都不勝感激

Answer 1

有很多教程來確定點擊畫布上的對象（使用raycaster和投影）。基本上，你需要反過來：擁有一個3D座標，並且希望獲得畫布上方的2D座標，您可以在其中放置一個html元素。

我會做下列方式：

1. HTML結構

<div style="position: relative"> 
    <canvas></canvas> 
    <div id="tip" style="position: absolute; display: none">Some text</div> 
</div> 

確定點擊的對象

var selectedObject; 

// using jquery 
$('canvas').on('click', function(event) { 

    // get 2D viewport coordinates 
    var mouse = new THREE.Vector2(); 
    mouse.x = (event.offsetX/SCREEN_WIDTH) * 2 - 1; 
    mouse.y = - (event.offsetY/SCREEN_HEIGHT) * 2 + 1; 

    // raycast 
    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera); 
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

    var intersects = raycaster.intersectObjects(arrayOfObjects, true); 

    if(intersects.length > 0) { 
    selectedObject = intersects[0].object; 

    // toggle html element 
    $('#tip').css('display', 'block'); 
    $('#tip').text(selectedObject.userData.note); 

    // assuming that the actual position is at the center of the mesh, otherwise the text will display somewhere else 
    // alternatively you could store and pass the point of click: intersects[0].point 
    positionTip(selectedObject.position); 
    } 

}); 

位置html元素（如果操縱攝像機，則需要此每次調用，所以該元素的位置將更新太）

function positionTip(pos3D) { 

    var v = pos3D.project(camera); 
    var left = SCREEN_WIDTH * (v.x + 1)/2; 
    var top = SCREEN_HEIGHT * (-v.y + 1)/2; 

    $('#tip').css({ left: left, top: top }); 

} 

免責聲明：我不能保證這些代碼段工作的開箱。我只是從我的項目中複製了一些代碼，並對泛化進行了一些添加/修改。