Использование three.js в Angular2

Я пытаюсь интегрировать сцену three.js в страницу angular 2. Я новичок в Angular 2 и javascript, я включил файл three.js в тег script, в index.html, т.е. и в файле scene.component.ts у меня есть такой код...

//scene.component.ts
import { Component } from 'angular2/core';
import { THREE } from 'three-js/three';
@Component({
    selector: 'ps-scene',
    templateUrl: 'app/webgl/scene.component.html'
})
export class SceneComponent{
    scene = new THREE.Scene();
}
///////////////

Проблема проявляется в строке - import {THREE} from 'three-js/three';

Это тот же путь к каталогу, что и «angular2/core».

Заранее спасибо.


angular three.js angular2-directives
person rashmi    schedule 17.10.2016    source источник

Ответы (4)


arrow_upward
5
arrow_downward

вы используете angular cli?

если это так, не забудьте добавить ссылку в файл typings.d:

declare module 'three';

https://github.com/angular/angular-cli#3rd-party-library-installation

3rd Party Library Installation

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev
If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

// in src/typings.d.ts
declare module 'typeless-package';

// in src/app/app.component.ts
import * as typelessPackage from 'typeless-package';
typelessPackage.method();
person Benjamin McFerren    schedule 31.10.2016
comment
Кажется, что ссылка на документацию по установке сторонней библиотеки больше не работает. На самом деле я больше не могу найти документацию об этом. - person user2061057; 22.02.2017

arrow_upward
3
arrow_downward

Посмотрите эту ng2-three-demo, где я использую компоненты Angular для определения объектов для ThreeJS. .

Кроме того, в репозитории есть презентация по самой теме.

person amcdnl    schedule 20.01.2017
comment
Для меня ваше приложение было очень полезным, большое спасибо. Отличная работа! - person user2061057; 22.02.2017

arrow_upward
2
arrow_downward

Вероятно, его следует импортировать следующим образом:

import * as THREE from 'three';
person hex    schedule 24.11.2016

arrow_upward
1
arrow_downward

Я приступаю к особенностям Angular 2 по интеграции других библиотек в ваши собственные проекты, поэтому я предполагаю, что его нужно будет включить в вашу папку конфигурации system.js.

Что я действительно хочу вам показать, так это эту реализацию angular 2 + three.js, чтобы дать вам немного света на эту тему.

Я бы разместил это как комментарий, но у меня пока нет репутации, чтобы сделать это.

Ваше здоровье!

person Bruno Di Giuseppe    schedule 24.10.2016
comment
надеюсь, теперь вы можете прокомментировать @Bruno Di Guiseppe В том репозитории, на который вы ссылались, есть папка продавца, в которой находится файл three.js. Является ли это обязательным или есть способ, чтобы файл three.js находился внутри каталога node_modules в результате ссылки на three: ^0.80.1 в зависимостях package.json? Если да, то какой синтаксис для импорта? Я получаю Не удается найти модуль «три». когда я пытаюсь импортировать {THREE} из three; внутри одного из моих инъекционных служебных файлов - person Benjamin McFerren; 30.10.2016
comment
Спасибо Бен! Итак, насколько я понимаю левый путь Angular 2, вы можете создавать свои собственные библиотеки .js и делать типизацию для тех, которые будут использоваться в angular. Мне нужно было использовать библиотеку DeviceOrientationControl в моем проекте, и в ней не было определения типов. Поскольку в конце концов angular собирается скомпилировать TS в JS, вы можете включить файл .js в свой index.html с обычным тегом ‹script› и написать свои собственные определения и сохранить их в папке для типизации. - person Bruno Di Giuseppe; 04.11.2016
comment
Дайте мне немного времени, и я опубликую его на Git, чтобы вы могли его увидеть. Но в целом определение TS (например, library.d.ts) похоже на файл метаданных DLL. Вы говорите компьютеру: «Эй, я буду использовать что-то, что имеет эти функции и параметры». Убедитесь, что вы не жалуетесь на то, что я их использую, хорошо? Если он находит эти определения, которые вы используете во время выполнения, все в порядке. - person Bruno Di Giuseppe; 04.11.2016