Javascript .glb文件导入在threejs中显示黑色对象

当我在3JS中导入.glb文件时，它在表面上显示黑色对象

  Setup = (scene, camera, renderer) =>{
    this.scene = scene
    const objLoader = new GLTFLoader();
    objLoader.load('chair.glb', (gltf) => {
      let root = gltf.scene;
      root.background = new THREE.Color('red')
      console.log(root)
      root.traverse( child => {
        if (child.isMesh) {
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      root.rotation.y = Math.PI;
      root.scale.set(2, 2, 2)
      scene.add(root);
    });
    this.camera = camera
    this.renderer = renderer
  }

正如您在这里看到的，我的对象变黑了，没有任何渲染。 您还可以检查控制台日志，其中有对象详细信息。

我也附上一个文件，你可以找到我的代码

你可以看到我的整个项目代码

import React, { Component }  from 'react'
import * as THREE from "three";
import ReactDOM from 'react-dom';
import CubeView from 'react-cubeview';
import {SketchPicker} from 'react-color'
import '../../node_modules/react-cubeview/lib/css/react-cubeview.css';
import Container3d from 'react-container-3d';
import {OBJLoader2} from 'three/examples/jsm/loaders/OBJLoader2.js';
import { MTLLoader }from 'three/examples/jsm/loaders/MTLLoader.js';
import { GLTFLoader }from 'three/examples/jsm/loaders/GLTFLoader.js';
import { MtlObjBridge }from 'three/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';

let OrbitControls = require("react-cubeview/lib/OrbitControls")(THREE)
let container, controls, scene, camera, renderer, cube, group;
const INITIAL_MTL = new THREE.MeshPhongMaterial({ color: 0xf1f1f1, shininess: 10 });
const INITIAL_MAP = [
{ childID: "back", mtl: INITIAL_MTL },
{ childID: "base", mtl: INITIAL_MTL },
{ childID: "cushions", mtl: INITIAL_MTL },
{ childID: "legs", mtl: INITIAL_MTL },
{ childID: "supports", mtl: INITIAL_MTL }];

const colors = [
  {
    texture: 'fabric.jpg',
    size: [2, 2, 2],
    shininess: 60 
  },
  {
    texture: 'wood.jpg',
    size: [4, 4, 4],
    shininess: 0 
  }
]
export class ModelViewer extends Component {
  constructor(props) {
    super(props)
    let presets = {}
    presets.color = 'red'
    presets.cubesCount = 1
    presets.cubesPosition = { x: 0.0, y: 1.0, z: 0.0 }
    this.state = presets
  }

  Setup = (scene, camera, renderer) =>{
    this.scene = scene
    const objLoader = new GLTFLoader();
    objLoader.load('chair.glb', (gltf) => {
      let root = gltf.scene;
      console.log(root)
      root.traverse( child => {
        if (child.isMesh) {
          child.castShadow = true;
          child.receiveShadow = true;
        }
      });
      root.rotation.y = Math.PI;
      root.scale.set(2, 2, 2)
      scene.add(root);
    });
    this.camera = camera
    this.renderer = renderer
  }

  extractObject = (scene, camera, renderer, color) => {
    const group = new THREE.Group()
    this.group = group
    this.addFloor(scene)
    this.addObject(scene, group)
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMap.enabled = true;
  }

  getDomContainer = () =>{
    return ReactDOM.findDOMNode(container);
  }

  getDomCube() {
      return ReactDOM.findDOMNode(cube);
  }

  Update = (scene, camera, renderer) => {
    // console.log(controls.enableRotate)
    if (scene && camera && renderer) {
        renderer.render(scene, camera)
        this.setState({ scene: scene, camera: camera, renderer: renderer, controls: controls })
    }
  }

  render() {
    return (
      <div className="content-wrapper container" id="container3dViewer">
          <Container3d
              className="canvas-3d"
              percentageWidth={'100%'}
              fitScreen
              ref={c => (container = c)}
              marginBottom={30}
              addLight={true}
              addControls={true}
              addGrid={true}
              antialias={true}
              onUpdateAngles={this.updateAngles2}
              onHoverStart={this.onHoverStart}
              onHoverEnd={this.onHoverEnd}
              setup={this.Setup}
              update={this.Update}
          />
      </div>
    )
  }
}

import React，{Component}来自“React”
从“三”中导入*作为三；
从“react dom”导入react dom；
从“react CubeView”导入CubeView；
从“反应颜色”导入{SketchPicker}
导入“../../node_modules/react cubeview/lib/css/react cubeview.css”；
从“react-container-3d”导入Container3d；
从'three/examples/jsm/loaders/OBJLoader2.js'导入{OBJLoader2}；
从'three/examples/jsm/loaders/MTLLoader.js'导入{MTLLoader}；
从'three/examples/jsm/loaders/GLTFLoader.js'导入{GLTFLoader}；
从“three/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js”导入{MtlObjBridge}；
让OrbitControls=require（“react-cubeview/lib/OrbitControls”）（三个）
让容器、控件、场景、摄影机、渲染器、立方体、组；
const INITIAL_MTL=新的三网格材质（{颜色：0xf1f1，光泽度：10}）；
常量初始映射=[
{childID:“back”，mtl:INITIAL_mtl}，
{childID:“base”，mtl:INITIAL_mtl}，
{childID:“缓冲”，mtl:INITIAL_mtl}，
{childID:“legs”，mtl:INITIAL_mtl}，
{childID:“支持”，mtl:INITIAL_mtl}]；
常量颜色=[
{
纹理：“fabric.jpg”，
大小：[2,2,2]，
光泽度：60
},
{
纹理：“wood.jpg”，
大小：[4,4,4]，
光泽度：0
}
]
导出类ModelViewer扩展组件{
建造师（道具）{
超级（道具）
设预设={}
预设颜色='红色'
presets.cubesCount=1
presets.CubePosition={x:0.0，y:1.0，z:0.0}
this.state=预设值
}
设置=（场景、摄影机、渲染器）=>{
这个场景
const objLoader=new GLTFLoader（）；
objLoader.load（'chair.glb'，（gltf）=>{
设root=gltf.scene；
console.log（根目录）
root.transverse（子项=>{
if（child.isMesh）{
child.castShadow=true；
child.receiveShadow=true；
}
});
root.rotation.y=Math.PI；
根刻度设置（2，2，2）
scene.add（root）；
});
这个照相机
this.renderer=渲染器
}
extractObject=（场景、摄影机、渲染器、颜色）=>{
const group=new THREE.group（）
this.group=组
这个。添加楼层（场景）
this.addObject（场景、组）
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMap.enabled=true；
}
getDomContainer=（）=>{
返回ReactDOM.findDOMNode（容器）；
}
getDomCube（）{
返回ReactDOM.findDOMNode（多维数据集）；
}
更新=（场景、摄影机、渲染器）=>{
//console.log（controls.enableRotate）
if（场景和摄影机及渲染器）{
渲染器。渲染（场景、摄影机）
this.setState（{scene:scene，camera:camera，renderer:renderer，controls:controls}）
}
}
render（）{
返回(
（容器=c）}
marginBottom={30}
addLight={true}
addControls={true}
addGrid={true}
反别名={true}
onUpdateAngles={this.updateAngles2}
onHoverStart={this.onHoverStart}
onHoverEnd={this.onHoverEnd}
setup={this.setup}
update={this.update}
/>
)
}
}

---

我正在尝试渲染3D椅子对象。

我认为您只需要在设置方法中为场景添加一些灯光即可

    let ambientLight = new THREE.AmbientLight(new THREE.Color('hsl(0, 0%, 100%)'), 0.75);
    this.scene.add(ambientLight);

    let directionalLightBack = new THREE.DirectionalLight(new THREE.Color('hsl(0, 0%, 100%)'), 0.25);
    directionalLightBack.position.set(30, 100, 100);
    this.scene.add(directionalLightBack);

    let directionalLightFront = new THREE.DirectionalLight(new THREE.Color('hsl(0, 0%, 100%)'), 0.25);
    directionalLightFront.position.set(-30, 100, -100);
    this.scene.add(directionalLightFront);