为什么加载 fbx 文件后看不到任何模型？答案

【问题标题】：why can't I see any model after load a fbx file?为什么加载 fbx 文件后看不到任何模型？
【发布时间】：2020-05-03 17:25:35
【问题描述】：

我正在使用three.js 开发一个Web 系统。

加载 fbx 文件后，我在场景中看不到任何模型。

那么控制台中没有错误代码，只显示这个

THREE.FBXLoader: FBX binary version: 7400

有人可以帮忙解决这个问题吗？

提前谢谢你。

main.js 代码

window.addEventListener('load', init);

function init() {
  const width = 960;
  const height = 540;

  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#myCanvas')
  });
  renderer.setSize(width, height);

  const scene = new THREE.Scene();
  const light = new THREE.AmbientLight(0x404040);
  scene.add(light);

  const loader = new THREE.FBXLoader();
  loader.load('static/fbx/dennis.fbx', (object) => {
    scene.add(object);
  });

  const camera = new THREE.PerspectiveCamera(45, width / height);
  camera.position.set(0, 0, 1000);

  const controls = new THREE.OrbitControls(camera, renderer.domElement);

  tick();

  function tick() {

    renderer.render(scene, camera);
    requestAnimationFrame(tick);
  }
}

HTML 代码

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>threejs Test</title>
    <!-- my_css -->
    <link rel="stylesheet" type="text/css" href="/static/css/mystyle.css">
</head>

<body>
<h1>test</h1>
<div class="canvas_wrapper">
    <canvas id="myCanvas"></canvas>
</div>
<!-- three.js_js -->
<script src="static/js/three.min.js"></script>
<script src="static/js/OrbitControls.js"></script>
<script src="static/js/FBXLoader.js"></script>
<script src="static/js/inflate.min.js"></script>
<!-- my_js -->
<script src="static/js/main.js"></script>
</body>
</html>

版本：three.js r116

【问题讨论】：

嗨！我认为这只是您的 HTML 中的一个错误位置。 FBXLoader 和 inflate.min.js 应该在 main 之前调用。
您好，感谢您的评论，我尝试根据您的建议更改我的 HTML 中的 js 文件顺序并编辑有问题的代码，但它仍然无法正常工作...
好的，我觉得不错，只需在 tick() 之前添加 document.body.appendChild(renderer.domElement);。
我认为你不需要window.addEventListener('load', init);
@MlleBz ，我添加了 'document.body.appendChild(renderer.domElement);'在 'tick()' 之前并删除了 'window.addEventListener('load', init);'但是还是不行……

标签： javascript three.js

【解决方案1】：

嗯...你能复制/粘贴这段代码并告诉我你看到了什么吗？它对我有用。

window.addEventListener('load', init);

init();

function init() {
  const width = 960;
  const height = 540;

  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#myCanvas')
  });
  renderer.setSize(width, height);

  const scene = new THREE.Scene();
  const light = new THREE.AmbientLight(0x404040);
  scene.add(light);

  const loader = new THREE.FBXLoader();
  loader.load("static/fbx/dennis.fbx", function(object) {
    scene.add(object);
  });

  const camera = new THREE.PerspectiveCamera(45, width / height);
  camera.position.set(0, 200, 100);

  const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(200, 200), new THREE.MeshPhongMaterial({ color: 0xff0000, side: THREE.DoubleSide }));
  plane.rotation.x = -Math.PI / 2;
  scene.add(plane);

  let controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.update();

  document.body.appendChild(renderer.domElement);
  tick();
  function tick() {
    requestAnimationFrame(tick);
    renderer.render(scene, camera);
  }
}

我总是添加飞机以确保看到一些东西^^

【讨论】：

你好MlleBz，谢谢你的回答，这次我可以看到fbx模型很小，所以我看不到模型的原因是模型的尺寸太小了。
酷！您可以在将模型添加到场景之前重新缩放模型：object.scale.multiplyScalar(10); 或 object.scale.set(10, 10, 10);