Webxr_vr_ballshooter.html example TS Typing Question

In an effort to add VR to a Three.js project in TS, I created a very minimalist conversion of the sample at https://github.com/mrdoob/three.js/blob/45418089bd5633e856384a8c0beefced87143334/examples/webxr_vr_ballshooter.html

It run using TypeScript however I do not understand the reason behind the use of a boolean in the line below (and TSC complains about it too):

let material:THREE.LineBasicMaterial = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );

TSC message is:
TS2345: Argument of type ‘{ vertexColors: boolean; blending: THREE.Blending; }’ is not assignable to parameter of type ‘LineBasicMaterialParameters’.
Types of property ‘vertexColors’ are incompatible.
Type ‘boolean’ is not assignable to type ‘Colors | undefined’.

Why the boolean assignment as in:
vertexColors: true instead of vertexColors: 0xffffff

Was it intentional or is it just a lazy style programming trick used in plain javascript?
Changing to vertexColors: 0xffffff makes the error go away of course but I am curious about the why :slight_smile:

Sorry, this was a small bug in the example. I’ve fixed it in dev, see

Notice that it’s not valid to assign a color value to this material property. Colors is an enum in TS. Valid values are THREE.NoColors, THREE.VertexColors and THREE.FaceColors.

Thanks for the reply.
Are there any VR examples in TypeScript?

Controller code in Javascript example breaks down when converted to TypeScript, i.e. inside that method: this.buildController is found but this.add is unknown

this.controller1.addEventListener( 'connected', (event:{data:string}) => {
    this.add(this.buildController(event.data)); //what exactly is the first this supposed to point to?

What exactly should the first “this” inside the arrow function point to?

No, we do only provide TypeScript declaration files in the repository. We do not code with it.

this refers to controller1 which is an instance of THREE.Group.

Awesome, your answer combined with logging ‘this’ via remote debugger helped, I got passed that road block :slight_smile:

It does not seem any of the examples show how to leverage Head Tracking, am I wrong?

Is it because there is no support for Head Tracking in ThreeJS yet, or just that there is no Head Tracking examples published yet?

Is there some XR/Controller related doc for ThreeJS, beyond the examples code?

Well, the camera is automatically adjusted based on the head tracking information when the session is presented.

Apart from the examples, there is a small guide that explains the basic building blocks of a VR scene.


Apart from that, it’s probably best to study the official XR standard and the WebXRManager class.

OK thanks I will dig into WebXRManager.
The reason head-tracking/orientation data are interesting beyond FOV adjustment is the fact that it can simultaneously be used as additional analog controller/inputs.
I will illustrate with an example: A snowboarder can greatly influence (in a soft natural way) his direction by turning his head an chest towards the direction he wants to go.
In a snowboarding game leveraging head-tracking data would improve play-ability and make the experience that much more immersive.

Thanks again for the answers!
And Congrats for the awesome work you guys do, ThreeJS is a real pleasure to work with, even more so in TypeScript.