Javascript TextGeometry of Three.js与React不工作

试图通过三个JavaScript在react应用程序中添加3D文本。下面的代码在输出中给出一个空白页。这是我第一次尝试使用Three.js。任何帮助都将不胜感激

当我添加具有相同格式的任何其他几何体时，相同的代码正在工作

class ThreeScene extends Component {
    componentDidMount() {
        const width = this.mount.clientWidth
        const height = this.mount.clientHeight
        //ADD SCENE
        this.scene = new THREE.Scene()
        //ADD CAMERA
        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
        this
            .camera
            .position
            .set(-15, 0, 25);
        this
            .camera
            .lookAt(this.scene.position);
        // Add Font Loader
        this.loader = new THREE.FontLoader();
        const self = this;
        this
            .loader
            .load('fonts/helvetiker_regular.typeface.json', function (font) {
                var material = new THREE.MeshPhongMaterial({color: 0x0033ff, specular: 0x555555, shininess: 30});
                var geometry = new THREE.TextGeometry('Hello', {
                    font: font,
                    size: 80,
                    height: 5,
                    curveSegments: 12,
                    bevelEnabled: true,
                    bevelThickness: 10,
                    bevelSize: 8,
                    bevelSegments: 5
                });

                self.textData = new THREE.Mesh(geometry, material);

                self
                    .scene
                    .add(self.textData);

                self.light = new THREE.DirectionalLight(0xffffff);
                self
                    .light
                    .position
                    .set(0, 1, 1)
                    .normalize();
                self
                    .scene
                    .add(self.light);
            });
        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this
            .renderer
            .setSize(width, height)
        this
            .mount
            .appendChild(this.renderer.domElement);
        this.start()
    }
    renderScene = () => {
        this
            .renderer
            .render(this.scene, this.camera)
    }
}

---

因此，我遇到了同样的问题。您需要确保包含THREE.js中的json代码示例。如果您在本地没有它，您可以在那里找到它

这是启动和运行它的最基本代码，您可以填写样式参数

    let loader = new THREE.FontLoader();
    let font = loader.parse(fontJSON);
    let geometry = new THREE.TextGeometry("Hello World",{font: font, size: 1, height:1 });

    let material = new THREE.MeshBasicMaterial({color:0xffffff});
    let text = new THREE.Mesh(geometry, material);
    text.position.x = 1;
    scene.add(text)

---

注意：如果不包含let fontJSON={code from three.js github library}，您将得到一个错误，因为fontJSON未定义。。。 .load（'font/helvetiker_regular.typeface.json'

尝试将文件（fonts/helvetiker_regular.typeface.json）放入公用文件夹（例如fonts），然后使用

---

.load（'/fonts/helvetiker_regular.typeface.json'，

你能将错误作为文本复制到你的帖子中吗？像我这样的一些人使用他们的手机浏览Stackoverflow，并且无法轻松浏览桌面大小的屏幕快照cosole中的错误是：VM648:1未捕获的语法错误：Object.parse（）Object.onLoad位置1处json中意外的字符串（three.module.js:26992）在XMLHttpRequest上。（three.module.js:23564）您找到问题所在了吗？这应该作为评论。