nartc
commented
2 years ago You should be using:
ng add @angular-three/schematics
to add Angular Three to your project. Then to add cannon, just run the generator:
ng g @angular-three/schematics:cannon
You don't need to install cannon-es yourself. This is to minimize the possible conflicts between libraries' versions.
Added cannon to project called ng3-cannon-template
npm i @angular-three/cannon@latest npm i cannon-es npm i -DE npx npm i -DE @angular-three/schematics npx ng generate @angular-three/schematics:cannon ng3-cannon-template
ng build results in the following error
Error: node_modules/cannon-es/dist/cannon-es.d.ts:359:36 - error TS2304: Cannot find name 'HTMLImageElement'.
359 setHeightsFromImage(image: HTMLImageElement, scale: Vec3): void;
Original project create using these commands ng new ng3-cannon-template cd ng3-cannon-template npm i @angular-three/core@latest npm install -E three@0.137 npm install -DE @types/three
resulting package.json { "name": "ng3-cannon-template", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular-three/cannon": "^4.3.0", "@angular-three/core": "^4.3.0", "@angular/animations": "~13.2.0", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", "cannon-es": "^0.19.0", "rxjs": "~7.5.0", "three": "0.137.5", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "~13.2.4", "@angular-three/schematics": "4.3.0", "@angular/cli": "~13.2.4", "@angular/compiler-cli": "~13.2.0", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", "@types/three": "0.137.0", "jasmine-core": "~4.0.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0", "npx": "10.2.2", "typescript": "~4.5.2" } }