Usage OrbitControls in TypeScript on Playground

Questions
1

Hello,

I am trying to run official Getting Started Example on Playground Plunker with OrbitControls.

The first problem was that official OrbitControls is not friendly with TypeScript and I took: GitHub - nicolaspanel/three-orbitcontrols-ts: ThreeJS OrbitControls as a standalone and typescript compatible npm module

But this module does not use AMD by default and I recompiled it to AMD for usage with RequireJS library because I have a few files: Program.ts and Scene.ts and I can run my example on Playground only with AMD compilation. Recompilation requires going in node_modules folder for recompiling module - it is not a common way.

I created libs folder in my project and copied content of dist to libs/three-orbitcontrols-ts/ it works localy: GitHub - 8Observer8/usage-orbitcontrols-in-typescript-on-playground

I put all files in one directory for usage in Plunker and it works localy: GitHub - 8Observer8/usage-orbitcontrols-in-typescript-on-playground-one-directory

But when I upload the files on Plunker it does not work: Plunker - Usage OrbitControls in TypeScript on Playground

You will see the error in a console:

Scene.js:11 Uncaught TypeError: three_orbitcontrols_ts_1.OrbitControls is not a constructor

Please, help me to solve this problem.

2

Crossposting:

3

I made very simple example (just rewrite Getting Started Example) in TypeScript and Three.js. I hope it will be useful for someone. Check: https://plnkr.co/edit/yICv96E7lTK8xu7DohJB?p=preview

This example shows:

  • How to compile TS files to AMD modules and load them with Require.js
  • How to place your examples in Playground (https://plnkr.co/edit/)
  • And how to use OrbitControl with TS on Playground (It does not work now but I will solve it soon)

OrbitControl with TS works locally:


But it does not want to work on Playground.

P.S. I will be very glad if someone help me and explain me why OrbitControl works locally but does not work on Playground.