Three.js и Angular 6 не рендерит объект из файла JSON

Question

Я впервые пытаюсь отобразить 3D-вещи в своем браузере.Вот несколько сведений о моем приложении:

• Приложение Angular 6, сгенерированное с помощью JHipster, с использованием веб-пакета и angular-cli.
• Три-полный для three.js, как показано здесь https://www.npmjs.com/package/three-full.

Я получаю 3D-модель на clara.io (https://clara.io/view/1a03ac6b-d6b5-4c2d-9f1a-c80068311396) и загружаю ее как JSON и как .obj (я хотел попробовать оба способа), но мне не удаетсячтобы отобразить его на моем экране.

Вот код:

fox.component.html:

<div id="rendu"></div>

fox.component.ts:

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Detector } from 'detector-js';
const raf = require('raf');
import { LoginModalService, Principal, Account } from 'app/core';

import * as THREE from 'three-full';

@Component({
    selector: 'jhi-poc',
    templateUrl: './fox.component.html',
    styleUrls: ['fox.component.scss']
})
export class FoxComponent implements OnInit {
    @ViewChild('rendu') rendererContainer: ElementRef;
    camera: THREE.PerspectiveCamera = new THREE.PerspectiveCamera();
    scene: THREE.Scene = new THREE.Scene();
    renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer();
    geometry: THREE.Geometry = new THREE.Geometry();
    material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial();
    mesh: THREE.Mesh = new THREE.Mesh();

    constructor(private http: HttpClient) {}

    ngOnInit() {
        const _this = this;

        _this.camera = new THREE.PerspectiveCamera(75, (window.innerWidth * 3 / 4) / (window.innerHeight * 3 / 4), 0.01, 1000);
        _this.camera.position.z = 5;

        _this.scene = new THREE.Scene();

        _this.renderer = new THREE.WebGLRenderer({ alpha: true });
        _this.renderer.setSize(window.innerWidth * 3 / 4, window.innerHeight * 3 / 4);
        _this.renderer.setClearColor(new THREE.Color(0.7, 0.7, 0.7);
        const loader = new THREE.OBJLoader2();
        const url = '3D/fox.json';
        loader.load(url, function(obj) {
            _this.scene.add(obj.detail.loaderRootNode);
            console.log(obj);
        });

        const light = new THREE.AmbientLight(0.7, 0.7, 0.7);
        _this.scene.add(light);
        document.getElementById('rendu').appendChild(this.renderer.domElement);
        _this.renderer.render( _this.scene, _this.camera );
    }
}

Вы можете скачать файлы json или .obj по ссылке, которую я дал выше.

Проблема в том, что если я попробую использовать .obj или .json, я получу только пустой серый холст. В консоли нет ошибок,поэтому я немного растерялся из-за того, что я делаю здесь неправильно. Я отобразил результат функции load () в консоли:

{detail: {…}}
    detail:
        instanceNo: 0
        loaderRootNode: Group
            castShadow: false
            children: []
            frustumCulled: true
            layers: Layers {mask: 1}
            matrix: Matrix4 {elements: Array(16)}
            matrixAutoUpdate: true
            matrixWorld: Matrix4 {elements: Array(16)}
            matrixWorldNeedsUpdate: false
            name: ""
            parent: Scene {uuid: "066CCCF6-B0DE-42FA-AA60-9679BFB688E3", name: "", type: "Scene", parent: null, children: Array(2), …}
            position: Vector3 {x: 0, y: 0, z: 0}
            quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1, onChangeCallback: ƒ}
            receiveShadow: false
            renderOrder: 0
            rotation: Euler {_x: 0, _y: 0, _z: 0, _order: "XYZ", onChangeCallback: ƒ}
            scale: Vector3 {x: 1, y: 1, z: 1}
            type: "Group"
            up: Vector3 {x: 0, y: 1, z: 0}
            userData: {}
            uuid: "C98D648A-6929-4EFA-AF62-7C27270F5D4E"
            visible: true
            id: 24
            modelViewMatrix: Matrix4 {elements: Array(16)}
            normalMatrix: Matrix3 {elements: Array(9)}
            __proto__: Object3D
        modelName: ""
        __proto__: Object
    __proto__: Object

Похоже, объект правильно прочитан для меня. Не стесняйтесьчтобы спросить, нужно ли вам что-нибудь еще, я не знаком с three.js или 3D в целом.

ОБНОВЛЕНИЕ:

• Stackblitz: https://stackblitz.com/edit/angular-qbjeep

Answer 1

 const loader = new THREE.OBJLoader2();
 const url = '3D/fox.json';
 loader.load(url, function(obj) {

Вы не можете загружать файлы JSON с OBJLoader2, который предназначен исключительно для OBJ файлов. Попробуйте вместо этого THREE.ObjectLoader .

three.js R104

Answer 2

Хорошо, я нашел несколько вещей.

Прежде всего, я прекратил использовать файлы GLTF и GLTFLoader, как рекомендовано. Затем я начал заново, используя этот пример: https://github.com/makimenko/angular-three-examples/blob/master/src/app/scene/scene.component.ts

Я действительно не знаю, пропустил ли я <canvas> вместо <div> в .html, но это может быть. Я использовал весь код по приведенной ссылке и изменил только одну часть:

private createScene() {
    this.scene = new THREE.Scene();
    const loader = new THREE.GLTFLoader();
    loader.load('3D/fox.gltf', this.onModelLoadingComplete);
}

Теперь работает отлично. Этот код использует больше опций для части рендеринга и использует AfterViewInit (я пытался сделать это в OnInit) и canvas, как я уже сказал. Это большие различия, которые я видел. Во всяком случае, это работает сейчас.