Total beginner need guidance

Questions
1

Hi, i’m a total beginner in javascript, typescript, Babylon and React.

I began learning javascript recently and discovered Babylon.

I started going throught the website/documentation/examples and wanted to try Babylon React Native.

I followed the instructions here: GitHub - BabylonJS/BabylonReactNativeSample and managed to have the app work on my phone connected to my computer.

Step 5 is this:

image
image1281×222 21.4 KB

I don’t know how to do that, tried copy/pasting the simplest example but i can’t make it work.

Is there a tutorial for this somewhere ?

While i keep learning, i would have liked to be able to try what i learn on my phone.

2

Welcome abroad! Happy you’re learning, but we need some more information to be able to help you. :slight_smile:

What example did you copy?

i can’t make it work.

What exactly didn’t work? What do you see in your phone?

3

I tried putting the code from here:

inside useEffect(() => {}

but after looking here : https://github.com/BabylonJS/BabylonReactNative/tree/master/Modules/%40babylonjs/react-native

and in what was already inside the babylon react native template i managed to get to this :

if (engine) {
      const scene = new Scene(engine);
      setScene(scene);

      //scene.createDefaultCamera(true, undefined, true);
      //setCamera(scene.activeCamera!);

      var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene), True;
      camera.setTarget(BABYLON.Vector3.Zero());
      camera.attachControl();

      setCamera(scene.activeCamera!);

      

      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 10, 0), scene);

      var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

      sphere.position = new BABYLON.Vector3(2,1,0);

      var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

      const groundMaterial = new BABYLON.StandardMaterial("Ground Material", scene);

      groundMaterial.diffuseColor = BABYLON.Color3.Red();

      ground.material = groundMaterial;

    }
  }, [engine]);

At first it couldn’t find BABYLON so i had to apparently add this :

import * as BABYLON from '@babylonjs/core';

Now, i finally have a starting point that work.

I’m wondering where to go from here and i have lots of questions.

I’m guessing that following the tutorials from react native : Learn the Basics · React Native

will help me better understand the template but where can i find how to organize a babylon game project code (i come from c++ and python)

Should i put everything in useEffect(() => {} or should i use multiple files ?

I just found this page : GitHub - Symbitic/awesome-babylonjs: A curated list of awesome things related to Babylon.js and i’m planning to buy “Going the Distance with Babylon.js”, do anyone know of any good beginner friendly ressources ?

4

Going to the Distance is a great resource, it will be very helpful :slight_smile: You might also want to take a look at Introduction To Creating Games | Babylon.js Documentation (babylonjs.com) and BabylonJS/SpacePirates: The Space Pirates game is a demo made to celebrate the Babylon.js 5.0 Release. (github.com)