在使用React

Question

我正在与ThreeJS一起使用React库。

我已经安装了ThreeJS using npm。

添加图像效果很好-我正在以这种方式导入图像：

import stockImage from './../../images/download.jpg';

并像这样使用它非常有用：

this.addCube(stockImage, { x:2, y:2, z:2 } );

(...)

addCube(imageUrl, aPosition) {
        //Load image as material:
        var anImageMaterial = new THREE.MeshBasicMaterial({
            map : this.textureLoader.load(imageUrl)
        });
        //Make box geometry:
        var box = new THREE.BoxGeometry( 1, 1, 1 );
        //Create mesh:
        var cube = new THREE.Mesh( box, anImageMaterial );
        //Add to scene:
        this.scene.add( cube );
        return cube;
    }

当尝试使用this tutorial向画布中添加文本时。

我试图以这种方式导入字体：

import helveticaRegular from './../../fonts/helvetiker_regular.typeface.json';

像这样打印它看起来不错，因此对react似乎不是问题：

console.log(helveticaRegular);

但是使用这样的字体会引发错误：

var loader = new THREE.FontLoader();

loader.load( helveticaRegular, function ( font ) {
        var geometry2 = new THREE.TextGeometry( 'Hello three.js!', {
            font: font,
            size: 80,
            height: 5,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 10,
            bevelSize: 8,
            bevelSegments: 5
        } );
        this.scene.add(geometry2);
    } );

错误如下：

请忽略C：/ xammp / ...，因为我没有使用xammp，但是文件夹的命名来自我使用xammp的时间。

使用xammp加载此类字体，使用常规网址不会产生相同的错误。

我不知道问题是由于URL或react还是ThreeJS中的FileLoader.load函数引起的。

Answer 1

FontLoader要求使用URL作为签名参数：

FontLoader.load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null

您要传递的是导入的文件，因此FontLoader.load不喜欢它，因为在引擎盖下将有一个带有url参数的xhr调用。

可能正确的方法是跳过加载阶段并选择FontLoader.parse(myImportedFont)

FontLoader.parse签名

.parse ( json : Object ) : Font
json — The JSON structure to parse.

Parse a JSON structure and return a Font.