Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 复制纹理3.js_Javascript_Three.js - Fatal编程技术网

Javascript 复制纹理3.js

Javascript 复制纹理3.js,javascript,three.js,Javascript,Three.js,我想将视频纹理的左半部分加载到左几何体,将视频纹理的右半部分加载到右几何体 var video = document.createElement("video"); var texture = new THREE.Texture(video); texture.offset = new THREE.Vector2(0,0); texture.repeat = new THREE.Vector2( 0.5, 1 ); var material = new THREE.MeshLambertMate

我想将视频纹理的左半部分加载到左几何体,将视频纹理的右半部分加载到右几何体

var video = document.createElement("video");
var texture = new THREE.Texture(video);
texture.offset = new THREE.Vector2(0,0);
texture.repeat = new THREE.Vector2( 0.5, 1 );
var material = new THREE.MeshLambertMaterial({
    map: texture,
    side: THREE.DoubleSide
});
这是左平面纹理

var texture2 = new THREE.Texture(video);
texture2.minFilter = THREE.NearestFilter;
texture2.offset = new THREE.Vector2(0.5,0);
texture2.repeat = new THREE.Vector2( 0.5, 1 );
var material2 = new THREE.MeshLambertMaterial({
    map: texture2,
    side: THREE.DoubleSide
});
var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(320,   240), material);
var plane2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(320, 240), material2);
这是正确的平面纹理

var texture2 = new THREE.Texture(video);
texture2.minFilter = THREE.NearestFilter;
texture2.offset = new THREE.Vector2(0.5,0);
texture2.repeat = new THREE.Vector2( 0.5, 1 );
var material2 = new THREE.MeshLambertMaterial({
    map: texture2,
    side: THREE.DoubleSide
});
var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(320,   240), material);
var plane2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(320, 240), material2);
加载两个视频纹理不起作用,左侧平面显示但右侧不显示,因此我尝试复制纹理,而不是加载相同的视频纹理:

 texture2 = THREE.Texture.clone(texture);

两者都不起作用。因为(在three.js引用中):

如果我能做什么呢

function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
    var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
    for ( var i = 0; i < faceVertexUvs.length; i ++ ) {
       var uvs = faceVertexUvs[ i ];
       for ( var j = 0; j < uvs.length; j ++ ) {
         var uv = uvs[ j ];
         uv.x = ( uv.x + offsetx ) * unitx;
         uv.y = ( uv.y + offsety ) * unity;
      }
   }
}
var P1 = new THREE.PlaneGeometry(320, 240);
var p2 = new THREE.PlaneGeometry(320, 240);
change_uvs(p1,0.5,1,0,0);//left plane
change_uvs(p2,0.5,1,1,0);// right plane
函数更改(几何体、单位x、单位、偏移量x、偏移量y){ var faceVertexUvs=几何体。faceVertexUvs[0]; 对于(变量i=0;i
通过改变平面的UV贴图,我解决了这个问题:)

如果它在理论上起作用,则需要更改任一平面上的UV坐标并将纹理添加到该平面上。我对图像文件或多或少有类似的问题,请检查此处:


我在那里放了很多信息,应该可以帮助您解决问题。

谢谢,我会尝试一下。我还想绑定两个球体上的纹理,而不仅仅是两个平面上的纹理。因此,我想我是否可以将纹理拆分为两部分?在您的帮助下,我更改了两个平面的uvMapping,它确实有效:)