我正在嘗試渲染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
uj5u.com熱心網友回復：
我注意到兩個問題：
- 你的場景需要燈光。當網格被添加到場景中時，它們不會被照亮，因此它們保持黑色。
- 您只呼叫
renderer.render()一次，這發生在您加載 GLTF之前。因此，當頭盔最終加載時，不會進行渲染。
我在你的 Codepen 中做了這兩個更新，頭盔出現了。
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);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/346978.html
標籤：javascript 三.js 格特夫
上一篇：無法在媒體查詢中隱藏溢位-x