Three.js с Angular: объект не виден в сцене - PullRequest
Новая
       7

Three.js с Angular: объект не виден в сцене

0 голосов
/ 24 февраля 2019

Я пытаюсь визуализировать 3d-модель в моей сети, используя Three.js.(Я пытаюсь сделать Pokédex :)) В проекте используется ASP.NET Core 2.1 и Angular 7. Модель представляет собой FBX-файл, поэтому я использую FBX-загрузчик.

Проблема заключается в следующем:Кажется, я не вижу модель.

Что я пробовал:

  • Проверьте, правильно ли загружена модель загрузчиком fbx
  • Проверьте, есть ли моделиThree.js
  • поддерживает двоичный формат. После добавления
  • проверьте, содержит ли сцена модель.
  • Проверьте, смотрит ли камера на сцену.внутри модели
  • Проверьте, инвертированы ли нормали
  • Добавьте свет к сцене
  • Проверьте, видна ли модель в другом браузере (FF, Chrome, Edge)
  • Попробуйте кодировать в соответствии с документацией
  • Попробуйте загрузить другой формат (.dae, используя Collada-загрузчик)
  • Конечно, тщательно проверил вывод консоли

Соответствующий код: 

import { Component } from '@angular/core';
import { Pokemon } from "../models/pokemon";
import { mockPokemon } from "../../mockdata/mockPokemon";
import { Type } from "../models/type";
import { FBXService } from "../services/fbx-service";
var THREE = require('three');
var FBXLoader = require('three-fbx-loader');

var scene = new THREE.Scene();
var manager = new THREE.LoadingManager();
var loader = new FBXLoader();
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setSize(500, 500);
var camera = new THREE.PerspectiveCamera(100, 1, 0, 1000);
camera.position.set(0, -500, 0);
camera.lookAt(scene.position);

@Component({
    selector: 'app-pokemon-list',
    templateUrl: './pokemon-list.component.html',
    styleUrls: ['./pokemon-list.component.scss']
})
export class PokemonListComponent {

public pokemon: Pokemon;
public nationalDexId = "";

constructor(private fbxService: FBXService) {
    this.pokemon = mockPokemon[0];
    this.setUpManager();
    this.getFBX();
    this.renderFBX();
}

setUpManager() {
    manager.onStart = function (fbx, itemsLoaded, itemsTotal) {
        console.log('Started loading file: ' + fbx + '\nLoaded ' +  itemsLoaded + ' of ' + itemsTotal + ' files')
    }
    manager.onLoad = function () {
        console.log('Loading complete!');
    };
    manager.onProgress = function (fbx, itemsLoaded, itemsTotal) {

        console.log('Loading file: ' + fbx + '\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files');

    };
    manager.onError = function (fbx) {

        console.log('There was an error loading ' + fbx);
    };

    loader = new FBXLoader(manager);
}

getFBX(): void {

    var fbx = this.fbxService.getFBX(this.pokemon.nameEn);

    loader.load(fbx,
        function (object3d) {
            var mesh = object3d.children[2];
            mesh.material = new THREE.MeshBasicMaterial();
            scene.add(mesh)
        },
        function (progress) {
            console.log("Status: " + progress.explicitOriginalTarget.statusText);
            console.log(progress);
        }
    );

    document.body.appendChild(renderer.domElement);
}

renderFBX() {
    requestAnimationFrame(() => this.renderFBX);
    renderer.render(scene, camera);
    console.log(scene);
}

}

ОБНОВЛЕНИЕ

Итак, теперь я передаю сетку из моего загрузчика внутри функции setContent: 

setContent(object: any): void {
        object.updateMatrixWorld();
        const box = new THREE.Box3().setFromObject(object);
        const size = box.getSize(new THREE.Vector3()).length();
        const center = box.getCenter(new THREE.Vector3());

        camera.near = size / 100;
        camera.far = size * 100;
        camera.fov = size;
        camera.aspect = 1;
        camera.updateProjectionMatrix();

        camera.position.copy(center);
        camera.position.x += size * 2;
        camera.position.y += size * 2;
        camera.position.z += size * 2;
        camera.lookAt(center);
        scene.add(object);
        console.log(scene);
}

ОБНОВЛЕНИЕ 2

Итак, я создал Bounding-Бокс, чтобы настроить мою камеру в соответствии с Mugen87 в разделе комментариев.Теперь камера должна находиться за пределами ограничительной рамки (и, следовательно, за пределами модели) и указывать на центр.Как вы можете видеть, положение сцены составляет (0,0,0), а положение камеры - прибл.в (692, 692, 692):

Сцена Камера

Я все еще не вижу модель.Какие еще факторы здесь важны?Любая помощь очень ценится.

...