Question

我正在尝试使用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

Answer 1

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

在你的情况下，你似乎没有渲染循环，所以你至少需要在你的loader onload回调中调用renderer.render（场景，摄像头）。

// 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);

Javascript：FBXLoader没有显示任何内容

1 个答案: