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

Question

当我在threejs中导入.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>
    )
  }
}

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

Answer 1

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

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