Используя three.js в Angular2

ProgramBox

Используя three.js в Angular2

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#angular #three.js #angular2-directives

#угловой #three.js #angular2-директивы

Вопрос:

Я пытаюсь интегрировать three.js сцена на угловой странице 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 } из ‘three-js / three’;

Это находится в том же пути к каталогу, что и ‘angular2 / core’

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

Ответ №1:

используете ли вы 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();

1. Похоже, что ссылка на документацию по установке библиотеки третьей стороны больше не работает. На самом деле я больше не могу найти никакой документации по этому поводу.

Ответ №2:

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

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

Ответ №3:

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

 import * as THREE from 'three';

Ответ №4:

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

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

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

Приветствия!

1. надеюсь, теперь вы можете прокомментировать @Bruno Di Guiseppe В том репозитории, на который вы ссылались, есть папка vender, где three.js файл живет. Является ли это обязательным или есть способ для three.js файл, который будет находиться внутри каталога node_modules в результате ссылки на «три»: «^ 0.80.1» в зависимостях package.json? Если да, то какой синтаксис для импорта? Я получаю сообщение «Не удается найти модуль ‘three'». когда я пытаюсь импортировать {THREE} из «three»; внутри одного из моих файлов службы для инъекций

2. Спасибо, Бен! Итак, насколько я понимаю «левый путь» Angular 2, вы можете создавать свои собственные библиотеки .js и создавать типизации для тех, которые будут использоваться в angular. Мне нужно было использовать библиотеку DeviceOrientationControl в моем проекте, и в ней не было определения типов. Поскольку в конечном итоге angular собирается скомпилировать TS в JS, в вас может быть включен файл .js index.html с помощью обычного тега <script> напишите свои собственные определения и сохраните их в папке typings.

3. Дайте мне немного времени, и я выложу это на Git, чтобы вы могли увидеть. Но в целом, определение TS (например, library.d.ts) похоже на файл метаданных DLL. Вы говорите компьютеру: «Эй, я буду использовать что-то, что имеет эти функции и параметры. Убедитесь, что вы не жалуетесь на то, что я их использую, хорошо? » Если он найдет эти определения, которые вы используете во время выполнения, все хорошо

Метки: Используя three.js в Angular2