整合Angular和X3D（渲染一个简单的盒子）

Question

我是一个完全的web开发新手，完全迷路了

我已经下载了 Angular 教程 (https://github.com/angular/quickstart) 中使用的 Angular 快速入门，现在我想插入一个简单的 x3d 元素。为此，我修改了文件 app.module.ts、app.component.ts 和 index.html.

修改后的文件app.module.ts为：

import { NgModule, NO_ERRORS_SCHEMA }      from '@angular/core';`
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  schemas:      [ NO_ERRORS_SCHEMA ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

我创建的新 app.component.ts 是：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<x3d width='600px' height='400px'> 
                <scene> 
                    <shape>     
                        <appearance> 
                            <material diffuseColor='1 0 0'></material>
                        </appearance>       
                        <box></box> 
                    </shape> 
                </scene> 
             </x3d>`,
})
export class AppComponent  { name = 'Angular'; }

最后，新的 index.html 看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script> 

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

当我运行 $ npm start 时，什么也没有显示，浏览器也没有出现任何错误，我不明白为什么。我正在使用 Angular 4。如果能帮助解决这个问题，我们将不胜感激。

Answer 1

问题是 X3D 在脚本加载时检查 x3d 元素并且因为您正在加载包含 x3d 元素的 Angular 组件, X3D 找不到你的元素。不幸的是，X3D 不提供这种方法来检查 DOM 中的（新）x3d 元素。

我看到您正在使用 Systemjs，您可以使用它轻松地在加载应用程序组件期间加载脚本。您将必须修改 Systemjs 的配置文件并在您的组件中添加导入语句以加载 X3D 库。最佳做法是从节点模块加载库。 $ npm install --save x3dom

Systemjs.config:

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      ...

      // other libraries
      ...
      // load x3d from node modules
      ,'x3dom': 'npm:x3dom/x3dom.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      ...
    }
  });
})(this);

要使用您的组件加载库，您可以将构造函数添加到组件的 class 并使用 Systemjs 调用 x3d 的导入语句。

App.component

import { Component } from '@angular/core';

// simple declaration to prevent the tscompiler from causing an compiling error
declare var System : any;

@Component({
  selector: 'my-app',
  template: `<x3d width='600px' height='400px'>
                <scene>
                    <shape>
                        <appearance>
                            <material diffuseColor='1 0 0'></material>
                        </appearance>
                        <box></box>
                    </shape>
                </scene>
             </x3d>`,
})
export class AppComponent  {
  name = 'Angular';
  constructor() {
    System.import('x3dom')
      .then(() => {
        console.log('loaded');
      })
      .catch((e: any) => {
        console.warn(e);
      })
  }
}

现在，每次您 bootstrap 您的应用程序时，Systemjs 都会尝试导入 x3dom 库。并且不要忘记在 index.html 中删除 x3dom 库的导入，库会检查 window.x3dom 是否已经存在。

整合Angular和X3D（渲染一个简单的盒子）

Integrate Angular and X3D (render a simple box)

angular

typescript

x3d