THREE.js - подогнать текстуру к масштабированной плоскости - PullRequest
Новая
       71

THREE.js - подогнать текстуру к масштабированной плоскости

0 голосов
/ 08 февраля 2020

Я пытаюсь создать самолет с изменяемым размером, который отображает видеопоток с веб-камеры.

У меня есть следующее: 

 const
   video = document.createElement('video'), 
   mesh = new THREE.Mesh(
     new THREE.PlaneGeometry(1, 1),
     new THREE.MeshBasicMaterial()
   )
 ;

 let stream = null;

 mesh.material.map = this.material.map = new THREE.VideoTexture(video);

 async startStream () {
   const
    { x:width, y:height } = this.scale, 
    stream = await navigator.mediaDevices.getUserMedia({
    video: {
        width: { ideal: width },
        height: { ideal: height }
      }
    });

    video.srcObject = stream;
    video.play();
    return stream;
 }

 async stopStream () { ... }

 function onResize(width, height) {
   stopStream();
   mesh.scale.set(width, height, 1);
   stream = await startStream();
 }

Веб-камеру можно увидеть на самолете, но видео не масштабируется правильно. Я думаю, это потому, что меня sh масштабируется. Так как же я могу разместить видео / текстуру в масштабированной плоскости?

...