三个JS GLTFLoader 用vue 出错答案

【问题标题】：Three JS GLTFLoader is faulty with vue三个JS GLTFLoader 用vue 出错
【发布时间】：2021-09-05 14:22:23
【问题描述】：

我有一个 glb 模型，我正在通过 Three js 将它加载到我的 Vue 项目中。我已设法导入其他几个模型进行练习，但我真正想要在我的页面上的模型不会加载。我尝试过使用不同的缩放比例、位置、背景颜色（因为对象大部分是黑色的）和摄像机角度，但无论我做什么，我都无法将它放在框架中。我可以在任何常规 gltf 视图中完美地看到模型，但在我的项目中看不到它，我在这里做错了什么？

编辑：作为旁注，我也尝试在搅拌机中更改比例，但这并没有改变结果。

const loader = new GLTFLoader();

let me = this; // must refer to the instance in vue in order to be added to the scene, have tested this with other models

loader.load(
   'pantalla_ball_2.glb',
   function(gltf) {
      gltf.scene.traverse(function( node ) {
         if ( node.isMesh ) { node.castShadow = true; }
      });
      gltf.scene.scale.set(1,1,1) // Have tried several scales from 0.01 to 200

      me.scene.add(gltf.scene);
      console.log("added") // added is successfully called every time
   },
   function(xhr) {
      console.log(xhr);
   },
   function(err) {
      console.log(err); // no errors appear in console
   }
);

对象在下面的 3d 查看器中完美加载

【问题讨论】：

您是否尝试将“gltf”添加到您的场景中。另外我想你的场景有一些光线？
只在场景中添加了 gltf 给我一个错误“对象不是 THREE.Object3D 的实例”，场景中还有环境照明。
加载后，您能看到您的对象作为子对象添加到场景对象中吗？
是的，在 gltfloader.load 命令之后，灰色和黑色网格都显示为场景的子级
在与您的对象相同的位置添加一个轴助手，以确保您的相机指向正确的位置。您应该看到每个轴都有一条线。 const axesHelper = new THREE.AxesHelper( 50 );场景.add(axesHelper);

标签： javascript vue.js three.js gltf

【解决方案1】：

感谢 JP4 提供帮助的 cmets，问题是环境照明不够强，无法将物体照亮到足以被看到的程度。由于轴上的间隙，轴助手向我展示了物体在那里。

【讨论】：