无法使用 three.js 渲染 GLTF 对象

Posted 2023-03-16

【中文标题】无法使用 three.js 渲染 GLTF 对象

【英文标题】：Unable to render GLTF object with three.js

【发布时间】：2021-12-18 04:48:51

【问题描述】：

我正在尝试渲染由 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

【问题讨论】：

这是javascript，不是java。我为你更改了标签。

谢谢，我的错！

【参考方案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);
);