I am seeking to assign the left half of a video texture to the left Geometry and the right half of the video texture to the right Geometry.
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
});
This represents the texture for the left plane.
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
});
This represents the texture for the right plane.
var plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(320, 240), material);
var plane2 = new THREE.Mesh(new THREE.PlaneBufferGeometry(320, 240), material2);
Initially when I attempted to load two video textures, the left plane displayed but the right did not. To address this, I tried duplicating the texture instead of loading the same video texture:
texture2 = THREE.Texture.clone(texture);
or
texture = texture;
However, both approaches were unsuccessful. This is because (as mentioned in the three.js reference):
.clone(texture)
Make a copy of the texture. Note that this is not a "deep copy", the image is shared.
Is there anything else I can do?
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
By adjusting the uvMapping of the planes, I was able to resolve the issue :)