typescript 集成Angular 和X3D(渲染一个简单的长方体)

hs1rzwqc 于 2023-01-18 发布在 TypeScript

关注(0)|答案(2)|浏览(158)

我是一个完全的新手在网络开发，我完全失去了。
我已经下载了Angular 教程中使用的Angular 快速入门（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。任何解决这个问题的帮助都将不胜感激，谢谢。

typescript

来源：https://stackoverflow.com/questions/44260121/integrate-angular-and-x3d-render-a-simple-box

2条答案

按热度按时间

9fkzdhlc1#

问题是X3D在脚本加载时检查x3d元素，因为您加载的是包含x3d元素的Angular组件，所以X3D找不到您的元素。不幸的是X3D没有提供这样的方法来检查DOM中的（新）x3d元素。
我看到您使用的是Systemjs，您可以在加载appcomponent的过程中使用它轻松地加载脚本。您必须修改Systemjs的配置文件并在组件中添加import语句以加载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是否已经存在。

赞(0）回复(0）举报 2023-01-18

ogq8wdun2#

旧线程，但将添加此为任何人在未来：
添加一个带有 *ngIf的父div似乎可以让编译器停止抱怨，我不知道为什么，但它就在那里。它甚至可以是 *ngIf=“true”。

<div *ngIf="true">
    <x3d>
        <scene>
            <box size='1 1 1'></box>
        </scene>
    </x3d>
 </div>

将x3dom的CDN添加到我的index.html并使用这个方法就是我需要做的全部事情。

赞(0）回复(0）举报 2023-01-18

我来回答

typescript 集成Angular 和X3D(渲染一个简单的长方体)

2条答案

相关问题

热门标签

最新问答