Javascript Three.JS帮助加载GLTF模型

我正在使用教程学习THREE.JS。我正在努力加载我的GLTF模型。它没有显示在浏览器中。我需要创建两个场景吗？一个是我的背景，一个是我的模特？也没有我可以处理的控制台错误。我查阅了另一篇关于堆栈溢出的文章，其中讨论了类似的问题，他们讨论了实现动画功能，但我已经包括了这一点

var canvas, renderer, scene, camera, particle, loader;

window.onload = function() {
  init();
  animate();

}

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio 
  : 1);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.autoClear = false;
  renderer.setClearColor(0x000000, 0.0);
  document.getElementById('canvas').appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / 
  window.innerHeight, 1, 1000);
  camera.position.z = 400;
  scene.add(camera);


  var loader = new THREE.GLTFLoader();
  loader.load('models/scene.glb', function(gltf){
    let model = gltf.scene
    let child = model.children[0]
    model.scale.x = model.scale.y = model.scale.z = 0.15;
    model.castShadow = true;
    model.receiveShadow = true;
    model.position.y = -0.5;

    scene.add(model);
  }, undefined, function (error){
    console.error(error);
  });


  var material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading
  });

  particle = new THREE.Object3D();
  scene.add(particle);
  var geometry = new THREE.SphereGeometry(2, 12, 12);

  for (var i = 0; i < 1000; i++) {
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() 
    - 0.5).normalize();
    mesh.position.multiplyScalar(90 + (Math.random() * 700));
    mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 
    2);
    particle.add(mesh);
  }

  var mat = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    shading: THREE.FlatShading
  });

  var mat2 = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    wireframe: true,
    side: THREE.DoubleSide

  });


  var ambientLight = new THREE.AmbientLight(0x999999 );
  scene.add(ambientLight);

  var lights = [];
  lights[0] = new THREE.DirectionalLight( 0xffffff, 1 );
  lights[0].position.set( 1, 0, 0 );
  lights[1] = new THREE.DirectionalLight( 0x11E8BB, 1 );
  lights[1].position.set( 0.75, 1, 0.5 );
  lights[2] = new THREE.DirectionalLight( 0x8200C9, 1 );
  lights[2].position.set( -0.75, -1, 0.5 );
  scene.add( lights[0] );
  scene.add( lights[1] );
  scene.add( lights[2] );


  window.addEventListener('resize', onWindowResize, false);

};

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);

  particle.rotation.x += 0.0000;
  particle.rotation.y -= 0.0040;

  renderer.clear();

  renderer.render( scene, camera )
};

var画布、渲染器、场景、摄影机、粒子、加载程序；
window.onload=函数（）{
init（）；
制作动画（）；
}
函数init（）{
renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
renderer.setPixelRatio（（window.devicePixelRatio）？window.devicePixelRatio
: 1);
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.autoClear=false；
setClearColor（0x000000，0.0）；
document.getElementById（'canvas'）.appendChild（renderer.doElement）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（75，窗口宽度/
窗内高度，11000）；
摄像机位置z=400；
场景。添加（摄影机）；
var loader=new THREE.GLTFLoader（）；
loader.load（'models/scene.glb'，函数（gltf）{
让model=gltf.scene
let child=model.children[0]
model.scale.x=model.scale.y=model.scale.z=0.15；
model.castShadow=true；
model.receiveShadow=true；
model.position.y=-0.5；
场景。添加（模型）；
}，未定义，函数（错误）{
控制台错误（error）；
});
var材质=新的3.0网格材质({
颜色：0xffffff，
明暗处理：3.5倍明暗处理
});
粒子=新的三个。Object3D（）；
场景。添加（粒子）；
var几何=新的三种。球墨法（2,12,12）；
对于（变量i=0；i<1000；i++）{
var mesh=新的三个网格（几何体、材质）；
mesh.position.set（Math.random（）-0.5，Math.random（）-0.5，Math.random（））
-0.5）。标准化（）；
mesh.position.multilyscalar（90+（Math.random（）*700））；
mesh.rotation.set（Math.random（）*2，Math.random（）*2，Math.random（）*
2);
粒子。添加（网格）；
}
var mat=新的三点网格材料({
颜色：0xffffff，
明暗处理：3.5倍明暗处理
});
var mat2=新的三点网格材质({
颜色：0xffffff，
线框：对，
侧面：三个。双面
});
var环境光=新的三个环境光（0x999999）；
场景。添加（环境光）；
var灯=[]；
灯光[0]=新的三个方向灯光（0xffffff，1）；
灯光[0].位置.set（1,0,0）；
灯[1]=新的三方向灯（0x11E8BB，1）；
灯光[1].位置.set（0.75,1,0.5）；
灯[2]=新的三方向灯（0x8200C9，1）；
灯光[2]。位置。设置（-0.75，-1,0.5）；
场景。添加（灯光[0]）；
场景。添加（灯光[1]）；
场景。添加（灯光[2]）；
addEventListener（'resize'，onWindowResize，false）；
};
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
粒子旋转x+=0.0000；
粒子旋转y-=0.0040；
.clear（）；
渲染器。渲染（场景、摄影机）
};

尝试检查dev tools的“网络”选项卡，以确保它正在加载很多内容，这取决于

.glb

文件中的内容。使用

console.log（）。其次，您的
.glb
对象可能太大（因此摄影机在其内部）或太小（可能在某物后面渲染），或看不见（可能在x轴上偏离1000个单位）。。。如果没有一个实例，就不可能准确地说出发生了什么。