Three.js OBJLoader解析方法不工作

我希望呈现用户生成的obj，而不是从文件加载。 在下面的示例中，

objString

表示一个多维数据集。 浏览器只是显示一个黑色屏幕。我期待着一个绿色的立方体旋转显示

我想知道我错过了什么

import React from 'react';
import * as THREE from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader"

class App extends React.Component {
    componentDidMount() {
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        let loader = new OBJLoader();

        // obj string below represents a cube
        var objString = `
            v 0.000000 2.000000 2.000000
            v 0.000000 0.000000 2.000000
            v 2.000000 0.000000 2.000000
            v 2.000000 2.000000 2.000000
            v 0.000000 2.000000 0.000000
            v 0.000000 0.000000 0.000000
            v 2.000000 0.000000 0.000000
            v 2.000000 2.000000 0.000000
            f 1 2 3 4
            f 8 7 6 5
            f 4 3 7 8
            f 5 1 4 8
            f 5 6 2 1
            f 2 6 7 3
        `;

        var cube = loader.parse(objString);
        scene.add( cube );

        // var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        // var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        // var cube = new THREE.Mesh( geometry, material );
        // scene.add( cube );

        camera.position.z = 5;
        var animate = function () {
            requestAnimationFrame( animate );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
        };
        animate();
    }

    render() {
        return (
            <div></div>
        );
    }
}

export default App;

从“React”导入React；
从“三”中导入*作为三；
从“三个/examples/jsm/loaders/OBJLoader”导入{OBJLoader}
类应用程序扩展了React.Component{
componentDidMount（）{
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
let loader=new OBJLoader（）；
//下面的obj字符串表示一个立方体
变量对象字符串=`
v 0.000000 2.000000 2.000000
V0.0000000.0000002.000000
v 2.0000000.0000002.000000
v 2.000000 2.000000 2.000000
v 0.000000 2.000000 0.000000
V0.0000000.0000000.000000
v 2.0000000.0000000.000000
v 2.000000 2.000000 0.000000
f 1 2 3 4
f 8 7 6 5
f 4 3 7 8
f 5 1 4 8
f 5 6 2 1
f 2 6 7 3
`;
var cube=loader.parse（objString）；
场景.添加（立方体）；
//var geometry=新的3.BoxGeometry（1,1,1）；
//var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
//var cube=新的三个网格（几何体、材质）；
//场景.添加（立方体）；
摄像机位置z=5；
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
制作动画（）；
}
render（）{
返回(
);
}
}
导出默认应用程序；

OBJLoader

实际上工作正常。问题是加载程序返回带有

MeshPhongMaterial

的网格，该材质为亮起材质。因为场景中没有任何灯光，所以只有一个黑屏。试着这样做：

var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=5；
让loader=new THREE.OBJLoader（）；
//下面的obj字符串表示一个立方体
变量对象字符串=`
v 0.000000 2.000000 2.000000
V0.0000000.0000002.000000
v 2.0000000.0000002.000000
v 2.000000 2.000000 2.000000
v 0.000000 2.000000 0.000000
V0.0000000.0000000.000000
v 2.0000000.0000000.000000
v 2.000000 2.000000 0.000000
f 1 2 3 4
f 8 7 6 5
f 4 3 7 8
f 5 1 4 8
f 5 6 2 1
f 2 6 7 3
`;
var cube=loader.parse（objString）；
场景.添加（立方体）；
var hemiLight=新的三个半球灯光（0xffffff，0x444444）；
半光位置设置（0,20,0）；
场景。添加（半光）；
var dirLight=新的三方向光（0xffffff）；
dirLight.position.set（-3,10，-10）；
场景。添加（dirLight）；
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
制作动画（）
正文{
边际：0px；
}
帆布{
显示：块；
}
OBJLoader
实际上工作正常。问题是加载程序返回带有
MeshPhongMaterial
的网格，该材质为亮起材质。因为场景中没有任何灯光，所以只有一个黑屏。试着这样做：


var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=5；
让loader=new THREE.OBJLoader（）；
//下面的obj字符串表示一个立方体
变量对象字符串=`
v 0.000000 2.000000 2.000000
V0.0000000.0000002.000000
v 2.0000000.0000002.000000
v 2.000000 2.000000 2.000000
v 0.000000 2.000000 0.000000
V0.0000000.0000000.000000
v 2.0000000.0000000.000000
v 2.000000 2.000000 0.000000
f 1 2 3 4
f 8 7 6 5
f 4 3 7 8
f 5 1 4 8
f 5 6 2 1
f 2 6 7 3
`;
var cube=loader.parse（objString）；
场景.添加（立方体）；
var hemiLight=新的三个半球灯光（0xffffff，0x444444）；
半光位置设置（0,20,0）；
场景。添加（半光）；
var dirLight=新的三方向光（0xffffff）；
dirLight.position.set（-3,10，-10）；
场景。添加（dirLight）；
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
制作动画（）
正文{
边际：0px；
}
帆布{
显示：块；
}

在@Mugen87的答案之上，我还发现我们可以向多维数据集中添加材料`var cube=loader.parse（objString）；var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；遍历（函数（子）{if（三个网格的子实例）{child.material=material；}}）；场景。添加（立方体）；`从这个答案中可以看出：在@Mugen87的答案之上，我还发现我们可以向多维数据集中添加材料`var cube=loader.parse（objString）；var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；遍历（函数（子）{if（三个网格的子实例）{child.material=material；}}）；场景。添加（立方体）；`从这个答案中可以看出：