Angular-based Level of Detail (LOD) implementation#82
Angular-based Level of Detail (LOD) implementation#82ericleib wants to merge 5 commits intoangular-threejs:mainfrom
Conversation
✅ Deploy Preview for angularthreedemo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for angularthreesoba ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| @Component({ | ||
| template: ` | ||
| <ngt-group lod> | ||
| <ngt-mesh *lodLevel="{}"> |
There was a problem hiding this comment.
nit: let's make the input default value {} so we don't have to have this empty object {}
There was a problem hiding this comment.
Unfortunately, Angular doesn't let me write <ngt-mesh *lodLevel>.
Perhaps a lighter syntax could be <ngt-mesh *lodLevel="100" [hysteresis]="0.2"> ?
| <ngt-mesh-basic-material color="hotpink" wireframe /> | ||
| </ngt-mesh> | ||
|
|
||
| <ngt-mesh *lodLevel="{distance: 50}"> |
There was a problem hiding this comment.
comment: also let's add some event to one of these lod's level
There was a problem hiding this comment.
Do you mean an output event on the LODLevel directive ?
eg. <ngt-mesh *lodLevel="{distance: 50}" (visibilityChange)="onVisibilityChange($event)"> ?
| @Component({ | ||
| selector: '[lod]', | ||
| template: ` | ||
| <ng-container *ngTemplateOutlet="level()?.template" /> |
There was a problem hiding this comment.
comment: it's less known but you typically don't need *ngTemplateOutlet here, just [ngTemplateOutlet] would work
|
See this issue in the deploy preview |
2 participants
Implements Level of Detail (LOD) rendering. Automatically switches between different detail levels of child objects based on camera distance.
Unlike
NgtsDetailed, this is an implementation based on Angular and angular-three APIs rather than Three's LOD class.The component adds and remove objects from the scene graph rather than hiding them with
visible = false.This solves a number of issues such as avoid raycasting over hidden objects.
Usage:
The
[lodLevel]directive (NgtsLODLevel) supports the following options:distance0hysteresis0This directive may also be used with the following syntax: