angular-template-for-threejs documentation
  1. Components
  2. VideoMeshComponent

File

projects/atft/src/lib/object/mesh/video-mesh.component.ts

Extends

AbstractMesh

Implements

AfterViewInit OnDestroy

Metadata

providers provideParent(VideoMeshComponent)
selector atft-video-mesh
template 
<ng-content></ng-content>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(rendererService: RendererService, parent: AbstractObject3D<any>, animationService: AnimationService)
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:49
Parameters :
Name Type Optional
rendererService RendererService No
parent AbstractObject3D<any> No
animationService AnimationService No

Inputs

autoplay
Type : boolean
Default value : true
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:36
height
Type : number
Default value : 1.0
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:27

Height; that is, the length of the edges parallel to the Y axis. Optional; defaults to 1.
loop
Type : boolean
Default value : true
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:39
muted
Type : boolean
Default value : true
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:42
type
Type : string
Default value : 'video/mp4'
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:33
videoSrc
Type : string
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:30
width
Type : number
Default value : 1.0
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:21

Width; that is, the length of the edges parallel to the X axis. Optional; defaults to 1.
castShadow
Type : boolean
Default value : true
Inherited from AbstractMesh
Defined in AbstractMesh:16
depthWrite
Type : boolean
Default value : true
Inherited from AbstractMesh
Defined in AbstractMesh:22
material
Type : string
Inherited from AbstractMesh
Defined in AbstractMesh:10
materialColor
Type : string | number
Default value : '#5DADE2'
Inherited from AbstractMesh
Defined in AbstractMesh:13
receiveShadow
Type : boolean
Default value : true
Inherited from AbstractMesh
Defined in AbstractMesh:19
layer
Type : number
Default value : 0
Inherited from AbstractObject3D
Defined in AbstractObject3D:42
name
Type : string
Default value : uuidv4()
Inherited from AbstractObject3D
Defined in AbstractObject3D:40
rotateX
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:24

Rotation in Euler angles (radians) with order X, Y, Z.
rotateY
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:25
rotateZ
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:26
scaleX
Type : number
Default value : 1
Inherited from AbstractObject3D
Defined in AbstractObject3D:36
scaleY
Type : number
Default value : 1
Inherited from AbstractObject3D
Defined in AbstractObject3D:37
scaleZ
Type : number
Default value : 1
Inherited from AbstractObject3D
Defined in AbstractObject3D:38
translateX
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:31

Translate the geometry. This is typically done as a one time operation, and not during a loop.
translateY
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:32
translateZ
Type : number
Inherited from AbstractObject3D
Defined in AbstractObject3D:33

Outputs

changed
Type : EventEmitter
Inherited from AbstractObject3D
Defined in AbstractObject3D:44

Methods

Protected animate
animate()
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:87
Returns : void
Protected getMaterial
getMaterial()
Inherited from AbstractMesh
Defined in AbstractMesh:68
Returns : any
Protected newObject3DInstance
newObject3DInstance()
Inherited from AbstractObject3D
Defined in AbstractObject3D:59
Returns : THREE.Mesh
ngAfterViewInit
ngAfterViewInit()
Inherited from AbstractObject3D
Defined in AbstractObject3D:91
Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from AbstractObject3D
Defined in AbstractObject3D:111
Returns : void
Public applyMaterial
applyMaterial()
Inherited from AbstractMesh
Defined in AbstractMesh:50
Returns : void
Protected applyShadowProps
applyShadowProps(mesh: THREE.Mesh)
Inherited from AbstractMesh
Defined in AbstractMesh:28
Parameters :
Name Type Optional
mesh THREE.Mesh No
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from AbstractObject3D
Defined in AbstractObject3D:33
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
Public addChild
addChild(object: AbstractObject3D<any>)
Inherited from AbstractObject3D
Defined in AbstractObject3D:143
Parameters :
Name Type Optional
object AbstractObject3D<any> No
Returns : void
Protected afterInit
afterInit()
Inherited from AbstractObject3D
Defined in AbstractObject3D:156
Returns : void
Public applyRotation
applyRotation()
Inherited from AbstractObject3D
Defined in AbstractObject3D:118
Returns : void
Public applyScale
applyScale()
Inherited from AbstractObject3D
Defined in AbstractObject3D:135
Returns : void
Public applyTranslation
applyTranslation()
Inherited from AbstractObject3D
Defined in AbstractObject3D:127
Returns : void
Public findByName
findByName(name: string)
Inherited from AbstractObject3D
Defined in AbstractObject3D:185
Parameters :
Name Type Optional
name string No
Returns : any
Public getChildren
getChildren()
Inherited from AbstractObject3D
Defined in AbstractObject3D:202
Returns : Array<AbstractObject3D<any>>
Public getObject
getObject()
Inherited from AbstractObject3D
Defined in AbstractObject3D:175
Returns : T
Public ngOnInit
ngOnInit()
Inherited from AbstractObject3D
Defined in AbstractObject3D:97
Returns : void
Protected recursionByName
recursionByName(currentNode: AbstractObject3D<any>, name: string)
Inherited from AbstractObject3D
Defined in AbstractObject3D:192
Parameters :
Name Type Optional
currentNode AbstractObject3D<any> No
name string No
Returns : any
Public removeChild
removeChild(object: AbstractObject3D<any>)
Inherited from AbstractObject3D
Defined in AbstractObject3D:160
Parameters :
Name Type Optional
object AbstractObject3D<any> No
Returns : void
Public removeChildByName
removeChildByName(name: string)
Inherited from AbstractObject3D
Defined in AbstractObject3D:206
Parameters :
Name Type Optional
name string No
Returns : void
Public updateParent
updateParent()
Inherited from AbstractObject3D
Defined in AbstractObject3D:111
Returns : void

Properties

Protected animation
Type : Subscription
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:47
Protected heightSegments
Type : number
Default value : 1
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:46
Protected playbackError
Default value : false
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:49
Protected video
Default value : document.createElement('video')
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:44
Protected videoPlaybackStarted
Default value : false
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:48
Protected widthSegments
Type : number
Default value : 1
Defined in projects/atft/src/lib/object/mesh/video-mesh.component.ts:45
Protected childlren
Type : Array<AbstractObject3D<any>>
Default value : []
Inherited from AbstractObject3D
Defined in AbstractObject3D:46
Protected object
Type : T
Inherited from AbstractObject3D
Defined in AbstractObject3D:48 
import {AfterViewInit, Component, Input, OnDestroy, Optional, SkipSelf} from '@angular/core';
import * as THREE from 'three';
import {RendererService} from '../../renderer/renderer.service';
import {provideParent} from '../../util';
import {AbstractObject3D} from '../abstract-object-3d';
import {AbstractMesh} from './abstract-mesh-3d';
import {AnimationService} from '../../animation';
import {Subscription} from 'rxjs';

@Component({
  selector: 'atft-video-mesh',
  providers: [provideParent(VideoMeshComponent)],
  template: '<ng-content></ng-content>'
})
export class VideoMeshComponent extends AbstractMesh implements AfterViewInit, OnDestroy {

  /**
   * Width; that is, the length of the edges parallel to the X axis. Optional; defaults to 1.
   */
  @Input()
  width = 1.0;

  /**
   * Height; that is, the length of the edges parallel to the Y axis. Optional; defaults to 1.
   */
  @Input()
  height = 1.0;

  @Input()
  videoSrc!: string;

  @Input()
  type = 'video/mp4';

  @Input()
  autoplay = true;

  @Input()
  loop = true;

  @Input()
  muted = true;

  protected video = document.createElement('video');
  protected widthSegments = 1;
  protected heightSegments = 1;
  protected animation!: Subscription;
  protected videoPlaybackStarted = false;
  protected playbackError = false;

  constructor(
    protected override rendererService: RendererService,
    @SkipSelf() @Optional() protected override parent: AbstractObject3D<any>,
    protected animationService: AnimationService
  ) {
    super(rendererService, parent);
  }

  protected newObject3DInstance(): THREE.Mesh {
    const geometry = new THREE.PlaneGeometry(this.width, this.height, this.widthSegments, this.heightSegments);
    const material = this.getMaterial();
    const mesh = new THREE.Mesh(geometry, material);
    this.applyShadowProps(mesh);

    return mesh;
  }

  protected override getMaterial() {
    // console.log('VideoMeshComponent.initVideo');

    const source = document.createElement('source');
    source.src = this.videoSrc;
    source.type = this.type;
    this.video.appendChild(source);

    this.video.crossOrigin = 'anonymous';
    this.video.autoplay = false;
    this.video.loop = this.loop;
    this.video.muted = this.muted;
    const texture = new THREE.VideoTexture(this.video);
    const material = new THREE.MeshBasicMaterial({color: 0xffffff, map: texture});

    return material;
  }

  // eslint-disable-next-line @typescript-eslint/no-empty-function
  protected animate() {
    // AnimationService will trigger animate() on all subscribers, then executes render() which is required for Video update.
  }

  override ngAfterViewInit() {
    super.ngAfterViewInit();
    if (this.autoplay) {
      this.animationService.start();
      this.animate = this.animate.bind(this);
      this.animation = this.animationService.animate.subscribe(this.animate);

      this.video.load();
      this.video.addEventListener('canplay', () => {
        if (this.video) {
          this.video.play().then(() => {
            this.videoPlaybackStarted = true;
          }, () => {
            this.playbackError = true;
          });
        }
      });
    }
  }

  override ngOnDestroy(): void {
    if (this.video) {
      this.animation?.unsubscribe();
      this.video.pause();
      this.video.remove();
    }
  }


}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""