帶React-Render-Renderer的Sprite標簽（包括MVCE）

Question

我正在使用react-three-renderer（ npm ， github ）與three.js構建場景。

我試圖使用<sprite>和<spriteMaterial>制作一個始終面向相機的標簽，就像stemkoski的示例中一樣 。

但是，我無法顯示標簽並正確設置其坐標。 我在Sprite-Label-Test上有一個最低可驗證的完整示例。 下載它，運行npm install ，然后打開_dev / public / home.html。

我的目標是在期望的位置顯示文本，但是正如您所看到的，它只是黑色。 為了證明精靈在相機的視野中，我在同一位置放了一個盒子。 要查看該注釋，請從render方法中重新注釋一下。

這是我的檔案。 它有兩個主要組件， componentDidMount方法（用於為精靈創建文本）和render方法。

var React = require('react');
var React3 = require('react-three-renderer');
var THREE = require('three');
var ReactDOM = require('react-dom');

class Simple extends React.Component {
  constructor(props, context) {
    super(props, context);

    // construct the position vector here, because if we use 'new' within render,
    // React will think that things have changed when they have not.
    this.cameraPosition = new THREE.Vector3(0, 0, 100);
  }

  componentDidMount() {
    var text = "Hello world";
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var metrics = context.measureText( text );
    var textWidth = metrics.width;

    context.font = "180px arial Bold";
    context.fillStyle = "rgba(255,0,0,1)";
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 4;

    context.fillText( text, 0, 0);

    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;

    this.spriteMaterial.map = texture;
    this.spriteMaterial.useScreenCoordinates = false;
  }

  render() {
    const width = window.innerWidth; // canvas width
    const height = window.innerHeight; // canvas height

    var position = new THREE.Vector3(0, 0, 10);
    var scale = new THREE.Vector3(1,1,1);

    return (<React3
      mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
      width={width}
      height={height}
    >
      <scene>
        <perspectiveCamera
          name="camera"
          fov={75}
          aspect={width / height}
          near={0.1}
          far={1000}

          position={this.cameraPosition}
        />
        <sprite position={position} scale={scale} ref={(sprite) => this.sprite = sprite}>
          <spriteMaterial ref={(spriteMaterial) => this.spriteMaterial = spriteMaterial}></spriteMaterial>
        </sprite>
        {/*<mesh position={position}>
          <boxGeometry
            width={10}
            height={10}
            depth={10}
          />
          <meshBasicMaterial
            color={0x00ff00}
          />
        </mesh>*/}
      </scene>
    </React3>);
  }
}

ReactDOM.render(<Simple/>, document.querySelector('.root-anchor'));

我究竟做錯了什么？ 我該如何在行var position = new THREE.Vector3(0, 0, 10);建立的位置中顯示精靈文本標簽var position = new THREE.Vector3(0, 0, 10); ？ 提前致謝。

Answer 1

您所擁有的只是一個小錯誤：

在<canvas>上繪制的文本固定在左下角。 因此在（0,0）處繪制文本甚至都不可見。 它將完全位於畫布之外（如下白所示）：

-    context.fillText( text, 0, 0);
+    context.fillText( text, 0, 18);

這就是為什么@df在第147行上設置繪圖位置時使用fontsize原因。

---

另外，您的相機沒有看到任何東西。 React-Three讓此操作作為<perspectiveCamera/>的屬性。

+          lookAt={this.cameraLook}

---

我針對您的MVCE存儲庫打開了一個請求請求 。