I am new to THREE.JS and I am trying to create waving flag animation with an Angular project.

This is my progress: https://stackblitz.com/edit/angular-edgwof?file=src/app/app.component.ts

I would like achieve that the plane fits the window height, keeping the aspect ratio and it is placed in the top left corner.

Any advice is welcome, thanks.

CodePudding user response：

On line 33

this.geometry = new THREE.PlaneGeometry(3, 5, 30, 50);

To

let height = window.height;
let width = height * 3/5;
this.geometry = new THREE.PlaneGeometry(width, height, 30, 50);

Then to place it on the top left corner, change the position of your mesh to 0