Angular Threejs Collada

Question

我希望你能帮助我。我必须用 Angular4 和 THREEjs 实现一个 webapp 来查看 Collada 对象，但我完全失败了。

更新：我希望有人可以向我展示一个工作示例或给我一个提示。我已经在谷歌做了很多研究，并用其他加载器寻找代码。

这是相关组件的打字稿代码。

import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import { GlobalVarService} from '../global-var.service';
import * as THREE from 'three';
import {ColladaLoader} from 'three';

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.css'],
  providers: [ ]
})
/*

*/
export class GameComponent implements OnInit {

  @ViewChild('rendererContainer') rendererContainer: ElementRef;

  renderer = new THREE.WebGLRenderer();
  scene = null;
  camera = null;
  mesh = null;
  clock=null;

  constructor() {


    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
    this.camera.position.set( 8, 10, 8 );
    this.camera.lookAt( new THREE.Vector3( 0, 3, 0 ) );
    this.scene = new THREE.Scene();
    this.clock = new THREE.Clock();
    // loading manager
    var loadingManager = new THREE.LoadingManager( function() {
      this.scene.add( self );
    } );
    // collada
    var loader = new ColladaLoader( );//THREE.ColladaLoader() gives the same error
    /*loader.load( './models/collada/elf/elf.dae', function ( collada ) {
     // self = collada.scene;
    } );*/
    //
    var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
    this.scene.add( ambientLight );
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
    directionalLight.position.set( 1, 1, 0 ).normalize();
    this.scene.add( directionalLight );
    //
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    //

    //
    //window.addEventListener( 'resize', onWindowResize, false );




    this.mesh = new THREE.Mesh();


    this.scene.add(this.mesh);
  }
  ngOnInit() {
  }


  ngAfterViewInit() {
      this.renderer.setSize(600, 400);
      this.renderer.domElement.style.display = "block";
      this.renderer.domElement.style.margin = "auto";
      this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);

      this.animate();
  }

  animate() {
      window.requestAnimationFrame(() => this.animate());
      this.mesh.rotation.x += 0.01;
      this.mesh.rotation.y += 0.02;
      this.renderer.render(this.scene, this.camera);
  }
}

编译时收到此消息

./src/app/game/game.component.ts 中的警告 44:25-38 “在‘三’中找不到导出‘ColladaLoader’ webpack：编译时带有警告。

当我打开 Web 应用程序时：

错误 错误：[对象对象] 堆栈跟踪： 解决承诺@http://localhost:4200/polyfills.bundle.js:3198:31 解决承诺@http://localhost:4200/polyfills.bundle.js:3169:17 scheduleResolveOrReject/http://localhost:4200/polyfills.bundle.js:3246:17 ../../../../zone.js/dist/zone.js/http://localhost:4200 /polyfills.bundle.js:2839:17 onInvokeTask@http://localhost:4200/vendor.bundle.js:111709:24 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2838:17 ../../../../zone.js/dist/zone.js/http://localhost:4200/polyfills.bundle.js:2606:28 drainMicroTaskQueue@http://localhost:4200/polyfills.bundle.js:3010:25 核心.es5.js:1020 ReferenceError: 三个未定义

提前谢谢你。

Answer 1

THREE.ColladaLoader 不是three.js 库本身的一部分，它位于examples/js/loaders 文件夹中。 Currently it's not possible to include these as ES6 imports。您需要将ColladaLoader.js 复制到项目中的新文件中，然后向其中添加适当的导入和导出：

import * as THREE from 'three';

var ColladaLoader = function () { ... }

export ColladaLoader;

作为替代方案，如果为 CommonJS 配置了 WebPack（我假设您正在使用 WebPack？），则可以使用 CommonJS 导入。示例：

const THREE = require('three');
require('three/examples/js/loaders/ColladaLoader');