Develop Reference

P5.js camera not working with multiple rotation matrices

I've been working for some time on making a 3D first person camera in p5.js for games and random projects, but I've been having some trouble.
For some time now I've been using a single y-rotation matrix with my projects to allow the player to look around, but I've felt like having an upgrade recently, so I decided to use x and y rotation matrices for my camera code. I was able to botch together a system that kind of worked by dividing both calculated z values, but there were some issues, not to mention that's not how rotation matrices work. I recently tried doing a proper implementation, but I've come across some issues.
I've been using this: camera(0, 0, 0, -200*sin(rot.y), -200*sin(rot.x), (200*cos(rot.x)) + (200*cos(rot.y)), 0, 1, 0); as my test camera code, which in theory would work, but in an actual setting, it doesn't for some reason, as you can see here. Right now if you look around too far it will randomly spaz out and mess up the way you're looking.
I also can confirm that I am using the correct formulas as here. I used the (almost) exact same code for calculating the values, and it looks completely fine.
Is there any weird trick to using the p5.js camera or is this some error that needs to be fixed?

You actually don't have the correct formulas. The example you showed uses orbitControl(), not camera. It also doesn't have two different angles it's rotating through.
The middle 3 coordinates of camera() define the point toward which the camera is pointing. That means that you want that point to move the same way you want the focus of the camera to move. It might help to draw a box at that point like this (in your original):
push();
translate(-200*sin(rot.y), -200*sin(rot.x), (200*cos(rot.x)) + (200*cos(rot.y)));
box(50);
pop();
You'll notice that the box is not always the same distance from the camera. It stays on a torus whose major and minor radii are both 200. What you want is a sphere with radius 200 (really it can have any radius).
The way you define these three coordinates depends on how you want the user's interactions to be. Here's one way:
camera(0, 0, 0,
cos(rot.x) * cos(rot.y),
cos(rot.x) * sin(rot.y),
sin(rot.x),
0, 0, 1);
This points the camera based on latitude and longitude, with the north pole on the positive Z axis. Moving the mouse right and left affects the longitude, and up and down affects the latitude.

Compute UV coordinates for threecsg mesh

for a university project I created a threecsg subtract in ThreeJS. I want to apply a texture for this mesh. But the missing uv coordinates after the processing is causing me some trouble. This needs to be a threecsg, because this a project requirement.
This is how the mesh looks like now: screenshot link
I found some code here: THREE.js generate UV coordinate
And it did get me closer to the solution. The side faces are now facing the applied texture in the right way: screenshot link
The upside has many weird faces. I tried to use the THREE.SimplifyModifier to get fewer faces so I might be able to calculate and set the uv-coordinates by myself, but I failed.
I thought it might be a solution to "just iterate" over the up- and downside and to kinda "cut of" the texture at the border, like it would be if the mesh were a cube. The mesh has about 350 Faces, I probably could be able to set the corner vertices but it would be nice if the uv-coordinates of the vertices in between could be calculated - but I have no idea how to to this. I do not mind about the side where cylinder is cut off, because you will not see it at the end.
thank you so much!

The CSG library I'm maintaining preserves UV coordinates from cut geometry.
https://github.com/manthrax/THREE-CSGMesh
http://vectorslave.com/csg/CSGDemo.html
http://vectorslave.com/csg/CSGShinyDemo.html
#JonasOe

How do I make the Three.js camera look at the face of an object?

I'm have a sphere made of hexagons and pentagons and I am trying to make the camera look at a particular hexagon directly - so the centre of a user's view is the hex and it is flat.
The hexagons are made using the hexasphere.js plugin (https://github.com/arscan/hexasphere.js/tree/master). I am able to extract information from a mesh object which makes up a hex. But I don't know how to take the object info and tell the camera where to go.
I have tried using the normal matrix element of the mesh and finding the euler angles - but I don't know what to then do with them.

Ok, I've found a solution. The hexasphere plugin provides the centre point of a face with hexasphereObj.tiles[i].centrePoint which is a point object and this has a method project(radius, percent) which gets the coordinates of a point at a projection from the centre of the hexasphere and through the centre of the face.
I was then able to move the camera to this projected point and have it lookAt the centre of the hexasphere.

What exactly does the d3 clipAngle method do?

I am absolutely confused on what the clipAngle method in d3 does. I've poked in the wiki and in the library its self but am not able to put it in plain vanilla English.
https://github.com/mbostock/d3/wiki/Geo-Projections#clipAngle
I see that my orthographic projection gets sliced in half if the clip angle is set to 90.
If set to 180 I see the front and the back of the sphere
Zero I se nothing
So basically I can imagine this as a plane slicing the sphere?
thanks!

Imagine a pin that's anchored in the center of the sphere pointing straight at you, it's now at 0 degrees, and this doesn't render anything. Change the angle of this pin by moving the end pointing at you up. At 90° the pin is pointing straight up and it renders everything between 0° and 90°. Rotate it a bit further and it starts to render the back half of the sphere.
For reference, here's one clipped at 107° so that it renders a bit of the backside and appears to "wrap" around the inner globe:

Rounded Plane In THREE JS

THREE JS, can often seem angular and straight edged. I haven't used it for very long and thus am struggling to understand how to curve the world so to speak. I would imagine a renderer or something must be changed, but the idea is to take a 2d map and turn it into a simple three lane running game. However, if you look at the picture below from another similar game, how can i achieve the fish eye effect?

I would do that kind of effect on per-vertex base depending on the distance from the camera.
Also, maybe a bit tweaked perspective camera with bigger vertical fov would boost up the effect of the "curviness".
It's just a simple distortion effect that has been simulated in some way, it probably isn't really curved. Hope this helps.

I'm sure there are many possible different approaches... Here's one that creates nice barrel distortion effect.
You can do something like that by rendering normal wide angle camera to a texture, then project it to a lens-shaped plane (a sphere even), then the actual on-screen render is from a camera pointing to that.
I don't have the code available ATM, but I should be able to dig it up in few days if interested. Or you can just adapt from the three.js examples. Three.js includes some postprocessing examples where the scene is first rendered into a texture, that texture is applied to a a quad then photographed with ortographic camera. You can modify such an example by changing the ortographic camera to a perspective one, then distorting/changing the quad to something more appropriately shaped.
Taken to extremes, this approach can produce some pixelization / blocky artifacts.