Я не могу получить этот пример использования вышеупомянутого комбо в 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 падает, когда я нажимаю на нее :). Спасибо за вашу помощь.
Чувство своего рода глупое, так как решение (или, по крайней мере, обходное решение) оказывается довольно простым...
Просто объявите переменную OrbitControls:
declare var THREE.OrbitControls: any; // even "declare var THREE.OrbitControls;" will do the trick
Есть еще некоторые ошибки компиляции, но это работает.
После нескольких часов, потраченных на эту проблему, я создал новый пакет: three-orbitcontrols-ts
import * as THREE from 'three';
import { OrbitControls } from 'three-orbitcontrols-ts';
const controls = new OrbitControls(camera, renderer.domElement);
Импорт OrbitControls непосредственно из исходного файла после импорта THREE работал отлично для меня (без использования пакета three-orbitcontrols-ts):
import * as THREE from 'three';
import 'three/examples/js/controls/OrbitControls';
Использование только three и @types/three пакетов
Хотя предыдущие ответы могут в какой-то степени работать, вы должны пойти с готовыми файлами определений от DefinitelyTyped. Они также определяют свойства и методы OrbitControl.
К сожалению, ни один из приведенных выше ответов не решил проблему для меня. Я нашел решение, не устанавливая сторонние пакеты, создав файл three.js с содержанием ниже:
import * as THREE from 'three';
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls');
export default THREE;
а затем import THREE from './three';
Я пробовал некоторые из предлагаемых решений и не мог заставить его работать правильно, поэтому после некоторых экспериментов я закончил:
import * as THREE from 'three';
import OrbitControlsLibrary = require('three-orbit-controls');
var OrbitControls = OrbitControlsLibrary(THREE);
...
this.controls = new OrbitControls(this.camera);
Я использую пакет для вебпаков, и с этим мне не нужно было добавлять тег скрипта в шаблон HTML.
Ответ не работал для меня в машинописном тексте eclipse, поскольку он ранее противоречил эталонному заявлению. Но следующие работы:
declare module THREE {export var OrbitControls}
После добавления трехбайтовых элементов управления и три-орбитального пакета 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 используется старый стиль экспорта, для которого требуется заявка на выполнение старого стиля, которая проходит в трех библиотеках.
вне ts:
var THREEa = THREE;
внутри ts:
var controls = new THREEa.OrbitControls(pCamera, pContainer);
Я ничего не смог получить отсюда, эта должность действительно работала и казалась последовательной или имела достаточно деталей, чтобы действовать. Надеюсь, этот ответ может дать некоторое представление другим.
В моих объектах у меня уже было три работы с использованием титров для извлечения файла 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"/> который не работает, потому что в этом контексте он не может найти "три". Как только я работал над этим, он скомпилирован, но он создал нерабочий код.
Мне также не повезло в реализации предложенных решений, поскольку ни одно из них не порадовало компилятор машинописи. Не удалось перезаписать THREE.OrbitControls во время компиляции, поскольку он был установлен только для чтения. Мое решение было следующим:
Установите оба элемента управления "Three" и "Three-Orbit-Control" с помощью npm. (Это довольно глупо, но необходимо, поскольку "три" уже содержит весь код элементов управления орбитой в файле examples/js/controls/OrbitControl.js, но не экспортирует его так, как это понимает машинопись. Если вы этого не сделаете Если вы хотите возиться с вашими сторонними библиотеками, просто установите "три-орбитальные элементы управления" вместе с "тремя", которые содержат дубликат кода, но экспортируют его приятным способом.
Теперь используйте это как ниже:
импорт * как тройка из "три";
импортировать * как OrbitControlsFunction из "трех-орбитальных элементов управления";
const OrbitControls = OrbitControlsFunction (THREE); //OrbitControls теперь ваш конструктор
элементы управления const: THREE.OrbitControls = new OrbitControls (камера, элемент); // Код, как вы бы с этого момента.
Решение этой проблемы. Просто установите 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.
Как описано в документации, сделайте следующее:
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
Важно то, что вы используете папку jsm вместо js. И имейте в виду, что еще не все модули доступны в папке jsm