Skybox

A box to surround your scene with.

By the nature of the underlying workings of the Skybox it is required to provide the assets in a specific way. In the example code below, the path /assets/textures/skybox/sky maps to the follwoing files:

  • /assets/textures/skybox/sky_nx.jpg
  • /assets/textures/skybox/sky_ny.jpg
  • /assets/textures/skybox/sky_nz.jpg
  • /assets/textures/skybox/sky_px.jpg
  • /assets/textures/skybox/sky_py.jpg
  • /assets/textures/skybox/sky_pz.jpg

Example

Click to see example!

Example Code

<script lang="ts" context="module">
	import ArcRotateCamera from 'svelte-babylon/components/Cameras/ArcRotateCamera/index.svelte'
	import Canvas from 'svelte-babylon/components/Canvas/index.svelte'
	import HemisphericLight from 'svelte-babylon/components/Lights/HemisphericLight/index.svelte'
	import Scene from 'svelte-babylon/components/Scene/index.svelte'
	import Skybox from 'svelte-babylon/prebuilds/Skybox/index.svelte'
</script>

<Canvas
	antialiasing={true}
	engineOptions={{
		preserveDrawingBuffer: true,
		stencil: true,
	}}
>
	<Scene>
		<HemisphericLight />
		<ArcRotateCamera />
		<Skybox rootUrl="/assets/textures/skybox/sky" />
	</Scene>
</Canvas>
<script lang="ts" context="module">
	import ArcRotateCamera from 'svelte-babylon/components/Cameras/ArcRotateCamera/index.svelte'
	import Canvas from 'svelte-babylon/components/Canvas/index.svelte'
	import HemisphericLight from 'svelte-babylon/components/Lights/HemisphericLight/index.svelte'
	import Scene from 'svelte-babylon/components/Scene/index.svelte'
	import Skybox from 'svelte-babylon/prebuilds/Skybox/index.svelte'
</script>

<Canvas
	antialiasing={true}
	engineOptions={{
		preserveDrawingBuffer: true,
		stencil: true,
	}}
>
	<Scene>
		<HemisphericLight />
		<ArcRotateCamera />
		<Skybox rootUrl="/assets/textures/skybox/sky" />
	</Scene>
</Canvas>
svelte
Last update at: 2023/06/14 13:10:57