nartc / angular-three

🧊 THREE.js integration for Angular 🧊
https://angular-three.netlify.app/
MIT License
306 stars 23 forks source link

Need help declaring fog settings #70

Closed IRobot1 closed 2 years ago

IRobot1 commented 2 years ago

I'm using the following to declare fog settings

  <ngt-canvas [camera]="{ position: [0, 400, 700], fov: 45, near: 1, far:1500 }"
              [scene]="{ background: 'black' | color, fog: { color: 'black'| color, near: 250, far: 1400} | fog }">

However, I'm getting the following build error

Argument of type 
'{ color: Color; near: number; far: number; }' is not assignable to parameter of type 
'[color: ColorRepresentation, near?: number | undefined, far?: number | undefined]'.

Object literal may only specify known properties, and '"color"' does not exist in type '[color: ColorRepresentation, near?: number | undefined, far?: number | undefined]'.

3               [scene]="{ background: 'black' | color, fog: { color: 'black'| color, near: 250, far: 1400} | fog }">
                                                                      ~~~~~~~~~~~~~~

For now, I can work-around by declaring a Fog() variable

  <ngt-canvas [camera]="{ position: [0, 400, 700], fov: 45, near: 1, far:1500 }"
              [scene]="{ background: 'black' | color, fog: fogsettings }">
  fogsettings = new Fog(new Color(), 250, 1400);
manhnd98 commented 2 years ago

I think you can use like this

[scene]="{
                background: 'black' | color,
                fog: ['black' | color, 250, 1400] | fog
            }"
nartc commented 2 years ago

You can do: fog: ['black', 250, 1400] | fog since Fog accepts a ColorRepresentation instead of Color.