Three.js OBJLoader 解析方法不起作用答案

【问题标题】：Three.js OBJLoader parse method not workingThree.js OBJLoader 解析方法不起作用
【发布时间】：2020-06-29 17:11:57
【问题描述】：

我想渲染我的用户生成的 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;

【问题讨论】：

在@Mugen87 的回答之上，我还发现我们可以向立方体添加材料` var cube = loader.parse(objString); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); cube.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material = material; } });场景.add(立方体); ` 从这个答案中看到：stackoverflow.com/a/35856775/6680543

标签： three.js wavefront

【解决方案1】：

OBJLoader 实际上工作正常。问题是加载器返回带有MeshPhongMaterial 的网格，这是一种光照材质。由于您的场景中没有任何灯光，因此您只有黑屏。像这样尝试：

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 );
camera.position.z = 5;

let loader = new THREE.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 hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight );

var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( - 3, 10, - 10 );
scene.add( dirLight );


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

animate();

body {
    margin: 0px;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/examples/js/loaders/OBJLoader.js"></script>

【讨论】：