Three.js：如何創建一個固定在場景中心的十字准線

Question

我正在使用 video.js https://videojs.com/和https://videojs-vr.netlify.app/播放 VR 視頻。 Video.js 在 videojsvr 的幫助下可以做到這一點。 Videojs-vr 支持 Three.js 並且可以使用此訪問 three.js 對象

var player = videojs('my-video');

player.vr().camera;
player.vr().scene;
player.vr().renderer;

我想在視頻/場景的中間添加一個十字准線或任何點/圓圈，即使在 360 度視頻中移動屏幕也能保持固定。 我怎樣才能做到這一點？

我有以下代碼

// Add crosshair
addCrosshair() {
    var self = this;
    var player = self.get('player');

    const cursor = new THREE.Mesh(
        new THREE.RingBufferGeometry(0.2, 0.08, 30),
        new THREE.MeshBasicMaterial({ color: "#FFFFFF", side: THREE.DoubleSide })
      );
      cursor.position.x = 0;
      cursor.position.y = 0;
      cursor.position.z = -8;

      player.vr().scene.add(player.vr().camera)
      player.vr().camera.add(cursor);
}

它似乎正在做我需要的事情，並且點/小圓圈固定在視頻/場景的中心。 但是，它會影響我放在視頻中的其他 three.js object。 它與其他對象的渲染相混淆。 我有一個理論，它發生是因為我在另一個相機中添加光標/點，然后將它添加到場景中。

我試圖將它添加為我的其他 three.js 對象的另一個子對象。 雖然起初這似乎也有效，但如果我在 360 度視頻中移動視圖，光標/點不會在場景中保持固定。

希望我的問題有意義。 如果您沒有使用 videojs 和 video-vr.js 的經驗，無論您在場景中將相機視圖移動到何處，您都可以幫我在場景中心的 position 一個 three.js 對象/十字准線嗎？ 非常感謝你。 對我會有很大幫助。

Answer 1

由於聲譽問題，我無法添加評論，所以我會留下答案。

您是否考慮過將十字准線設為 HTML 元素？ PNG、p 標簽、h1 標簽或圓形 div。

將元素 position 固定在 canvas 的中心，並確保元素 z-index 大於 canvas。

由於該元素位於 canvas 之外，因此不會干擾場景中的對象。