Walking through camera settings

Ivan_Stratiichuk · March 31, 2020, 8:30pm

Hi all,

Pls could someone to help to understand how walking through camera works on this sample scene First Person Movement | Learn PlayCanvas

Or is it possible to copy it to my own projects to analyze it!?

Thanks for help.

Leonidas · March 31, 2020, 9:57pm

Hi @Ivan_Stratiichuk,

If you can, avoid opening new threads for the same subject.

You can create a firstPersonMovement script in your project and copy/paste the contents of the script from the tutorial page.

For that to work in your project, you will have to setup a scene with the right entities. Take a look at the tutorial project provided with the tutorial on how to structure your scene accordingly.

https://playcanvas.com/project/405842/overview/tutorial-fps-movement

Ivan_Stratiichuk · April 1, 2020, 3:18pm

Hi,

I don`t understand how to add html and css files to entity,

Could you help me with that?

Albertos · April 1, 2020, 3:28pm

If i understand your question correctly, first you have to add a script element on the entity (with the add component function on the entity) and after that you can add the html and css as script to this component.

Ivan_Stratiichuk · April 1, 2020, 3:29pm

Hi,

I just found how to do that, thank you!

Ivan_Stratiichuk · April 2, 2020, 3:49pm

Hi,

Is it possible to use it on smartphone?

Leonidas · April 2, 2020, 3:54pm

That one know, requires a mouse to be available.

On the engine examples you can find a similar one that works on mobile as well (with touch gestures):

http://playcanvas.github.io/#camera/first-person.html

And the source code:

github.com

playcanvas/engine/blob/master/examples/camera/first-person.html

<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas First Person Camera</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
    <script src="../../build/output/playcanvas.js"></script>
    <script src="../wasm-loader.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- The canvas element -->
    <canvas id="application-canvas"></canvas>

This file has been truncated. show original

Ivan_Stratiichuk · April 2, 2020, 3:57pm

Do I need to add this code, or paste it instead of that I have right now?

Leonidas · April 2, 2020, 3:58pm

No, sadly it won’t work out of the box, you will have to study it and implement the parts you are missing (touch controls).

Ivan_Stratiichuk · April 2, 2020, 4:07pm

Sorry don`t understand what box do you mean?

Where can I find the structure of this sample?

https://playcanvas.github.io/#camera/first-person.html

Leonidas · April 2, 2020, 4:10pm

Out of the box was just an expression meaning it won’t work by copy/pasting in your project. You will have to do adjustments.

There isn’t any structure for that sample, it’s code only. It uses directly the Playcanvas engine fully in code to setup the scene.

Since you are doing your first steps in the world of Javascript/Playcanvas programming, it may make sense to strengthen your skills first. That will make you more comfortable with reading existing Playcanvas code.

Ivan_Stratiichuk · April 2, 2020, 4:13pm

Ok, what do I need to study to strengthen my skills?

Leonidas · April 2, 2020, 4:21pm

Well, I know that freecodecamp.org has great tutorials and code challenges although is focused on web development in general. But it has many hours of Javascript challenges that are super useful.

I would also search for some basic javascript tutorials on Youtube to get you started and get you more familiar with the language and some basic programming concepts.

Ivan_Stratiichuk · April 2, 2020, 4:51pm

So I didn`t understand, does this sample solve my task or not?

github.com

playcanvas/engine/blob/master/examples/camera/first-person.html

<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas First Person Camera</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
    <script src="../../build/output/playcanvas.js"></script>
    <script src="../wasm-loader.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <!-- The canvas element -->
    <canvas id="application-canvas"></canvas>

This file has been truncated. show original

Leonidas · April 2, 2020, 4:53pm

It showcases how to add mobile controls to a first person camera, is that what you are looking to do?

Ivan_Stratiichuk · April 2, 2020, 5:00pm

Yes, just trying to figure out what will help me to do that asap,

So this code don`t have controllers for movement!?

Leonidas · April 2, 2020, 5:00pm

What do you mean with controllers?

Ivan_Stratiichuk · April 2, 2020, 5:02pm

“Controllers”-Way of how to move firstperson camera in scene using smartphone!?

Leonidas · April 2, 2020, 5:06pm

Well, we call it touch gestures, you touch and move your fingers on your phone’s screen and as a result the camera moves.

Try the example I’ve sent above in your phone.

Ivan_Stratiichuk · April 2, 2020, 5:16pm

Will this code help me to add this touch gestures or not, if yes what do I need to add or what do I need to figure out?