无法使用 three.js 呈现 GLTF 对象

Question

我正在尝试渲染 three.js 指南 (https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/DamagedHelmet)

提供的 GLTF 对象

为此，我尝试使用他们指南中提供的以下加载器 (https://threejs.org/docs/#examples/en/loaders/GLTFLoader)

按照 threejs 指南，我编写了应该加载和呈现 GLTF 文件的代码：

"use strict";
const loader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const ratio = window.innerWidth / window.innerHeight
const camera = new THREE.PerspectiveCamera( 75, ratio, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();


const path = 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'

camera.position.set(0,0,0)
camera.lookAt(10,0,0)
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );


loader.load(path, function ( gltf ) {
  gltf.scene.position.x=10
  scene.add( gltf.scene );
}, function ( xhr ) {
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
 
}, function ( error ) {
  console.log( 'An error happened' , path);
});

不幸的是，即使浏览器从 Internet 正确加载资源文件并且控制台中没有错误，场景仍然是黑色的。

所以，我的问题是：如何修复我的 codepen，以便它使用 three.js 在浏览器中显示 GLTF 对象？

编辑：感谢最佳答案，这里有一个可以正常工作的代码笔：https://codepen.io/spocchio/pen/vYJpaLg

Answer 1

我注意到 2 个问题：

您的场景需要灯光。当网格被添加到场景中时，它们不会被照亮，因此它们保持黑色。
您只调用了一次 renderer.render()，并且在您加载 GLTF 之前发生了这种情况。所以当头盔最终加载时没有渲染发生。

我在您的 Codepen 中进行了这 2 次更新，头盔出现了。

renderer.render( scene, camera );

// Add ambient light
scene.add(new THREE.AmbientLight());

loader.load(path, function ( gltf ) {
  gltf.scene.position.x=10
  scene.add( gltf.scene );

  // Render scene after assets have been added
  renderer.render( scene, camera );
}, function ( xhr ) {
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
 
}, function ( error ) {
  console.log( 'An error happened' , path);
});

无法使用 three.js 呈现 GLTF 对象

Unable to render GLTF object with three.js

javascript

three.js

gltf