# Simple skybox and cube texture

**URL:** https://discourse.vtk.org/t/simple-skybox-and-cube-texture/14772
**Category:** Web
**Tags:** vtkjs
**Created:** [October 27, 2024, 2:56pm UTC](https://discourse.vtk.org/t/simple-skybox-and-cube-texture/14772 "2024-10-27T14:56:27Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![millerjammer](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/e9c0ed/32.png) [@millerjammer](https://discourse.vtk.org/u/millerjammer)
#### Post date: [October 27, 2024, 2:56pm UTC](https://discourse.vtk.org/t/simple-skybox-and-cube-texture/14772/1 "2024-10-27T14:56:27Z")

</div>

I’m relatively new to vtk.js but I’m trying to implement a simple skybox. That wasn’t working so I created a cube, which works when applying a texture created from a canvas. However, I’m trying to apply images but only two sides of the cube render an image. The skybox doesn’t seem to render at all with images or a simple canvas. I’m somewhat lost down the rabbit hole missing something simple and would appreciate some direction. I created a code pen that should be a 6-sided textured cube in a skybox but is rendered as a two sided textured cube and no skybox [here](https://codepen.io/James-Miller-the-bold/pen/ZEgvjqM).

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [October 28, 2024, 7:01am UTC](https://discourse.vtk.org/t/simple-skybox-and-cube-texture/14772/2 "2024-10-28T07:01:08Z")

</div>

There are 2 skybox examples:

- [vtk.js](https://kitware.github.io/vtk-js/examples/SkyboxViewer.html)
- [vtk.js](https://kitware.github.io/vtk-js/examples/DeviceOrientationToCamera.html)

Did you check them out ?

---

<div class="post-metadata">

### Author: ![millerjammer](https://discourse.vtk.org/letter_avatar_proxy/v4/letter/m/e9c0ed/32.png) [@millerjammer](https://discourse.vtk.org/u/millerjammer)
#### Post date: [October 28, 2024, 10:44pm UTC](https://discourse.vtk.org/t/simple-skybox-and-cube-texture/14772/3 "2024-10-28T22:44:26Z")

</div>

Thank you! I had not seen the DeviceOrientationToCamera example. The setGenerate3DTextureCoordinates(true); is a big help. It seems that since my image is just a plain 2D jpeg images it looks like I need to perform some kind of transformation by a combination of drawing to a canvas, creating an ImageData and using setDirection or possibly using Transform and MatrixBuilder. Is that somewhat the direction? Is there a preferred method given a plain 2D jpeg image?

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [October 29, 2024, 7:16am UTC](https://discourse.vtk.org/t/simple-skybox-and-cube-texture/14772/4 "2024-10-29T07:16:15Z")

</div>

The example DeviceOrientationToCamera does not seem to use `setDirection`. All that is required is 3D Texture coordinates AND 6 textures to add to a cube.
