Searching a boilerplate with joystick and camera movement on mobile

Questions
1

Hi,

I’m searching a boilerplate with joystick who allow a player to move in a 3d world for a mobile game.

Have you this interesting link for a beginner like me ?

2

This boilerplate has many branches demonstrating different concepts.
Sean-Bradley/Three.js-TypeScript-Boilerplate: Three.js TypeScript Boilerplate (github.com)

The ballgame branch is a minigame demonstrating sockets, server side cannonjs as well as a mobile user interface using joysticks.

You can visit it in your mobile to test. https://ballgame.sbcode.net

If you want the code,

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
npm install -g typescript
git checkout ballgame
npm install
npm run dev

Visit http://127.0.0.1:3000 using your local pc.
To test on your mobile, from your local network, visit http://whatever-the-ipaddress-is-of-your-dev-server-on-your-local-network:3000
On my network it would be, for example,
http://192.168.1.123:3000

I think the ballgame branch is a big step to jump into if you have no experience, but look at how the xycontroller is used and referenced within the code.
It only appears if your useragent is Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini

3

Thanks a lot, i take time to read all this webpage very interesting :slight_smile:
But after quickly read i don’t see any mention of a joystick, just orbitcontrol and that i know it.

i have took this and be able to work with it : Create A Onscreen Joystick With Pure JavaScript - JoyStick.js | CSS Script

My problem is to set the joystick on the mobile view…
On desktop, no problem :

01
011184×552 79.3 KB

but on mobile view my joystick is at the top of the view and my view is scrollable :

02
022058×874 127 KB

However i have a resize function :

    document.addEventListener("contextmenu", function (e) {
         e.preventDefault();
         window.addEventListener('resize', onWindowResize, false);
     });

 function onWindowResize() {

     camera.aspect = window.innerWidth / window.innerHeight;

     camera.updateProjectionMatrix();

     renderer.setSize(window.innerWidth, window.innerHeight);

 }

I don’t know a lot about html :frowning: so my html file is like this (it’s probably the problem)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<div style="width: 250px">
  <div id="base" style="position: relative; left:320px; top:220px;">
    <img src="images/joystick-base.png" />
  </div>
  <div id="stick" style="position: relative; left:320px; top:220px;">
    <img src="images/joystick-red.png" />
  </div>
</div>
<div id="status">
  <!-- Joystick -->
</div>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.24.1/phaser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.js"></script>
  <script type="text/javascript" src="TrackballControls.js"></script>
  <script type="text/javascript" src="js/TweenMax.min.js"></script>
</head>
<body id="body">
  <script type="text/javascript" src="joystick.js"></script>
  <script type="text/javascript" src="main.js"></script>
4

Do you see the 2 xycontollers?

image
image1125×2436 304 KB