OrbitControls not working properly

[samuelemarazzita]

Describe the bug I'm trying to customize the controls property using OrbitControls but when I insert it in my .ts file the viewer is not fluent and then crashes (need to close the page and open it back).

To Reproduce Steps to reproduce the behavior:

1. add import { StlModelViewerModule } from 'angular-stl-model-viewer'; to app.module.ts
2. add THREE module and OrbitControls (import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls') to my component .ts
3. create a function for the control: getControls(){const controls = new OrbitControls(this.camera, this.renderer.domElement);}
4. add to the HTML element [controls]="getControls()"
5. See error

Expected behavior I guess to see exactly the same controls as the default. I see in the library that this is the default:

if (this.hasControls && !this.controls) {
    this.controls = new OrbitControls.OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableZoom = true;
    this.controls.minDistance = 1;
    this.controls.maxDistance = 7;
    this.controls.addEventListener('change', this.render);
}

Of course this is just a test, I need to change other stuff such as this.controls.minDistance = 1; and this.controls.maxDistance = 7; values.

[KillerCodeMonkey]

Would bei nice If you could create an Demo in Stackblitz.

And Share The Error you get.

Am 23.01.2021 in 22:05, samuelemarazzita notifications@github.com schrieb:

Describe the bug I'm trying to customize the controls property using OrbitControls but when I insert it in my .ts file the viewer is not fluent and then crashes (need to close the page and open it back).

To Reproduce Steps to reproduce the behavior:

1. add import { StlModelViewerModule } from 'angular-stl-model-viewer'; to app.module.ts
2. add THREE module and OrbitControls (import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls') to my component .ts
3. create a function for the control: getControls(){const controls = new OrbitControls(this.camera, this.renderer.domElement);}
4. add to the HTML element [controls]="getControls()"
5. See error

Expected behavior I guess to see exactly the same controls as the default. I see in the library that this is the default:

if (this.hasControls && !this.controls) { this.controls = new OrbitControls.OrbitControls(this.camera, this.renderer.domElement); this.controls.enableZoom = true; this.controls.minDistance = 1; this.controls.maxDistance = 7; this.controls.addEventListener('change', this.render); }

— 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/439, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARI4YGIKDHMVPBVURFXTADS3M2YPANCNFSM4WP7DTMA .

[samuelemarazzita]

I'm not sure if it works, but the code should be all. I can't check if the STL file works because stackblitz is telling me "Starting dev server" since the beginning. If it doesn't work because of that, please feel free to change it: https://stackblitz.com/edit/angular-ivy-qmajfy

[KillerCodeMonkey]

your method getControls is not returning anything.

and a hint: avoid calling functions to set properties. Each rendering will execute them again and again.

And there are many other problems you should solve first.

[stlModels]="http://www.ozeki.hu/attachments/116/Cube_3d_printing_sample.stl"

should be e.g.

[stlModels]="'http://www.ozeki.hu/attachments/116/Cube_3d_printing_sample.stl'"

[samuelemarazzita]

Thanks, and what may be a better solution than function? And why my getControls is retuning anything if I used OrbitControls as your module does? Il 24 gen 2021, 14:22 +0100, Bengt Weiße notifications@github.com, ha scritto:

your method getControls is not returning anything. and a hint: avoid calling functions to set properties. Each rendering will execute them again and again. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[KillerCodeMonkey]

getControls() {
    const controls = new OrbitControls(this.camera, this.renderer.domElement);
  }

is not returning any value... so when you call it in the template, nothing is returned... so the controls are set to undefined

just access your component properties directly? And configure them in the constructor.

[KillerCodeMonkey]

I did not test it.. but something like that i would expect:

import { Component } from "@angular/core";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  scene = new THREE.Scene();
  material = new THREE.MeshStandardMaterial({
    color: 0x3781da,
    emissive: 0x0,
    roughness: 1,
    metalness: 0,
    fog: true,
    side: THREE.DoubleSide,
    skinning: false
  });
  renderer = new THREE.WebGLRenderer({ antialias: true });
  controls = null;
  light = new THREE.HemisphereLight(0xffffff, 0x444444);
  camera = new THREE.PerspectiveCamera(45, 4 / 3, 0.01, 1000000);

  defaultMeshOptions = {
    castShadow: true,
    position: new THREE.Vector3(0, 0, 0),
    receiveShadow: true,
    up: new THREE.Vector3(0, 0, 1),
    scale: new THREE.Vector3(0.01, 0.01, 0.01)
  };

  constructor() {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);

    this.scene.background = new THREE.Color(0xffffff);
    this.scene.fog = new THREE.Fog(0xffffff, 10, 1000);

    this.light.position.set(0, 20, 0);

    this.camera.up = new THREE.Vector3(0, 0, 1);
    this.camera.position.set(-3, -3, 3);
    this.camera.lookAt(0, 0, 0);
  }
}

<stl-model-viewer
  [stlModels]="'http://www.ozeki.hu/attachments/116/Cube_3d_printing_sample.stl'"
  [meshOptions]="[defaultMeshOptions]"
  [camera]="camera"
  [material]="material"
  [scene]="scene"
  [renderer]="renderer"
  [controls]="controls"
  [light]="light"
></stl-model-viewer>

[samuelemarazzita]

Thank you, but controls is still not working with your solution. I moved the controls into the class of the component instead of creating a null value for it and then changing the values into the constructor. Anyway, the camera is not moving anymore now. When I don't use the property [controls]="controls" the default works perfectly.

[KillerCodeMonkey]

but do you get some error in your JS-Developer console in the browser?

[samuelemarazzita]

It doesn't compile anything there, I just can't test it. I'm testing it on my local version.

[KillerCodeMonkey]

yeah... but even there you can open js developer console in your browser and check for errors...

[samuelemarazzita]

Ok sorry, I was looking at their console that was empty. In this case, the problem is the STL link, looks like it doesn't work. I'll try with another file hosted by me, maybe it's a permission issue.

[samuelemarazzita]

Ok, I've made it work now and this is the error:

Error in src/app/app.component.html (1:20)
Type 'string' is not assignable to type 'string[]'.

[KillerCodeMonkey]

if you get an error it is not "working"... so i guess you are lacking experiences in js and ts....

seems like your are not passing the properties in the correct way. one seems to accept only an array of strings, but you are passing a string.

[KillerCodeMonkey]

i released a new version with a new example in it, how to work with custom controls.

https://codaline-io.github.io/angular-stl-model-viewer/ - check the 3rd model

https://github.com/codaline-io/angular-stl-model-viewer/blob/master/projects/examples/src/app/app.component.ts https://github.com/codaline-io/angular-stl-model-viewer/blob/master/projects/examples/src/app/app.component.html