集成Angular和X3D(渲染一个简单的盒子) [英] Integrate Angular and X3D (render a simple box)
问题描述
我是Web开发方面的一名新手，我完全迷路了.
I am a complete newbie in web development, and I am completely lost.
我已经下载了Angular教程中使用的Angular快速入门( https://github.com/angular/quickstart)，现在我想插入一个简单的x3d元素.为此，我修改了文件 app.module.ts ， app.component.ts 和 index.html .
I have downloaded the Angular Quickstart used in the Angular tutorial (https://github.com/angular/quickstart) and now I want to insert a simple x3d element. To do so, I have modified the files app.module.ts, app.component.ts and 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 看起来像这样:
And finally, the new index.html looks like that:
<!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 时，什么都没有显示，并且浏览器没有出现任何错误，我也不知道为什么.我正在使用Angular4.感谢您对解决此问题的任何帮助.
When I run $ npm start, nothing is shown, and the browser does not raise any errors, and I cannot figure out why. I am using Angular 4. Any help to solve this issue would be appreciated, thanks.
推荐答案
问题是X3D在脚本加载时会检查 x3d 元素，因为您正在加载一个包含x3d元素的Angular组件，X3D找不到您的元素.不幸的是，X3D没有提供这种方法来检查DOM中的(新)x3d元素.
The problem is that X3D checks for x3d elements when the script loads and because you're loading an Angular component which holds the x3d element, X3D can not find your element. Unfortunately X3D does not provide such method to check the DOM for (new) x3d elements.
我看到您正在使用Systemjs，可以在加载应用程序组件时轻松地使用它来加载脚本.您将必须修改Systemjs的配置文件，并在组件中添加import语句以加载X3D库.最佳实践是从节点模块加载库. $ npm install-保存x3dom
I see that you're using Systemjs, you can use it easily load scripts during the load of your appcomponent. You will have to modify the configuration file for Systemjs and add an import statement in your component to load the X3D library. Best practice would be to load the library from the node modules. $ npm install --save x3dom
Systemjs.config:
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.
To load the library with your component you can add an constructor to the class of the component and call an importstatement for x3d using Systemjs.
App.component
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 是否已经存在.
Now everytime you bootstrap your app, Systemjs will try to import the x3dom library. And don't forget to remove the import of the x3dom library in your index.html, the library checks if window.x3dom already exists.
这篇关于集成Angular和X3D(渲染一个简单的盒子)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
