Missing types when importing three.js for Ionic?

Questions
1

Hi all - I’m fairly new to three.js and to Ionic as well, so I’m hoping someone can help me with this issue. If you see the console log below - I installed three via npm, and @types/three as well. No matter what I do however, it gives me this error that it can’t find the VRDisplay. I’ve gone through a number of examples but can’t find what I’m doing wrong. Any ideas?

I think this post is addressing the same issue, but I’m not sure how to specifically resolve the issue in the d.ts.

threeJSionic

2

@Josh Do you know what to do in order to resolve @mitevpi’s issue?

3

Ended up finding a workable solution, so thought I’d post here. Please see the image below for anyone else having this problem:

threejstypes

1 Like
4

I think VRControls is deprecated in favor of the new renderer.vr.enabled and renderer.vr.getController …right? But in either case, VRDisplay is a class in the google webvr package. Assuming you’re using webvr.js, there’s a type definition file for that linked below. Create a triple-slash reference path to this and typescript should understand display:VRDisplay in the older three.d.ts file you’re using.

1 Like
5

Thanks for that response. Just a couple of questions:

  1. In which file should I add the triple slash reference to the linked index.d.ts?
  2. Will this reference work when deploying/building on platforms like Ionic Pro or Heroku? Currently getting the same build error when deploying to Ionic Pro, even though the files work locally since I made the change manually inside node_modules.
6

Yep, VRControls is deprecated since a while now. Please use renderer.vr.getController() instead.

1 Like
7

That’s good to know. The problem is that when using typescript (I’m working with Ionic), it is automatically checking for that deprecated class. So before usage is even in question, it fails to build because it can’t find VRControls members.

8

I typically add this it at the top of my main application typescript file… here’s what my boilerplate looks like (my app.ts sits in a directory on the same level as com/ where I keep other scripts).

///<reference path='../com/jquery.d.ts' />
///<reference path='../com/webvr.d.ts' />
///<reference path='../com/three.d.ts' />

I can’t help with Ionic or Heroku specific issues since I haven’t used those frameworks. I write Typescript in Eclipse and I’ve found the IDE is a bit finnicky sometimes in picking up the definition files, but you should only need to reference them once per project (not once per document). Failing all else, you should be able to paste the webvr.d.ts interfaces into the three.d.ts file outside the THREE module.

Additionally, check that you are using the latest three.d.ts file. It doesn’t look like it.