Javascript：FBXLoader 不显示任何内容答案

【问题标题】：Javascript: FBXLoader not displaying anythingJavascript：FBXLoader 不显示任何内容
【发布时间】：2018-07-14 16:13:27
【问题描述】：

我正在尝试使用 FBXLoader 来显示我从 API 获得的 FBX 二进制文件。当我检查控制台日志时，它显示它下载了 100%，但没有显示任何内容。我已经尝试过使用和不使用网格部分。我唯一能想到的是，我调用的 API 将这个 FBX 文件发回，其中 Content-Type 是应用程序/下载。我不确定这是否重要，因为我仍然收到 FBX 二进制文件，并且当我在 Chrome 开发工具中查看响应时可以查看整个文件。

        var camera = new THREE.PerspectiveCamera(45, 1, 1, 2000);
        // camera.position.set( 600, 1150, 5 );
        // camera.up.set( 0, 0, 1 );
        // camera.lookAt( new THREE.Vector3( -100, 0, 0 ) );

        var scene = new THREE.Scene();

        // model
        var manager = new THREE.LoadingManager();
        manager.onProgress = function(item, loaded, total) {
          console.log(item, loaded, total);
        };
        var onProgress = function(xhr) {
          if (xhr.lengthComputable) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
          }
        };
        var onError = function(xhr) {};
        var loader = new THREE.FBXLoader(manager);
        loader.load(xhr.responseURL, function(geometry) {
          mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
          mesh.scale.set( 10, 10, 10 );
          mesh.position.y = 150;
          mesh.position.x = 0;
          scene.add(mesh);
          console.log(mesh);
        }, onProgress, onError);
        var renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(500, 500);
        renderer.render(scene, camera);
        var container = document.getElementById("ava");
        container.appendChild(renderer.domElement);

screenshot of 100% FBX download

【问题讨论】：

你没有在场景中添加相机，你似乎没有在任何地方打电话给renderer.render(scene, camera);。
@2pha 我添加了那个，我仍然得到同样的东西：/
你在哪里添加的？您必须确保在模型加载后至少渲染一次场景。
@2pha 我添加了它。很抱歉。

标签： javascript vue.js three.js fbx

【解决方案1】：

通常您会在循环中调用renderer.render(scene, camera)，但并非总是如此。

在您的情况下，您似乎没有渲染循环，因此您至少需要在加载程序 onload 回调中调用 renderer.render(scene, camera)。

// set up your renderer first.
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(500, 500);
var container = document.getElementById("ava");
container.appendChild(renderer.domElement);
renderer.render(scene, camera);

var loader = new THREE.FBXLoader(manager);
loader.load(xhr.responseURL, function(geometry) {
  mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
  mesh.scale.set( 10, 10, 10 );
  mesh.position.y = 150;
  mesh.position.x = 0;
  scene.add(mesh);
  console.log(mesh);
  // Call render here as a mesh has been added.
  renderer.render(scene, camera);
}, onProgress, onError);

【讨论】：