集成Angular和X3D（渲染一個簡單的框）

我是一個完整的web開發新手，我完全失去了。集成Angular和X3D（渲染一個簡單的框）

我已經下載了Angular教程中使用的Angular Quickstart（https://github.com/angular/quickstart），現在我想插入一個簡單的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.任何幫助解決這個問題，將不勝感激，謝謝。

來源

2017-05-30 GLR

要允許Angular呈現模塊中不存在的元素，您必須傳遞架構以允許自定義元素。從'@ angular/core'導入'CUSTOM_ELEMENTS_SCHEMA'並將其添加到您的Angular模塊的模式數組中。並嘗試在Angular運行之前加載x3d。 –

我試過導入'CUSTOM_ELEMENTS_SCHEMA'，但這樣做會導致瀏覽器引發很多錯誤（它會抱怨未知元素引用'x3d'，'material'，'appearance' ......）。這就是爲什麼我導入了'NO_ERRORS_SCHEMA'。 – GLR

對不起，我是一個完整的web開發新手。如何讓瀏覽器在運行Angular應用程序之前加載x3d？正如你所建議的那樣，我懷疑這是問題所在。 – GLR

的問題是x3d元素是X3D檢查時，腳本加載因爲你加載持有的X3D元素的角度成分，X3D找不到你的元素。不幸的是，X3D不提供這種方法來檢查（新）x3d元素的DOM。

我看到您正在使用Systemjs，您可以在加載appcomponent時輕鬆地使用它加載腳本。您將不得不修改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);

加載隨你的組件庫，你可以在構造函數添加到類的組件，並呼籲使用Systemjs了X3D的importstatement。

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

現在每次你引導你的應用程序，Systemjs將嘗試導入x3dom庫。不要忘記刪除index.html中的x3dom庫的導入，庫會檢查window.x3dom是否已存在。

來源

2017-05-30 12:13:00

非常感謝，現在它完美的運作。 – GLR

我發現了一個新問題。當我有一個像上面描述的通過Angular路由訪問的組件'A'時，第一次訪問'A'時，X3D被適當渲染。但是，第二次訪問'A'時，X3D不會呈現，除非我刷新網站（按F5）。我認爲這是由於x3d.js被緩存或類似的事實。你有什麼想法嗎？我是否應該更詳細地描述一個新問題來描述問題？謝謝你，對我的無知感到抱歉。 – GLR

不，問題在於你沒有實際路由，而是爲期望路由的元素加載新的innerhtml。因此對X3D庫的引用仍然有效。您必須通過刪除庫並重新導入庫來重新加載腳本。我認爲''window.x3dom = undefined;'在導入前最簡單，但這不是一個好習慣。在我看來，X3D團隊的一個糟糕的設計是不執行這種重新初始化所有x3d元素庫的方法。 –

集成Angular和X3D（渲染一個簡單的框）

回答

相關問題