Question

我想在给定的平面上应用纹理。我可以在PlaneGeometry上显示一个纹理，但是我想在一个我精确测量角坐标的平面上进行。

我在PlaneGeometry上应用纹理（视频或图像）的工作代码：

var materialVideo, videoGeometry, videoMesh;
var video, videoTexture, videoImage, videoImageContext;
var videoPlan,videoPlanMesh;        

function testVideo()
{
    video = document.createElement('video');
    video.loop=true;
    video.width    = 480;
    video.height   = 204;
    video.autoplay = true;
    video.src = "./video.mp4";
    video.load(); 

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

    videoImageContext = videoImage.getContext('2d');
    videoImageContext.fillStyle = 'rgb( 200,0,0 )';
    videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height);

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

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

    //if an image, not a video
    //var image = new Image();
    //image.src="./texture.jpg";
    //materialVideo.map.image = image;

    /************************************/
    //display on a PlaneGeometry   
    videoGeometry = new THREE.PlaneGeometry(160,120,4,4);

    videoMesh = new THREE.Mesh(videoGeometry, materialVideo);
    videoMesh.position.x= 80;
    videoMesh.position.y= 0;
    videoMesh.position.z= -50;
    videoMesh.rotation.y=0;

    scene.add( videoMesh );
    /************************************/
}

要在具有给定角落的平面上显示，我将替换上一个块“PlaneGeometry上的显示”：

videoPlan = new THREE.Geometry();
videoPlan.vertices.push(new THREE.Vector3(100,50,-50));
videoPlan.vertices.push(new THREE.Vector3(100,50,50));
videoPlan.vertices.push(new THREE.Vector3(100,-50,50));
videoPlan.vertices.push(new THREE.Vector3(100,-50,-50));

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

videoPlanMesh = new THREE.Mesh(videoPlan, materialVideo);
scene.add( videoPlanMesh );

但没有出现，我收到错误：

[.WebGLRenderingContext] GL错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性1中超出范围的顶点

我的mystake是什么？

编辑回答：实际上，缺少UV坐标，所以最后，我有以下工作代码：

videoPlan = new THREE.Geometry();
videoPlan.vertices.push(new THREE.Vector3(100,50,-50));
videoPlan.vertices.push(new THREE.Vector3(100,50,50));
videoPlan.vertices.push(new THREE.Vector3(100,-50,50));
videoPlan.vertices.push(new THREE.Vector3(100,-50,-50));

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

videoPlan.faceVertexUvs[0][0]=[new THREE.UV(0, 1),new THREE.UV(1, 1),new THREE.UV(1, 0)];
videoPlan.faceVertexUvs[0][1]=[new THREE.UV(0, 1),new THREE.UV(1, 0),new THREE.UV(0, 0)];

videoPlanMesh = new THREE.Mesh(videoPlan, materialVideo);
scene.add( videoPlanMesh );

three.js将纹理应用于给定平面

0 个答案: