使用 React-Three-Renderer 的 Sprite 标签（包括 MVCE）

Question

我正在使用 react-three-renderer (npm, github) for building a scene with three.js.

我正在尝试使用 <sprite> and <spriteMaterial> to make a label that always faces the camera, much like in stemkoski's example。

但是，我无法显示标签并正确设置其坐标。我在 Sprite-Label-Test 有一个最低限度可验证的完整示例。下载，运行npm install，打开_dev/public/home.html.

我的目标是让文本显示在我期望的位置，但如您所见，它只是黑色。为了证明精灵在相机的视野中，我在相同的位置放了一个盒子。要查看从渲染方法中取消注释并重新 gulp.

这是我的文件。它有两个主要组件，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); 行建立的位置显示 sprite 文本标签？提前致谢。

Answer 1

你只犯了一个小错误：

在 <canvas> 上绘制的文本锚定在左下角。因此在 (0,0) 处绘制的文本甚至都不会显示。它将完全在 canvas 之外（下面以白色显示）：

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

这就是为什么@df 在 line 147 上设置绘图位置时使用 fontsize 的原因。

另外，你的相机没有在看任何东西。 React-Three 可以将此作为 <perspectiveCamera/>.

的属性

+          lookAt={this.cameraLook}

我针对您的 MVCE 存储库打开了一个 pull request。

使用 React-Three-Renderer 的 Sprite 标签（包括 MVCE）

Sprite Labels with React-Three-Renderer (MVCE included)

javascript

label

sprite

three.js

reactjs

你只犯了一个小错误：