How to create SkyBox in Reactjs babylonjs

Questions
1

How to create SkyBox in Reactjs babylonjs

2

Hey you will need to provide us with more info

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

3

in reactjs

4

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:

5 
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}>
                <Scene>
				
                    <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 >
					
					</Skybox>
					
                </Scene>
            </Engine>
        )
	 }
}
6

Adding @brianzinn as I think you are using his tool

2 Likes
7

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={props.name ? `skybox-${props.name}` : 'skybox'} size={props.size ?? 100} infiniteDistance={true} renderingGroupId={0}>
     <standardMaterial name={props.name ? `skybox-material-${props.name}` : 'skybox-material'} backFaceCulling={false} disableLighting={true}>
       <cubeTexture key={`cube-texture-${props.rootUrl}`} rootUrl={props.rootUrl} coordinatesMode={Texture.SKYBOX_MODE} assignTo={'reflectionTexture'} />
     </standardMaterial>
   </box>

export default Skybox
8

hi @brianzinn not working

9

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
10

Hello @brianzinn where am i wrong

11

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:
https://github.com/brianzinn/create-react-app-babylonjs/blob/master/src/withSkybox.js

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

Assets are in the public folder:
https://github.com/brianzinn/create-react-app-babylonjs/tree/master/public/textures

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 (brianzinn.github.io)

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