gpt4 book ai didi

javascript - 使用 React-Three-Renderer 的 Sprite 标签(包括 MVCE)

转载 作者:可可西里 更新时间:2023-11-01 02:43:42 26 4
gpt4 key购买 nike

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

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

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

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

这是我的文件。它有两个主要组成部分,componentDidMount方法,其中为 Sprite 创建文本,以及 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 文本标签?提前致谢。

最佳答案

你所犯的只是一个小错误:

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

Text outside canvas

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

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


此外,您的相机没有在看任何东西。 React-Three 让我们将此作为您的 <perspectiveCamera/> 的属性.

+          lookAt={this.cameraLook}

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

关于javascript - 使用 React-Three-Renderer 的 Sprite 标签(包括 MVCE),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39236107/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com