带有 React 的 Three.js 的 TextGeometry 不起作用答案

【问题标题】：TextGeometry of Three.js with React not working带有 React 的 Three.js 的 TextGeometry 不起作用
【发布时间】：2019-08-01 13:01:03
【问题描述】：

尝试通过三个 JavaScript 在我的反应应用程序中添加 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)
    }
}

【问题讨论】：

您可以将错误作为文本复制到您的帖子中吗？像我这样的人使用手机浏览 Stackoverflow，无法轻松截取桌面大小的屏幕截图
cosole 中的错误是：VM648:1 Uncaught SyntaxError: JSON 中的意外字符串，位于 XMLHttpRequest 的 Object.onLoad (three.module.js:26992) 的 Object.parse () 的位置 1 . (three.module.js:23564)
你找出问题所在了吗？

标签： javascript reactjs three.js

【解决方案1】：

您在此处定义的字体导致了该问题... .load('fonts/helvetiker_regular.typeface.json',

尝试将文件 (fonts/helvetiker_regular.typeface.json') 放入您的公共文件夹（例如字体），然后使用 .load('/fonts/helvetiker_regular.typeface.json',

【讨论】：

这应该是评论。

【解决方案2】：

所以，我遇到了同样的问题。您要确保包含来自 THREE.js 的 json 代码示例。如果您在本地没有它，您可以在 github repo 中找到它。

Font Code

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

    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 is undefined

【讨论】：