Glb is black after load but works with other viewers

[crapthings]

there’s light enabled, but still black

GLTF -> React Three Fiber

Creators 3D - Jobs for Professional Artists

16b20fdd-b23e-4b5c-88a8-ef94a5c128a4.glb (715.0 KB)

const loadModel = (model) => {
  app.loader.load(baseUrl + model, async function (gltf) {
    const model = gltf.scene

    console.log(model.children[0].children[0].material)

    // model.children[0].castShadow = true
    // model.children[0].receiveShadow = true

    // model.children[0].children[0].material.metalness = 0.5
    // model.children[0].children[0].material.wireframe = true

    await app.renderer.compileAsync(model, app.camera, app.scene)

    app.scene.add(model)

    objs.push(model)

    const dragControls = new DragControls(objs, app.camera, app.renderer.domElement)

    window.addEventListener('mousemove', onMouseMove, false)
    dragControls.addEventListener('dragstart', function () { app.controls.enabled = false })
    dragControls.addEventListener('drag', onDragEvent)
    dragControls.addEventListener('dragend', function () { app.controls.enabled = true })
  }, undefined, function (error) {
    console.error(error)
  })
}

app.scene = new THREE.Scene()
app.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
app.renderer = new THREE.WebGLRenderer({ alpha: true })
app.light = new THREE.AmbientLight(0xffaaff, 2) // soft white light

app.pointLight1 = new THREE.PointLight(0xff0000, 1)

app.gridHelper = new THREE.GridHelper(100, 100)

app.gridHelper.position.set(0, -.8, 0)

app.controls = new OrbitControls(app.camera, app.renderer.domElement)

app.camera.position.set(0, 2, 5)
app.renderer.setSize(window.innerWidth, window.innerHeight)
app.renderer.setPixelRatio(window.devicePixelRatio)

app.renderer.outputEncoding = THREE.sRGBEncoding
app.toneMapping = THREE.ACESFilmicToneMapping;
app.toneMappingExposure = 1;
app.outputEncoding = THREE.sRGBEncoding;

// app.light.position.set(0)
app.pointLight1.position.set(0, 2, 2)

// app.scene.add(app.light)
app.scene.add(app.pointLight1)
app.scene.add(app.gridHelper)

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshPhongMaterial()
const cube = new THREE.Mesh(geometry, material)

cube.position.set(2, 0, 0)

app.scene.add(cube)

app.controls.update()

function animate () {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  app.controls.update()

  app.renderer.render(app.scene, app.camera)
}

animate()

update:

i also tested

https://threejs.org/editor/

if environment is model viewer it works

[Lawrence3DPK]

This will be due to the metalness value of the materials, metalness needs environmental lighting to render reflections of the environment, try traversing the models and setting the metalness of materials for each object to 0 or use environmental / hemisphere lighting if you need to keep the metalness value

[donmccurdy]

It looks like the glTF file does not contain a material at all, just a mesh with vertex colors. And so the ‘default’ material has ‘1’ for metallic and roughness values. It might be best if the tool producing the model were to include a rough (metal=0, rough=1) material by default instead.

[crapthings]

thanks