Hello guys 
I’m a React developer, totally new to Babylon.js but will be using it for my next project so trying to get stuck in!
I have taken a look at the docs, and particularly this.
I’ve been successful in creating a scene and drawing simple objects.
The issue is, I cannot import a gLTF model. I get a 404 not found response every time. Presumably the issue is the rootUrl pathname but I cannot get it right.
Here is my code below…
(this is slightly simplified. In my actual code I’m wrapping Model in a HOC using Suspense to show a loading state, but as I can’t even get the pathname right I figured simple is easier 
)
import React, { useRef, useState } from 'react';
import {
Engine,
Scene,
useBeforeRender,
useClick,
useHover,
} from 'react-babylonjs';
import { Vector3, Color3 } from '@babylonjs/core';
const DefaultScale = new Vector3(1, 1, 1);
const BiggerScale = new Vector3(1.25, 1.25, 1.25);
const SpinningBox = ({ name, position, color, hoveredColor }) => {
// access Babylon scene objects with same React hook as regular DOM elements
const boxRef = useRef(null);
const [clicked, setClicked] = useState(false);
useClick(() => setClicked(() => !clicked), boxRef);
const [hovered, setHovered] = useState(false);
useHover(
() => setHovered(true),
() => setHovered(false),
boxRef
);
// This will rotate the box on every Babylon frame.
const rpm = 5;
useBeforeRender((scene) => {
if (boxRef.current) {
// Delta time smoothes the animation.
const deltaTimeInMillis = scene.getEngine().getDeltaTime();
boxRef.current.rotation.y +=
(rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
}
});
return (
<box
name={name}
ref={boxRef}
size={2}
position={position}
scaling={clicked ? BiggerScale : DefaultScale}
>
<standardMaterial
name={`${name}-mat`}
diffuseColor={hovered ? hoveredColor : color}
specularColor={Color3.Black()}
/>
</box>
);
};
export const InteractiveMap = () => (
<div>
<Engine antialias adaptToDeviceRatio canvasId="babylonJS">
<Scene>
<arcRotateCamera
name="camera1"
target={Vector3.Zero()}
alpha={Math.PI / 2}
beta={Math.PI / 4}
radius={8}
/>
<hemisphericLight
name="light1"
intensity={0.7}
direction={Vector3.Up()}
/>
<Model sceneFilename="scene.gltf"
rootUrl = './'
position = { new Vector3(0.02, 0, 0) }
/>
<SpinningBox
name="left"
position={new Vector3(-2, 0, 0)}
color={Color3.FromHexString('#EEB5EB')}
hoveredColor={Color3.FromHexString('#C26DBC')}
/>
<SpinningBox
name="right"
position={new Vector3(2, 0, 0)}
color={Color3.FromHexString('#C8F4F9')}
hoveredColor={Color3.FromHexString('#3CACAE')}
/>
</Scene>
</Engine>
</div>
);
export default { InteractiveMap };
The scene.gltf file is currently located in the same folder as the InteractiveMap component.
If anyone can help, that would be great!
Many thanks and I look forward to playing more with this when I sort the import issue 
