three.js - THREE.Geometry 上的视频纹理

Question

我能找到的唯一例子是在 PlaneGeometry 或 BoxGeometry 上使用的视频纹理。我有一个自定义飞机，我有一个视频应用到。视频播放（颜色变化）并显示，但比例关闭（看起来像放大了）。

视频在右上角播放，绿色平面是视频所在的自定义几何图形。

三、几何

this.geometry = new THREE.Geometry();

this.geometry.vertices.push(
    new THREE.Vector3(900, 0, 840)
    new THREE.Vector3(-900, 0, 1200),
    new THREE.Vector3(900, 900, 840),
    new THREE.Vector3(-900, 900, 1200),
);

this.geometry.faces.push(
    new THREE.Face3(0, 1, 2),
    new THREE.Face3(1, 3, 2),
);

this.geometry.computeFaceNormals();

this.object = new THREE.Mesh(this.geometry, this._videoMaterial());

videoMaterial函数

_videoMaterial() {

    let videoImage = document.createElement('canvas');
    videoImage.width = 480;
    videoImage.height = 204;

    this.videoImageContext = videoImage.getContext('2d');

    this.videoImageContext.fillStyle = '#211e79';
    this.videoImageContext.fillRect(0, 0, videoImage.width, videoImage.height);

    this.videoTexture = new THREE.Texture(videoImage);
    this.videoTexture.minFilter = THREE.LinearFilter;
    this.videoTexture.magFilter = THREE.LinearFilter;
    this.videoTexture.format = THREE.RGBFormat;

    return new THREE.MeshBasicMaterial({
        map: this.videoTexture,
        overdraw: true,
        side: THREE.DoubleSide
    });

}

标签： three.js

Answer 1

正如囚犯 849 所说，您需要将 UV 添加到您的几何体中，以便它知道如何在其表面上映射纹理

// Add UVs of face 1
this.geometry.faceVertexUvs[0].push([
    new THREE.Vector2(0, 0)
    new THREE.Vector2(0, 1),
    new THREE.Vector2(1, 0)
]);

// Add UVs of face 2
this.geometry.faceVertexUvs[0].push([
    new THREE.Vector2(0, 1)
    new THREE.Vector2(1, 0),
    new THREE.Vector2(1, 1)
]);

this.geometry.uvsNeedUpdate();

您可能需要调整 UV 的顺序以匹配面上顶点的顺序，但您需要这样的排列：

https://threejs.org/docs/index.html#api/en/core/Geometry.faceVertexUvs