时间戳

首页 > 解决方案 > Three.js 和 Angular 6 不从 JSON 文件渲染对象

angular - Three.js 和 Angular 6 不从 JSON 文件渲染对象

问题描述

我第一次尝试在我的浏览器上渲染 3D 东西。以下是有关我的应用程序的一些信息：

我在 clara.io ( https://clara.io/view/1a03ac6b-d6b5-4c2d-9f1a-c80068311396 ) 上获得了一个 3D 模型并将其下载为 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。

更新 ：

标签： angularthree.js

解决方案

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

您无法加载OBJLoader2专门用于文件的 JSONOBJ文件。改用THREE.ObjectLoader试试。

three.js R104

推荐阅读