json 3d元素与three.js和react.js

所以,我会尽力解释。我正在开发一个应用程序 反应物 在我开发这个的时候我正在学习。我现在需要一个 三维单元 这是一个沙发,在我的页面中,用户应该能够用鼠标移动和旋转对象。
我开始使用 JS 这似乎是我所需要的最佳选择,因为 三维 进来了 杰森 来自令牌访问的API请求的文件。所以,我在用 JSON装载机 从three.js加载JSON文件并在render函数上输出。

这是当前控制台上的错误:

[![在此处输入图像描述][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]

所以我不知道现在该怎么做,或者如果我把代码放在正确的地方,有人能帮忙吗?
如果有任何疑问,如果我不够清楚,我会在这里回答。抱歉打扰了。

更新 -现在没有埃罗斯,但仍然不知道我有没有准备好渲染的对象