Использование Threejs + OrbitContols в TypeScript

Я не могу получить этот пример использования вышеупомянутого комбо в TypeScript.

У меня есть <script src="lib/three.min.js"></script> и <script src="lib/OrbitControls.js"></script> в моем html <head> и файле машинописного текста в <body>:

/// <reference path="lib\three.d.ts" />
...
this.controls = new THREE.OrbitControls(this.camera); //there the error
this.controls.addEventListener('change', this.render);
...

а также

this.controls.update();

в периодически называемой функцией render(). Насколько мне известно, настройка идентична расширению, но дает мне огромную ошибку (сокращенно) при компиляции строки конструктора OrbitControls:

The property 'OrbitControls' does not exist on value of type '{REVISION:string;   
CullFace: {[x: number ...

Я предполагаю, что в этой ошибке есть все трижды, так как Visual Studio падает, когда я нажимаю на нее :). Спасибо за вашу помощь.

ОТВЕТЫ

Ответ 1

Чувство своего рода глупое, так как решение (или, по крайней мере, обходное решение) оказывается довольно простым...

Просто объявите переменную OrbitControls:

declare var THREE.OrbitControls: any; // even "declare var THREE.OrbitControls;" will do the trick

Есть еще некоторые ошибки компиляции, но это работает.

Ответ 2

После нескольких часов, потраченных на эту проблему, я создал новый пакет: three-orbitcontrols-ts

import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';

const controls = new OrbitControls(camera, renderer.domElement);

Ответ 3

Импорт OrbitControls непосредственно из исходного файла после импорта THREE работал отлично для меня (без использования пакета three-orbitcontrols-ts):

import * as THREE from 'three';
import 'three/examples/js/controls/OrbitControls';

Использование только three и @types/three пакетов

Ответ 4

Хотя предыдущие ответы могут в какой-то степени работать, вы должны пойти с готовыми файлами определений от DefinitelyTyped. Они также определяют свойства и методы OrbitControl.

Ответ 5

К сожалению, ни один из приведенных выше ответов не решил проблему для меня. Я нашел решение, не устанавливая сторонние пакеты, создав файл three.js с содержанием ниже:

import * as THREE from 'three';
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls');

export default THREE;

а затем import THREE from './three';

Ответ 6

Я пробовал некоторые из предлагаемых решений и не мог заставить его работать правильно, поэтому после некоторых экспериментов я закончил:

import * as THREE from 'three';
import OrbitControlsLibrary = require('three-orbit-controls');
var OrbitControls = OrbitControlsLibrary(THREE);
...
this.controls = new OrbitControls(this.camera);

Я использую пакет для вебпаков, и с этим мне не нужно было добавлять тег скрипта в шаблон HTML.

Ответ 7

Ответ не работал для меня в машинописном тексте eclipse, поскольку он ранее противоречил эталонному заявлению. Но следующие работы:

declare module THREE {export var OrbitControls}

Ответ 8

После добавления трехбайтовых элементов управления и три-орбитального пакета npm (почему они не такие же?), У меня все еще возникали проблемы с его работой в TypScript. Это закончилось тем, что работало для меня, если оно полезно для всех, кто не хочет использовать обходной путь:

import * as three from 'three';
three.OrbitControls = require('three-orbit-controls')(three);

let camera = new three.PerspectiveCamera(75, aspectRatio, 1, 1000);
let renderer = new three.WebGLRenderer();
let controls = new three.OrbitControls(camera, renderer.domElement);

На сегодняшний день кажется, что в пакете npm OrbitControls используется старый стиль экспорта, для которого требуется заявка на выполнение старого стиля, которая проходит в трех библиотеках.

Ответ 9

вне ts:

var THREEa = THREE;

внутри ts:

var controls = new THREEa.OrbitControls(pCamera, pContainer);

Ответ 10

Я ничего не смог получить отсюда, эта должность действительно работала и казалась последовательной или имела достаточно деталей, чтобы действовать. Надеюсь, этот ответ может дать некоторое представление другим.

В моих объектах у меня уже было три работы с использованием титров для извлечения файла THREE. Это было очень разумно и поместил файл ts в typings/globals/three.

Вот шаги, предполагающие, что вы загрузили и установили node.js. Это также устанавливает npm (Node Project Manager), который вы можете запустить из командной строки, чтобы все приведенные ниже шаги.

npm install typings --global
typings install dt~three --global --save

На этом этапе все базовые типы THREE доступны, как только я включу "файл ts в свой объект:

/// <reference path="typings/globals/three/index.d.ts" />

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

typings install --globals three-orbitcontrols --save

Здесь помещается файл ts:

node_modules\three-orbitcontrols-ts\dist\index.d.ts

Я попробовал несколько вещей, чтобы заставить его работать, но я чего-то не хватает. Как правило, ошибка заключалась в том, что THREE.OrbitControls не был определен. Если я удалил THREE, тогда он создал неработающий JavaScript.

Что я, наконец, сделал, что я рассматриваю обходной путь, это edit typings/globals/three/index.d.ts, а также вырезать и вставлять содержимое титров /globals/three/OrbitControls/index.d.ts в пространство имен THREE в конце.

В верхней части OrbitControls/index.d.ts он вызывает <reference types="three"/> который не работает, потому что в этом контексте он не может найти "три". Как только я работал над этим, он скомпилирован, но он создал нерабочий код.

Ответ 11

Мне также не повезло в реализации предложенных решений, поскольку ни одно из них не порадовало компилятор машинописи. Не удалось перезаписать THREE.OrbitControls во время компиляции, поскольку он был установлен только для чтения. Мое решение было следующим:

Установите оба элемента управления "Three" и "Three-Orbit-Control" с помощью npm. (Это довольно глупо, но необходимо, поскольку "три" уже содержит весь код элементов управления орбитой в файле examples/js/controls/OrbitControl.js, но не экспортирует его так, как это понимает машинопись. Если вы этого не сделаете Если вы хотите возиться с вашими сторонними библиотеками, просто установите "три-орбитальные элементы управления" вместе с "тремя", которые содержат дубликат кода, но экспортируют его приятным способом.

Теперь используйте это как ниже:

импорт * как тройка из "три";
импортировать * как OrbitControlsFunction из "трех-орбитальных элементов управления";
const OrbitControls = OrbitControlsFunction (THREE); //OrbitControls теперь ваш конструктор
элементы управления const: THREE.OrbitControls = new OrbitControls (камера, элемент); // Код, как вы бы с этого момента.

Ответ 12

Решение этой проблемы. Просто установите three-full и @types/three и добавьте определения типов в "compilerOptions" в tsconfig.json.

  "compilerOptions": {
    /* ... */
    "baseUrl": ".",        // needed to use path aliases!
    "paths": {
      "three-full": ["node_modules/@types/three"]
  }
}

Затем импортировать три, как

import * as THREE from 'three-full';

После этого все работает нормально, включая intellisense.

Без @types/three 'это все еще работает, но вы не получите intellisense.

Ответ 13

Как описано в документации, сделайте следующее:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

Важно то, что вы используете папку jsm вместо js. И имейте в виду, что еще не все модули доступны в папке jsm