› ›

3D First Person Camera - Walking around

MaxR18MaxR18
edited April 2017 in p5.js Programming Questions

Hi!

Iv'e been trying to get a first person camera up and running. Walk with WASD and click and hold mouse to steer direction. Ive setup a "room" with some paintings. When you first start to walk its seems okay. But try walk close to a painting and the stand still and rotate the camera. What should happen: You turn around and can see the other paintings further away. What happens: The "room" rotates instead of the camera turning. It's easier to understand if you walk backwards, out of the "room" and rotate with the mouse. Youll then see how the room rotates like a carousel, instead of the camera turning away from the room. Run it here: https://maximilian-r.github.io/first-person-camera/ . The goal is to create an interactive 3D-presentation for my final essay in school. The paintings will be switched to powerpoint-slide images later on.

Sketch and camera script available here: https://github.com/Maximilian-R/first-person-camera

Ive spent tens of hours trying to solve this. I did try another alternativte to skip the p5 camera function, and instead translate all the paintings I draw according to how I "walk". It worked better, as you turned the camera you turned around and saw the other paintings further away. However, it felt like the camera position was too far ahead and you didnt walk in the direction you was looking with forward "W".

Any ideas?

Tagged:

Answers

  • ChrisirChrisir

    The "room" rotates instead of the camera turning.

    ??

    it just looks like the room rotates, in fact the camera does

  • MaxR18MaxR18

    Oh... beacause of the rotateX and rotateY functions? What could I use instead?

  • ChrisirChrisir

    https://forum.processing.org/two/discussion/comment/95997/#Comment_95997

  • ChrisirChrisir

    I meant that your sketch is in fact correct, it just looks wrong...

  • jeremydouglassjeremydouglass

    While it is Java rather than JavaScript, the "queasycam" library source code is also a good model to look at for how to implement a full FPS camera in Processing.

  • MaxR18MaxR18
    edited April 2017

    Is my sketch really correct doe? If its the camera rotating, it does not rotate around the current camera position as origon. It rotates the camera, but with the moved distance away from the center of the room (starting origion). Maybe it would look correct if I always rotate the world with the current camera position as rotating-point. No idea how to solve that though, If I only translate to the position it will look static instead

  • MaxR18MaxR18

    All examples I can find (in processing and WEBGL, JAVA) has a camera function which takes position, look at position, and some more. The p5 camera function only has position, not look at :/

  • MaxR18MaxR18

    I will try to replicate the quesycam, thanks for link :)

  • ChrisirChrisir

    Also look at the link I posted

  • MaxR18MaxR18

    Have checked youre link as well now :) Both solutions seems all fine but p5 is missing the camera look at position argument. I'm missing a solution to rotate it all accordingly so it would look at the specified position

  • MaxR18MaxR18

    I solved it, can publish the solution later when I cleaned the code a little bit

  • jeremydouglassjeremydouglass

    @MaxR18 -- congratulations on solving your problem!

    Yes, please do share your solution -- I'm sure that others will be interested in a p5.js first person camera.

  • jordaneastjordaneast

    @MaxR18 I'd love to have a look at your p5.js first person camera if you ever want to publish it!

Sign In or Register to comment.