Angle Threejs Collada

Posted 2021-05-02

我希望你能帮助我。我必须实现一个带有Angular 4和三个js的Web应用程序来查看Collada Objects，但我完全失败了。

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

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

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中找到：编译时带有警告。

当我打开Webapp时：

错误错误：[对象]堆栈跟踪：resolvePromise @ http://localhost:4200/polyfills.bundle.js:3198:31 resolvePromise @ 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 core.es5.js：1020 ReferenceError ：三个没有定义

先感谢您。

答案

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');