Question

我正在尝试使用Three.js在我的网络中渲染3D模型。（我正在尝试制作一本神奇宝贝:)）该项目使用ASP.NET Core 2.1和Angular 7。该模型是FBX文件，因此我正在使用FBX-Loader。

问题是：我似乎看不到模型。

我尝试过的事情：

检查fbx加载程序是否正确加载了模型
检查Three.js是否支持模型二进制格式
添加后检查场景是否实际包含模型
检查相机是否正在观察场景
检查相机是否在模型内
检查法线是否反转
为场景添加灯光
检查模型是否在其他浏览器（FF，Chrome，Edge）上可见
尝试根据文档进行编码
尝试加载其他格式（.dae，使用Collada-loader）
当然要彻底检查控制台输出

相关代码为：

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

因此，我根据注释部分中的Mugen87创建了一个边界框来配置我的相机。摄像头现在应该在边界框之外（因此在模型之外）并且指向中心。如您所见，场景位置为（0,0,0），摄像机位置为大约。在（692，692，692）：

Scene Camera

我仍然看不到模型。还有哪些其他重要因素？任何帮助将不胜感激。

具有角度的Three.js：对象在场景中不可见

0 个答案: