带有 Three.js 和 React.js 的 JSON 3D 元素

Question

所以，我会尽力解释。我正在 React.js 中开发一个应用程序，我在开发此应用程序时正在学习该应用程序。我现在需要一个 3D 元素，它是一张沙发，在我的页面中，应该允许用户使用鼠标移动和旋转对象。
我开始使用 Three.js 这似乎是我需要的最佳选择，因为 3D 来自请求的 JSON 文件到通过令牌访问的 API。因此，我使用 Three.js 中的 JSONloader 来加载 JSON 文件并将其输出到渲染函数中。

这是它现在在控制台上的错误：

[![在此处输入图片描述][1]][1]

我将在下面留下代码：

import React from 'react';
import * as THREE from 'three';
import { ArrowSofa } from './ArrowSofa';

const line = (<Line />);
const mod = <Modulos />;

var loader = new THREE.JSONLoader();
var scene = new THREE.Scene();

export class Sofa extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            token: {},
            isLoaded: false,
            model: {}
        };
    }

    componentDidMount() {

        /* here are the fetches to have an API response with authentication token */


        fetch(url + '/couch-model/' + this.props.match.params.id + '/', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
            }
        }).then(res => {
            if (res.ok) {
                return res.json();
            } else {
                throw Error(res.statusText);
            }
        }).then(json => {
            this.setState({
                model: json,
                isLoaded: true
            }, () => { });
        })
    }

    render() {

        const { model, isLoaded } = this.state;

        if (isLoaded) {

            let json_3d = model.layout_set[0].json_3d;     

            loader.load('url' + json_3d,
                function (geometry, materials) {
                    var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
                    scene.add(mesh);
                });
        }

        if (!isLoaded) {

            return (
                <div id="LoadText">
                    Loading...
                </div>
            )

        } else {

            return (
                <div id="Sofa">
                    <h2>{model.area_set.map(area => area.name)}</h2>
                    <h1>{model.name}</h1>
                    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

                    {/* I want to show the 3D model here */}

                    <ArrowSofa
                        handleAddOne={this.handleAddOne}
                        handleLessOne={this.handleLessOne} />

                </div>
            );

        }

    }

}

JSON 文件： [jsonblob.com/87e6971a-9a2a-11e8-804a-6546f7c36ad8][2]

所以我现在真的不知道该怎么做，或者如果我将代码放在正确的位置，有人可以帮忙吗？
有任何疑问，如果我不够清楚，我会在这里回答。抱歉打扰了。

更新 - 现在没有错误，但仍然不知道我是否有任何对象可以渲染

Answer 1

根据错误，听起来您从服务器接收的 JSON 格式可能不正确。通过检查 DevTools 中的 Network 选项卡或将一些响应字符串记录到控制台，您能否确认您获得的数据格式正确？