Using VR in r110 or Angular 8 + r112 not working

Questions
,
1

Hey Im on a VR project. I had to downgrade threejs to r110 due to incompatibility with angular. I reverted the XR stuff to VR and uncommented most of my VR code.

On localhost everything is fine, but on my server, it is crashing (only with VR code). There is no error, but the camera is doing weird stuff. Not really explainable. You can watch it here I feel like VR is not waiting till the “Enter VR” button is clicked. Its fighting over the camera control. In the last two releases a lot of VR changes happened and the documentation was adjusted.

This is what Im doing right now:

renderer.vr.enabled = true

let vrBtn = WEBVR.createButton(this.sceneSetup.renderer)
vrBtn.id = 'vr-button'
vrBtn.style.left = '15px'

this.container.appendChild( vrBtn )

I guess im not sure how VR in r110 works exactly.
I was looking through the code of WebVRManager, but I didnt know how to use it.
Couldnt find a r110 example with vr on the netweb. Does anybody know a example or knows how its done?

2

Maybe this link helps: three.js examples

Keep in mind that WebVRManager targets the WebVR API. AFAIK, this API will be removed with the next Chrome update (80).

3

Thanks, Im open minded for any alternative. Typescript 3.7 is not supported on Angular’s latest release. And ThreeJsm r112 needs tsc 3.7. How can I use Ng with ThreeJS before chrome removes the API?

4

It seems there are user who use Angular with higher TS versions. Can’t you do the same?

5

I updated to angular 9.0.0-rc.9 now getting different tsc errors

Failed to compile.

node_modules/typescript/lib/lib.dom.d.ts:16482:11 - error TS2430: Interface ‘WebGL2RenderingContext’ incorrectly extends interface ‘WebGL2RenderingContextBase’.
Types of property ‘clearBufferfv’ are incompatible.
Type ‘(buffer: number, drawbuffer: number, values: ArrayLike | Float32Array, srcOffset?: number) => void’ is not assignable to type ‘{ (buffer: number, drawbuffer: number, values: Float32List, srcOffset?: number): void; (buffer: number, drawbuffer: number, values: Iterable, srcOffset?: number): void; }’.
Types of parameters ‘values’ and ‘values’ are incompatible.
Type ‘Iterable’ is not assignable to type ‘ArrayLike | Float32Array’.
Type ‘Iterable’ is missing the following properties from type ‘Float32Array’: BYTES_PER_ELEMENT, buffer, byteLength, byteOffset, and 25 more.

16482 interface WebGL2RenderingContext extends WebGL2RenderingContextBase, WebGL2RenderingContextOverloads, WebGLRenderingContextBase {
~~~~~~~~~~~~~~~~~~~~~~
node_modules/typescript/lib/lib.dom.d.ts:16482:11 - error TS2430: Interface ‘WebGL2RenderingContext’ incorrectly extends interface ‘WebGL2RenderingContextOverloads’.
Types of property ‘uniform1fv’ are incompatible.
Type ‘(location: WebGLUniformLocation, data: ArrayLike | Float32Array, srcOffset?: number, srcLength?: number) => void’ is not assignable to type ‘{ (location: WebGLUniformLocation, data: Float32List, srcOffset?: number, srcLength?: number): void; (location: WebGLUniformLocation, data: Iterable<…>, srcOffset?: number, srcLength?: number): void; }’.
Types of parameters ‘data’ and ‘data’ are incompatible.
Type ‘Iterable’ is not assignable to type ‘ArrayLike | Float32Array’.
Type ‘Iterable’ is not assignable to type ‘Float32Array’.

I added this to the polyfills:

// @ts-ignore
window.__importDefault = function(mod) {
  return mod && mod.__esModule ? mod : { default: mod };
};

and to tsconfig.json

  "angularCompilerOptions": {
    "disableTypeScriptVersionCheck": true
  },
6

What TS version are you using now?

7

I tried every tsc version from 3.7.1 to 3.7.4

{
“name”: “”,
“version”: “1.0.0”,
“license”: “MIT”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
“@angular/animations”: “^9.0.0-rc.9”,
“@angular/common”: “^9.0.0-rc.9”,
“@angular/compiler”: “^9.0.0-rc.9”,
“@angular/core”: “^9.0.0-rc.9”,
“@angular/forms”: “^9.0.0-rc.9”,
“@angular/http”: “^7.0.0”,
“@angular/platform-browser”: “^9.0.0-rc.9”,
“@angular/platform-browser-dynamic”: “^9.0.0-rc.9”,
“@angular/router”: “^9.0.0-rc.9”,
“@tweenjs/tween.js”: “^17.2.0”,
“@types/three”: “^0.92.20”,
“autopulous-angular2-soap”: “^0.4.7”,
“classlist.js”: “^1.1.20150312”,
“core-js”: “^2.4.1”,
“csg”: “^1.0.1”,
“dat.gui”: “^0.7.5”,
“es6-tween”: “^5.3.0”,
“n”: “^2.1.12”,
“ng-drag-drop”: “^5.0.0”,
“ngx-color”: “^4.1.0”,
“ngx-color-picker”: “^6.7.0”,
“normalize.css”: “^5.0.0”,
“postprocessing”: “^5.3.1”,
“rxjs”: “^6.5.4”,
“stats-js”: “^1.0.0”,
“three”: “^0.112.1”,
“three-addons”: “^1.2.0”,
“three-js-csg”: “^72.0.0”,
“three-orbitcontrols-ts”: “^0.1.2”,
“tslib”: “^1.10.0”,
“tween.js”: “^16.6.0”,
“web-animations-js”: “^2.3.2”,
“zone.js”: “~0.10.2”
},
“devDependencies”: {
“@angular-devkit/build-angular”: “~0.900.0-rc.9”,
“@angular/cli”: “^9.0.0-rc.9”,
“@angular/compiler-cli”: “^9.0.0-rc.9”,
“@angular/language-service”: “^9.0.0-rc.9”,
“@types/jasmine”: “~2.5.53”,
“@types/jasminewd2”: “~2.0.2”,
“@types/node”: “^12.11.1”,
“@types/offscreencanvas”: “^2019.6.1”,
“codelyzer”: “^5.1.2”,
“jasmine-core”: “~2.6.2”,
“jasmine-spec-reporter”: “~4.1.0”,
“karma”: “~1.7.0”,
“karma-chrome-launcher”: “~2.1.1”,
“karma-cli”: “~1.0.1”,
“karma-coverage-istanbul-reporter”: “^1.2.1”,
“karma-jasmine”: “~1.1.0”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “^5.4.1”,
“ts-node”: “~3.2.0”,
“tslint”: “~5.7.0”,
“typescript”: “^3.7.4”
}
}

8

Sorry, I don’t know why this happens. three.js has currently ^3.7.4 defined in its package.json and linting with tsc works without issues. I hope a more experience TS user can have a look at this topic.

1 Like
9

Ill just leave that here. Still looking for a solution tho. https://github.com/angular/angular-cli/issues/16071