search

codaline-io / angular-stl-model-viewer

Angular component for rendering an STL model
MIT License
35 stars 13 forks source link

Offset is outside the bounds of dataview #444

Closed tekilla667 closed 3 years ago

tekilla667 commented 3 years ago

Hey guys, so I followed the installation steps and I can't display the stl model. Here is the error Im getting

image

Im using angular 9 and asp.net core 3

Here is the code snippet:

<div class="fillscreen">
    <p>store-product-details works!</p>

</div>

<stl-model-viewer [stlModelFiles] = '["./standing.stl"]'></stl-model-viewer>

The stl file looks fine when I drag and drop it in the https://threejs.org/editor/ view. Any suggestions on what am I doing wrong? Please consider me a begginer when it comes to my IT skills

KillerCodeMonkey commented 3 years ago

Strange nur The Error is coming drin threejs stlloader.

Could you try Out another stl? Maybe one of the stls in The example Here in The repo?

Am 10.02.2021 in 18:06, tekilla667 notifications@github.com schrieb:

Hey guys, so I followed the installation steps and I can't display the stl model. Here is the error Im getting

[image: image] https://user-images.githubusercontent.com/58048159/107544173-3e6f9d00-6bca-11eb-8702-ec153d515034.png

Im using angular 9 and asp.net core 3

Here is the code snippet:

store-product-details works!

<stl-model-viewer [stlModelFiles] = '["./standing.stl"]'>

The stl file looks fine when I drag and drop it in the https://threejs.org/editor/ view. Any suggestions on what am I doing wrong? Please consider me a begginer when it comes to my IT skills

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/codaline-io/angular-stl-model-viewer/issues/444, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YFURFVDBYMTFGE5PNDS6K4KPANCNFSM4XNKGGWQ .

tekilla667 commented 3 years ago

Thanks for fast response! I just downloaded the peter.stl and still get the same error

<div class="fillscreen">
    <p>store-product-details works!</p>
    <stl-model-viewer [stlModelFiles] = '["./peter.stl"]'></stl-model-viewer>
</div>

image

KillerCodeMonkey commented 3 years ago

Thats Strange because it IS working in our live Demo (ITs The example Project)

Am 10.02.2021 in 18:22, tekilla667 notifications@github.com schrieb:

Thanks for fast response! I just downloaded the peter.stl and still get the same error

store-product-details works!

[image: image] https://user-images.githubusercontent.com/58048159/107546590-d3739580-6bcc-11eb-8a92-9de69b225fb0.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/codaline-io/angular-stl-model-viewer/issues/444#issuecomment-776876454, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YFWUMQAJ5SVKWMY3HLS6K6EVANCNFSM4XNKGGWQ .

tekilla667 commented 3 years ago

Whenever I do ng serve I also get this message before everything compiles

Warning: Entry point 'angular-stl-model-viewer' contains deep imports into 'C:/Inzynierka/frontend/client/node_modules/three/examples/jsm/loaders/STLLoader', 'C:/Inzynierka/frontend/client/node_modules/three/examples/jsm/controls/OrbitControls'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

KillerCodeMonkey commented 3 years ago

That should Not be a Problem. Ah you are using angular 9. I think we Just Support 10 and 11.

You could Check The package.json If your installed packages are matching

Am 10.02.2021 in 18:32, tekilla667 notifications@github.com schrieb:

Whenever I do ng serve I also get this message before everything compiles

Warning: Entry point 'angular-stl-model-viewer' contains deep imports into 'C:/Inzynierka/frontend/client/node_modules/three/examples/jsm/loaders/STLLoader', 'C:/Inzynierka/frontend/client/node_modules/three/examples/jsm/controls/OrbitControls'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/codaline-io/angular-stl-model-viewer/issues/444#issuecomment-776883437, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YDOS3KWIVSEPLGYFTTS6K7MHANCNFSM4XNKGGWQ .

tekilla667 commented 3 years ago

Is it the cause of the problem? here is my package.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.12",
    "@angular/common": "~9.1.12",
    "@angular/compiler": "~9.1.12",
    "@angular/core": "~9.1.12",
    "@angular/forms": "~9.1.12",
    "@angular/platform-browser": "~9.1.12",
    "@angular/platform-browser-dynamic": "~9.1.12",
    "@angular/router": "~9.1.12",
    "angular-stl-model-viewer": "^3.2.0",
    "angular-toastr": "^2.1.1",
    "bootstrap": "4.1.1",
    "font-awesome": "^4.7.0",
    "ngx-bootstrap": "^6.2.0",
    "ngx-toastr": "^13.2.0",
    "rxjs": "~6.5.4",
    "three": "^0.125.2",
    "tslib": "^1.10.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.12",
    "@angular/cli": "~9.1.12",
    "@angular/compiler-cli": "~9.1.12",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

Sorry for digging so deeply into it, I really would love to see stl model in my app. I don't know how to tell if the packages are matching. Thanks in advance!

KillerCodeMonkey commented 3 years ago

everything with angular is on v9, but we are supporting only v10 and 11

So i would just follow https://update.angular.io/?v=9.0-10.2 in the first step. And then try it again.

tekilla667 commented 3 years ago

So I just followed these steps, updated angular to 10 successfuly, then I did again the stl model instalation process ( I ran both yarn add angular-stl-model-viewer npm install angular-stl-model-viewer) but when I try to do ng serve I get this:

`ERROR in The target entry-point "angular-stl-model-viewer" has missing dependencies:
 - three
 - three/examples/jsm/loaders/STLLoader
 - three/examples/jsm/controls/OrbitControls

** Angular Live Development Server is listening on localhost:4200, open your browser on https://localhost:4200/ **

Date: 2021-02-11T12:25:07.606Z - Hash: fe91fcf718d662e6ecb8
5 unchanged chunks

Time: 510ms

ERROR in The target entry-point "angular-stl-model-viewer" has missing dependencies:
 - three
 - three/examples/jsm/loaders/STLLoader
 - three/examples/jsm/controls/OrbitControls

    ERROR in node_modules/angular-stl-model-viewer/lib/angular-stl-model-viewer.component.d.ts:2:24 - error TS2307: Cannot find module 'three' or its corresponding type declarations.

    2 import * as THREE from 'three';
                             ~~~~~~~
    node_modules/angular-stl-model-viewer/lib/angular-stl-model-viewer.component.d.ts:3:27 - error TS2307: Cannot find module 'three/examples/jsm/loaders/STLLoader' or its corresponding type declarations.

    3 import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

Here is my package.json if its needed

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.4",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "angular-stl-model-viewer": "^3.2.0",
    "angular-toastr": "^2.1.1",
    "bootstrap": "4.1.1",
    "font-awesome": "^4.7.0",
    "ngx-bootstrap": "^6.2.0",
    "ngx-toastr": "^13.2.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.2",
    "@angular/cli": "~10.2.2",
    "@angular/compiler-cli": "~10.2.4",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.7"
  }
}
KillerCodeMonkey commented 3 years ago

you need to add threejs to your dependencies. check your old package.json ,there you have threejs in there. in your new one it is missing ;-)

tekilla667 commented 3 years ago

I just added "three": "^0.125.2", to the package.json but its still not working. However, the error message got smaller. Now it's just 

ERROR in The target entry-point "angular-stl-model-viewer" has missing dependencies:
 - three
 - three/examples/jsm/loaders/STLLoader
 - three/examples/jsm/controls/OrbitControls

Updated package.json

{
  "name": "client",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.4",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "angular-stl-model-viewer": "^3.2.0",
    "angular-toastr": "^2.1.1",
    "bootstrap": "4.1.1",
    "font-awesome": "^4.7.0",
    "ngx-bootstrap": "^6.2.0",
    "ngx-toastr": "^13.2.0",
    "rxjs": "~6.5.4",
    "three": "^0.125.2",
    "tslib": "^2.0.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.2",
    "@angular/cli": "~10.2.2",
    "@angular/compiler-cli": "~10.2.4",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.7"
  }
}
KillerCodeMonkey commented 3 years ago

and did you rerun npm install or yarn install?

tekilla667 commented 3 years ago

Ok, so I just rerun those commands and I no longer get any errors in angular cmd. However, Im back to the entry point and still getting the same error with the peter.stl file image

zone-evergreen.js:659 Unhandled Promise rejection: Offset is outside the bounds of the DataView ; Zone: <root> ; Task: Promise.then ; Value: RangeError: Offset is outside the bounds of the DataView
    at DataView.getUint32 (<anonymous>)
    at isBinary (STLLoader.js:116)
    at STLLoader.parse (STLLoader.js:396)
    at StlModelViewerComponent.<anonymous> (angular-stl-model-viewer.js:105)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:72)
    at StlModelViewerComponent.createMesh (angular-stl-model-viewer.js:102)
    at angular-stl-model-viewer.js:158 RangeError: Offset is outside the bounds of the DataView
    at DataView.getUint32 (<anonymous>)
    at isBinary (https://localhost:4200/vendor.js:13439:21)
    at STLLoader.parse (https://localhost:4200/vendor.js:13719:10)
    at StlModelViewerComponent.<anonymous> (https://localhost:4200/vendor.js:100626:43)
    at Generator.next (<anonymous>)
    at https://localhost:4200/vendor.js:111263:71
    at new ZoneAwarePromise (https://localhost:4200/polyfills.js:1056:33)
    at __awaiter (https://localhost:4200/vendor.js:111259:12)
    at StlModelViewerComponent.createMesh (https://localhost:4200/vendor.js:100623:71)
    at https://localhost:4200/vendor.js:100679:83
KillerCodeMonkey commented 3 years ago

btw: i think this has nothing to do with the angular-stl-model repo here. seems like there is a problem, when threejs tries to load the file.

Keep in mind your model needs to be available in your project (e.g. as an asset)

tekilla667 commented 3 years ago

Yea, Im 100% sure im doing sth wrong and ur repo is fine. Here is sth extraordinary: When I change the html code to this:

<div class="fillscreen">
    <p>store-product-details works!</p>
    <stl-model-viewer [stlModelFiles] = '["./notexist.stl"]'></stl-model-viewer>
</div>

I get the same error. Obviously I don't have notexist.stl file in my file solution. image

Was I linking the file wrong?

KillerCodeMonkey commented 3 years ago

Do you have an "asset" folder in your project?

if yes -> move the model in there.

you can check your angular.json file, there you can find the key "assets". this files and folders are available to load from.

tekilla667 commented 3 years ago

Yes, I do have the assets folder. I moved the peter.stl file there. image The angular.json file has "assets" declared

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "client": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.scss",
              "./node_modules/font-awesome/css/font-awesome.min.css",
              "./node_modules/ngx-toastr/toastr.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "client:build",
            "sslKey": "ssl/server.key",
            "sslCert": "ssl/server.crt",
            "ssl": true
          },
          "configurations": {
            "production": {
              "browserTarget": "client:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "client:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "client:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "client:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "client"
}

I brought html code back to 

<div class="fillscreen">
    <p>store-product-details works!</p>
    <stl-model-viewer [stlModelFiles] = '["./peter.stl"]'></stl-model-viewer>
</div>

Aaaand I still get the error :(

tekilla667 commented 3 years ago

Ok I changed the html to 

<div class="fillscreen">
    <p>store-product-details works!</p>
    <stl-model-viewer [stlModels] = '["peter.stl"]'></stl-model-viewer>
</div>

Now I get image

I changed ng serve to ng serve --open

Now I get image

KillerCodeMonkey commented 3 years ago

okay, we are getting closer. You need to check where your template is living and where your assets folder. Now you have to build the path to reach the assets folder

e.g. ../../../assets/peter.stl

this would go three folder level up then into the assets folder

tekilla667 commented 3 years ago

Bingo ! I got it working! <3 the html code should be 

<stl-model-viewer [stlModels] = '["assets/peter.stl"]'></stl-model-viewer>

Also I needed to add this into scss:

stl-model-viewer {
    display: block;
    height: 500px;
    width: 500px;
  }

image

I can't thank you enough @KillerCodeMonkey ! I promise that one day when I get to your level of expertise I will help noobs like me too.

tekilla667 commented 3 years ago

One more question tho: Is there any way I can change the model's color from gray to any other?

KillerCodeMonkey commented 3 years ago

noooice :)

check the https://github.com/codaline-io/angular-stl-model-viewer#input-properties there is a material property you can pass.