代码之家  ›  专栏  ›  技术社区  ›  Peter I

视频纹理三。几何

  •  0
  • Peter I  · 技术社区  · 6 年前

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

    THREE.JS

    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() {
    
        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
        });
    
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   M -    6 年前

    正如prisoner849所说,您需要向几何体添加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();
    

    enter image description here

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