Adding GLSL style swizzling to vectors

I love glsl swizzling, and I was wondering if we could get the same thing in threejs? I mean this sort of thing: u.set(new THREE.Vector3(v.x,v.x,v.y))

Describe the solution you’d like

Something that works the same as the following code but isn’t run afterwards added:

array = ["x","y","z"]
swizzle2d = array.map(e=>array.map(f=>[f,e])).flat(1)
swizzle3d = array.map(e=>array.map(f=>array.map(g=>[e,f,g]))).flat(2)
swizzle2d.forEach(e=>{
			Object.defineProperty(this, e[0]+e[1], {
				get: function() {
					return new THREE.Vector2(this[e[0]],this[e[1]]);
				},
				set: function(vec2) {
					this[e[0]] = vec2[e[0]];
					this[e[1]] = vec2[e[1]];
				}
			})
})

swizzle3d.forEach(e=>{
			Object.defineProperty(this, e[0]+e[1]+e[2], {
				get: function() {
					return new THREE.Vector3(this[e[0]],this[e[1]],this[e[2]]);
				},
				set: function(vec3) {
					this[e[0]] = vec3[e[0]];
					this[e[1]] = vec3[e[1]];
					this[e[2]] = vec3[e[2]];
				}
			})
})

Additional context

Will this cause performance issues? I am unclear on how getters and setters work.

[gkjohnson]

Not in this specific context, but how do I make it so it doesn’t make new objects? Like I know the performance implications, i just don’t see any other way around them even in other contexts.

Most other math functions take a “target” object that is used to get the result of an operation which ultimately I think would defeat the simplicity of your swizzle functions. That target function can be global so it’s reused without having to be remade in any frequently evaluated contexts. Something like:

const target = new Vector3()
const v = new Vector3( 1, 2, 3 );
v.yyx( target );

console.log( target ); // 2, 2, 1

I agree these types of fields are convenient and it’s nice that they align with glsl behavior but unfortunately I think the nature of Javascript makes them difficult to implement elegantly.

Also FYI you don’t need to pass a Vector3 into the set function. You can pass in numbers directly which makes the set function a fairly readable one liner:

u.set( v.x, v.x, v.y );

[mrdoob]

I mean this sort of thing: u.set(new THREE.Vector3(v.x,v.x,v.y))

Can’t you do that already?