通过Three.js加载三维模型

Question

我已经开始进入Three.js，并且一直在加载gltf文件。我已经设法修复了所有错误，但我的模型仍然没有出现在我的页面上。这是我的代码：

function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);
/*
let geometry = new THREE.BoxGeometry();
let material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );*/
var loader = new GLTFLoader();
loader.load(
// resource URL
'models/eevee/eevee.gltf',
// called when the resource is loaded
function ( gltf ) {
let object = gltf.scene.children[0];
object.scale.set(0.1,0.1,0.1);
object.position.set(0, -10, -0.75);
scene.add( object );
renderer.render(scene, camera);
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
console.log(error)
}
);
camera.position.z = 5;
window.addEventListener('resize', onWindowResize);
}

正如我所说，没有错误显示，但三维模型没有显示在我的页面上。

Answer 1

它对我来说很好，我只需要添加一个Ambiant Light，设置相机位置，并将"THREE"添加到：var loader = new THREE.GLTFLoader();

function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
light = new THREE.AmbientLight(0xffffff); 
scene.add(light);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.set(150, 180, 280);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
var loader = new THREE.GLTFLoader();
loader.load(
'assets/models/gltf/street_car.glb',
function ( gltf ) {
let object = gltf.scene.children[0];
object.scale.set(100,100,100);
object.position.set(0, 0, 0);
scene.add( object );
renderer.render(scene, camera);
},
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
function ( error ) {
console.log( 'An error happened' );
console.log(error)
}
);
camera.position.z = 5;
window.addEventListener('resize', onWindowResize);
}
init();