带有 React-Three-Renderer 的 Sprite 标签（包括 MVCE）

Posted 2023-02-27

【中文标题】带有 React-Three-Renderer 的 Sprite 标签（包括 MVCE）

【英文标题】：Sprite Labels with React-Three-Renderer (MVCE included)

【发布时间】：2017-01-07 05:55:54

【问题描述】：

我正在使用 react-three-renderer (npm, github) 来构建带有 three.js 的场景。

我正在尝试使用<sprite> 和<spriteMaterial> 制作一个始终面向相机的标签，就像在stemkoski's example 中一样。

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

我的目标是看到文本显示在我期望的位置，但正如您所见，它只是一片漆黑。为了证明精灵在相机的视野中，我在相同的位置放了一个盒子。从 render 方法中取消注释并重新 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); 行建立的位置显示精灵文本标签？提前致谢。

【问题讨论】：

对我来说，我不会下载、安装依赖项然后最终运行某人的“MVCE”（我不会称其为 minimal）。虽然快速浏览了这个react-three-renderer，但它指出“这仍然是一个实验性和正在进行的项目，使用风险自负！”。如果问题与该库有关，我不确定 SO 是否适合提出相关问题。

@Leeft 我意识到使用这个示例需要做一些有意的工作，但是任何熟悉 git 和 npm 的人都能够快速使用 git clone 和 npm install。因为它主要处理所涉及的库。我觉得 git repo 是让问题快速重现的最简单方法。此外，我编写的所有代码都在问题中提供给那些可能不关心克隆 repo、安装依赖项等的人。

【参考方案1】：

你只有一个小错误：

<canvas> 上绘制的文本锚定在左下角。因此，在 (0,0) 处绘制文本甚至都不可见。它将完全在画布之外（如下图白色所示）：

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

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

---

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

+          lookAt=this.cameraLook

---

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

【讨论】：

你能解释一下为什么我们需要var scale = new THREE.Vector3(100,50,1);吗？