3D json object in my react-app

Questions
, , ,
1

Hello, firstly, I’m sorry if my question looks a bit dumb but I started with three.js literally yesterday. I’ve been developing for the last month an application with React.js, which I’m also in a process of learning.
About my issue, I need to load a JSON 3D object and to show in DOM the 3D object and make it able to be rotated and changeble by its textures. This is my code right now, sorry if is with React.js also, but is for you to see all the context, or at least great part of it.

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) {

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

        } else {

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

        loader.load('https://api-simulador.luissilva.pt' + json_3d,
            function (geometry, materials) {
                var mesh = new THREE.Mesh(geometry, materials);
                scene.add(mesh);

                console.log('mesh: ', mesh);
            });

            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>
            );

        }

    }

}

Also, here’s the JSON 3D file: jsonblob

2

Um, it looks your linked JSON file is just a serialized material. I guess what you really want is a serialized mesh that has geometry and material data. How have you created the JSON file?

In general, you can place a canvas element in your HTML markup and then use it to create an instance of WebGLRenderer. You can use the following example as a starter template:

https://jsfiddle.net/f2Lommf5/11246/

3

Hello, this JSON is a response from a fetch to an django API. I’ll check that out, thanks :slight_smile: