Почему я не могу увидеть какую-либо модель после загрузки файла FBX? - PullRequest
Новая
       17

Почему я не могу увидеть какую-либо модель после загрузки файла FBX?

0 голосов
/ 03 мая 2020

Я занимаюсь разработкой веб-системы с использованием трех. js.

После загрузки файла 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>

версия: три. js r116

1 Ответ

0 голосов
/ 03 мая 2020

Хм ... ты можешь скопировать / вставить этот код и сказать мне, что ты видишь? Это работает для меня. 

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

Я всегда добавляю плоскость, чтобы обязательно что-то видеть ^^

...