无法使用Three.js渲染3D图形 [英] Unable to Render 3D Graphic using Three.js

问题描述

问题:

为什么不显示3D图形?

Why isn't the 3D graphic rendering?

详细信息:

我正在尝试加载此 loading.component.ts文件中的图形.我正在使用Angular 2和Three.js.我看了几个例子，但找不到我做错了什么.这是我第一次尝试加载3D图像.任何帮助表示赞赏.整个项目可以在此处找到.

I am trying to load the json format of this graphic in the loading.component.ts file. I am using Angular 2 and Three.js. I've looked at several examples, but cannot find what I did wrong. This is my first time trying to load a 3D image. Any help appreciated. The entire project can be found here.

控制台错误:

core.es5.js:1084 ERROR TypeError: Cannot read property 'scene' of undefined
    at loading.component.ts:46
    at ObjectLoader.parse (three.module.js:33413)
    at three.module.js:33372
    at XMLHttpRequest.<anonymous> (three.module.js:29460)
    at ZoneDelegate.invokeTask (polyfills.bundle.js:3132)
    at Object.onInvokeTask (core.es5.js:4119)
    at ZoneDelegate.invokeTask (polyfills.bundle.js:3131)
    at Zone.runTask (polyfills.bundle.js:2899)
    at XMLHttpRequest.ZoneTask.invoke (polyfills.bundle.js:3194)

loading.component.ts

import { Component, OnInit } from '@angular/core';
import * as THREE from 'three'
declare var require: any;

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.css']
})
export class LoadingComponent implements OnInit {
  "use strict";

  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer();
  light = new THREE.AmbientLight(0xffffff);
  camera;
  box;
  renderCallback;

  constructor() { }

  ngOnInit() {
    // size of content 
    this.renderer.setSize( window.innerWidth, window.innerHeight);
    // where to render content 
    document.getElementById("webgl-container").appendChild(this.renderer.domElement);

    this.scene.add(this.light);

    this.camera = new THREE.PerspectiveCamera(
      35, // Field of view (FOV) from top to bottom. 
      window.innerWidth / window.innerHeight, // boundries of image 
      1, 
      1000
    );

    this.camera.position.set(0, 0, 5);
    this.scene.add(this.camera);

    var loader = new THREE.ObjectLoader();

    loader.load('assets/img/pac-man-threejs/pac-man.json', function (obj) {
      this.scene.add(obj);
    })

    // this.render();
    this.renderCallback = {
      callRender: (this.render).bind(this)
    };
    this.renderCallback.callRender();
  }

  render() { 
    this.renderer.render(this.scene, this.camera);
    // requestAnimationFrame(this.render);
    requestAnimationFrame(this.renderCallback.callRender);
  }
}

推荐答案

在 loader.load()回调中没有正确的 this 正是浏览器告诉您的内容.

You don't have the correct this inside the loader.load() callback, which is exactly what the browser is telling you.

var _this = this
loader.load(..., function(obj){ _this.scene.add(obj })

或绑定它.

这篇关于无法使用Three.js渲染3D图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！