Question

试图通过三个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)
    }
}

Answer 1

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

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

Answer 2

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

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 = {来自three.js github库的代码}

，您将得到一个错误的fontJSON定义错误

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

2 个答案: