How to create SkyBox in Reactjs babylonjs

How to create SkyBox in Reactjs babylonjs

Hey you will need to provide us with more info

skybox can be created like this: Skyboxes | Babylon.js Documentation

in reactjs

Well please share your code or something? It is like asking how to go to Mars. Without more details it is complicated to help

Provide a repro of what you have, a link to your code

Something :slight_smile:

import React, { Component } from 'react';
import { Scene, Engine,  Box, Sphere, SceneEventArgs, useScene, standartMaterial, Skybox} from 'react-babylonjs';
import { Vector3, MeshBuilder, FreeCamera, HemisphericLight ,Color3} from '@babylonjs/core';

export default class Viewer extends Component {

       render() {
        return (
            <Engine antialias adaptToDeviceRatio width={window.innerWidth} height={window.innerHeight}>
                    <arcRotateCamera name='camera1' alpha={Math.PI / 2} beta={Math.PI / 4} radius={7.0} target={new Vector3(0, 0, 0)} />
                    <hemisphericLight name='light1' intensity={0.7} direction={Vector3.Up()} />
					<Skybox >

Adding @brianzinn as I think you are using his tool


hi @3dObject you just need to pass in a root url:

<Skybox rootUrl={'assets/textures/TropicalSunnyDay'} />

NOTE: if you use a prop and change the rootUrl that it will re-render the skybox.

The Component itself - there is not much to it, if you wanted to make your own (size and name are optional props). The cube-texture reloads when the rootUrl changes:

import React from "react"
import { Texture } from "@babylonjs/core/Materials/Textures"

interface SkyboxProps {
  rootUrl: string
  size?: number
  name?: string

const Skybox: React.FC<SkyboxProps> = (props: SkyboxProps) => 
   <box name={ ? `skybox-${}` : 'skybox'} size={props.size ?? 100} infiniteDistance={true} renderingGroupId={0}>
     <standardMaterial name={ ? `skybox-material-${}` : 'skybox-material'} backFaceCulling={false} disableLighting={true}>
       <cubeTexture key={`cube-texture-${props.rootUrl}`} rootUrl={props.rootUrl} coordinatesMode={Texture.SKYBOX_MODE} assignTo={'reflectionTexture'} />

export default Skybox

hi @brianzinn not working

You are missing just 2 things.

  1. Do not reference the .jpg file itself. You are referencing a rootUrl that contains all the sides of the cube texture.
  2. You need to place those assets into the ‘public’ folder, so they will be served.

Check out this playground - it’s one of the official examples:
Local cubemaps | Babylon.js Playground

rootUrl is a constructor parameter containing the root name of the 6 images:
CubeTexture - Babylon.js Documentation

1 Like

Hello @brianzinn where am i wrong

You need to send the rootUrl to the Skybox component. You don’t have any images for the skybox in your repository. Put them in the public directory or reference external. Here is a working example from the javascript starter:

/* clicking the button cycles through skybox images */
<Skybox rootUrl={SkyboxScenes[Math.abs(skyboxIndex) % SkyboxScenes.length].texture} />

Assets are in the public folder:

The example uses both a .dds file and the 6 images _nx, _ny, etc.

You can try it out here by clicking the DOM buttons or the 3D buttons:
babylons skybox (

Also, you have likely an error in your interface definition unless you only want to allow one specific value for the rootUrl and have TypeScript prevent other values. The interface definition isn’t for values, so where you put “'assets/skybox” will not work to pass that value through. Interface and Type definitions are erased, so will not end up in the code that you run. It will restrict allowed values to only that specific value. It’s usually used with a discriminated union like { rootUrl: ‘assets/textures’ | ‘assets/images’ }, so just leave it as ‘string’ to allow any values and then pass in the rootUrl to the Skybox component as in the example that I shared.

1 Like