关于javascript：Three.js新的THREE.TextBufferGeometry()无法读取未定义错误的属性’yMax’

Three.js new THREE.TextBufferGeometry() Cannot read property 'yMax' of undefined error

在将文本添加到three.js场景时，出现错误"未捕获的TypeError：无法读取未定义的属性'yMax'"。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

let loader = new THREE.FontLoader();

let font = loader.parse( jsonFont );

let geometry = new THREE.TextBufferGeometry( 'MY TEXT', {
font: font,
size: 80,
height: 5,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 10,
bevelSize: 8,
bevelSegments: 5
} );

Chrome浏览器的完整控制台错误读取：

未捕获的TypeError：无法读取未定义的属性'yMax'<-createPaths <-generateShapes <-TextBufferGeometry

相关讨论

我找到了解决问题的方法。

解决方案来源：
https://threejs.org/examples/#webgl_geometry_text_shapes
https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text_shapes.html

我的代码错误：
https://github.com/mrdoob/three.js/issues/13665

| --------------- |

此代码对我有用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

let loader = new THREE.FontLoader();
loader.load("/fonts/helvetiker_regular.typeface.json", ( font ) =>
{
let xMid;
let shapes = font.generateShapes("Sample Test", 100, 2 );

let textShape = new THREE.BufferGeometry();
let geometry = new THREE.ShapeGeometry( shapes );
geometry.computeBoundingBox();

let material = new THREE.MeshBasicMaterial( {
color : 0x006699,
transparent: true,
opacity : 0.4,
side : THREE.DoubleSide
} );

xMid = -0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
geometry.translate( xMid, 0, 0 );

textShape.fromGeometry( geometry );
let mesh = new THREE.Mesh( textShape, material );
m_scene.add( mesh );

} );