# Mesh points to the camera on only 2 axis with shaders
**URL:** https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555
**Category:** Questions
**Tags:** sprites, math, threejs, shaders
**Created:** [December 13, 2020, 10:46am UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555 "2020-12-13T10:46:12Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@herve3d](https://discourse.threejs.org/u/herve3d)
#### Post date: [December 13, 2020, 10:46am UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/1 "2020-12-13T10:46:12Z")
Hi,
I’m newbie with shaders and I didn’t use matrix for a while… (I’m not Neo 😄)
I want meshes face to the camera only on 2 axis
I know it’s like billboard and I can take a look on THREE.Sprite but I’m not able to make it working…
From three.js sprite vertex glsl:
```
uniform float rotation;
uniform vec2 center;
void main() {
vec3 labelpos = vec3( 0.0, 0.0, 0.0 );
vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) );
vec2 rotatedPosition;
rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
mvPosition.xy += rotatedPosition;
gl_Position = projectionMatrix * mvPosition;
}
```
Or mixing things found on internet and [three.js docs](https://threejs.org/docs/#api/en/renderers/webgl/WebGLProgram) :
```
void main() {
gl_Position = projectionMatrix * (viewMatrix * modelMatrix * vec4(0.0, 0.0, 0.0, 1.0) + vec4(position.x, position.y, position.z, 0));
}
```
Both work but on 3 axis, I don’t kown what to change to only point the camera on X and Z axis 😢
---
### Author:  [@Mugen87](https://discourse.threejs.org/u/Mugen87)
#### Post date: [December 14, 2020, 11:05am UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/2 "2020-12-14T11:05:59Z")
> [@herve3d](#):
>
> I want meshes face to the camera only on Y axis
What does this supposed to mean? Do you mind describing in more detail your expected result?
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [December 14, 2020, 12:04pm UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/3 "2020-12-14T12:04:51Z")
@herve3d Hi!
You can do it on js side: [https://jsfiddle.net/prisoner849/w19d5km7/](https://jsfiddle.net/prisoner849/w19d5km7/)
---
### Author:  [@herve3d](https://discourse.threejs.org/u/herve3d)
#### Post date: [December 14, 2020, 1:04pm UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/4 "2020-12-14T13:04:03Z")
It’s like the prisoner849’s example, a lookat but with a rotation only on X and Z axis. Sorry my description was wrong about axis, I update it.
But I want to use shaders avoiding some loops in the AnimationLoop
---
### Author:  [@herve3d](https://discourse.threejs.org/u/herve3d)
#### Post date: [December 14, 2020, 1:14pm UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/5 "2020-12-14T13:14:43Z")
Really nice example, I like this pixel art style 😁
You understood my need despite my bad description, but I want to use shaders to manage it easily during scene or objects loading and remove/dispose, avoiding management of many arrays for my usecases. And for optimization too I think
---
### Author:  [@herve3d](https://discourse.threejs.org/u/herve3d)
#### Post date: [January 1, 2021, 11:27pm UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/6 "2021-01-01T23:27:52Z")
I failed to use shaders, I’m giving up for now 😖
As I use a PointerLockControls this is how I did it following @prisoner849 example:
```
let t = new THREE.Vector3();
...
//t.copy(controls.getObject().position);
//t.y = 0;
t.x = controls.getObject().position.x;
t.z = controls.getObject().position.z;
planes.forEach(p => {
p.lookAt(t);
});
```
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [February 16, 2021, 10:08am UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/7 "2021-02-16T10:08:34Z")
Just recalled about this topic, surfing @hofk’s collection of examples.
Seems it works with `InstancedMesh` and slightly modified `MeshBasicMaterial` ([modification](https://discourse.threejs.org/t/instanced-geometry-vertex-shader-question/2694/3)), in which you pass a quaternion in uniform: [https://jsfiddle.net/prisoner849/g8j24z0n/](https://jsfiddle.net/prisoner849/g8j24z0n/)
---
### Author:  [@herve3d](https://discourse.threejs.org/u/herve3d)
#### Post date: [February 19, 2021, 8:22am UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/8 "2021-02-19T08:22:33Z")
Oh a solution with shader ! Super, this is what I wanted to do, I think it’s more optimized. Thanks
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [February 19, 2021, 9:00am UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/9 "2021-02-19T09:00:01Z")
@herve3d You’re welcome 🍻
---
### Author:  [@prisoner849](https://discourse.threejs.org/u/prisoner849)
#### Post date: [September 8, 2021, 3:01pm UTC](https://discourse.threejs.org/t/mesh-points-to-the-camera-on-only-2-axis-with-shaders/21555/10 "2021-09-08T15:01:28Z")
If someone’s interested in this effect with lights,
here is an option with `THREE.SpotLight`: [https://jsfiddle.net/prisoner849/9v1eoxL3/](https://jsfiddle.net/prisoner849/9v1eoxL3/)
