React和Three.JS FBXLoader:模型不可见,控制台中没有错误

时间:2018-10-05 06:32:02

标签: javascript reactjs three.js blender

我遇到错误,需要帮助。我真的没有太多时间来解决此问题,我觉得我已经尝试了一切。我是Three.js的一个完整的初学者(可能会注意到),但是我已经不喜欢它了(我的海滩是后端和数学),并且我承受着很大的压力来完成此:/。

因此,我在Blender上创建了一个奇特的pancy模型,然后尝试以成千上万的方式将其导出到three.js,但收效甚微。大量错误,最好是黑屏。我最后使用FBXLoader的最好之处是,它散发出可爱的丰富黑屏,我们都学会了厌恶,但是我尝试了JSONLoader(我在.mtl文件中苦苦挣扎)和OBJLoader&MTLLoader,也都没有成功。现在说真的,我想我太急于专注于理解这一点,并发现潜伏在这堆垃圾后面的可能相当简单的错误。我将不胜感激,博学多才,无判断力。

import React, {Component} from "react";
import * as THREE from "three";

class ThreeScene extends Component {

    componentDidMount = () => {
        let THREE = require('three');
        let FBXLoader = require('three-fbx-loader');

        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.z = 4;
        //ADD RENDERER
        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this.renderer.setClearColor("#ffffff");
        this.renderer.setSize(width, height);
        this.mount.appendChild(this.renderer.domElement);
        //ADD CUBE


        this.loader = new FBXLoader();
        this.loader.load('scene2.fbx',   object  =>{
            object.traverse( function ( child ) {
                if ( child.isMesh ) {
                    child.castShadow = true;
                    child.receiveShadow = true;
                }
            } );

            this.light = new THREE.DirectionalLight(0xffffff, 1);
            this.light.position.set(10, 10, 10);
            this.scene.add(object);

            this.scene.add(this.light);
            this.start();

        });

        this.camera.position.z = 70;



    };
    componentWillUnmount = () => {
        this.stop();
        this.mount.removeChild(this.renderer.domElement);
    };
    start = () => {
        if (!this.frameId) {
            this.frameId = requestAnimationFrame(this.animate);
        }
    };
    stop = () => {
        cancelAnimationFrame(this.frameId);
    };
    animate = () => {
        this.renderScene();
        this.frameId = window.requestAnimationFrame(this.animate);
    };
    renderScene = () => {
        this.renderer.render(this.scene, this.camera);
    };

    render() {
        return (
            <div
                style={{width: "444vw", height: "40vw"}}
                ref={mount => {
                    this.mount = mount;
                }}
            />
        );
    }
}

export default ThreeScene;

0 个答案:

没有答案