Webxr_vr_ballshooter.html example TS Typing Question

Questions
,
#1

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:

#2

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.

#3

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?

#4

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.

#5

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?

#6

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.

https://threejs.org/docs/index.html#manual/en/introduction/How-to-create-VR-content

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

#7

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.