# Environment Maps Usage

**URL:** <https://forum.8thwall.com/t/environment-maps-usage/1653>\
**Category:** Technical Support\
**Tags:** threejs\
**Created:** [June 14, 2024, 10:09am UTC](https://forum.8thwall.com/t/environment-maps-usage/1653 "2024-06-14T10:09:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sergei\_Svistunov](https://avatars.discourse-cdn.com/v4/letter/s/c4cdca/32.png) [@Sergei\_Svistunov](https://forum.8thwall.com/u/Sergei_Svistunov)\
**Post date:** [June 14, 2024, 10:09am UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/1 "2024-06-14T10:09:20Z")

</div>

Hello everyone!

I have a three.js 8th Wall app. And I try to make a loaded to the scene GLTF model look more realistic. I do not use any three.js lights only an environment map. Eventually slightly metal materials of the GLTF model look missing any impact of an environment map. Otherwise, greatly metal materials look good.

Is there anything blocking usage of environment maps with three.js 8th Wall apps?

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [June 14, 2024, 4:19pm UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/2 "2024-06-14T16:19:06Z")

</div>

Please reference the sample project here:

> **[three.js: Realtime Reflections | 8th Wall Playground | 8th Wall](https://www.8thwall.com/playground/cubemap-realtime-threejs)**
>
> This three.js example shows how to apply realtime environment cubemaps to your glb models.

---

<div class="post-metadata">

**Author:** ![Sergei\_Svistunov](https://avatars.discourse-cdn.com/v4/letter/s/c4cdca/32.png) [@Sergei\_Svistunov](https://forum.8thwall.com/u/Sergei_Svistunov)\
**Post date:** [June 17, 2024, 11:09am UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/3 "2024-06-17T11:09:19Z")

</div>

Seems to be nothing blocking. And an issue was related to using of an outdated version of three.js

It would be great to update docs with a current three.js version. At least this one [three.js: Face Effects Template | 8th Wall | 8th Wall](https://www.8thwall.com/8thwall/face-threejs). Not sure who I’m supposed to asking for it

---

<div class="post-metadata">

**Author:** ![Sergei\_Svistunov](https://avatars.discourse-cdn.com/v4/letter/s/c4cdca/32.png) [@Sergei\_Svistunov](https://forum.8thwall.com/u/Sergei_Svistunov)\
**Post date:** [June 17, 2024, 11:12am UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/4 "2024-06-17T11:12:24Z")

</div>

Thank you for response. But I guess a real time feature is not exactly what I was looking for

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [June 17, 2024, 4:31pm UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/5 "2024-06-17T16:31:51Z")

</div>

You can use very similar logic to create a static cubemap. For example

```auto
// Define an 8th Wall XR Camera Pipeline Module that adds a cube to a threejs scene on startup.
export const initScenePipelineModule = () => {
let renderer_ = null
const camTexture_ = new THREE.Texture()
const loader = new THREE.GLTFLoader()

const cubeTextureLoader = new THREE.CubeTextureLoader()
const cubeTexture = cubeTextureLoader.load([
require('./assets/posx.jpg'), // PositiveX
require('./assets/negx.jpg'), // NegativeX
require('./assets/posy.jpg'), // PositiveY
require('./assets/negy.jpg'), // NegativeY
require('./assets/posz.jpg'), // PositiveZ
require('./assets/negz.jpg'), // NegativeZ
])
// Populates a cube into an XR scene and sets the initial camera position.
const initXrScene = ({scene, camera, renderer}) => {
// Enable shadows in the renderer.
renderer.shadowMap.enabled = true
renderer.outputEncoding = THREE.sRGBEncoding
// Add some light to the scene.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
directionalLight.position.set(0, 10, 0)
directionalLight.castShadow = true
scene.add(directionalLight)
// Add some light to the scene.
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
scene.add(ambientLight)
// GLTF Model
loader.load(
require('./assets/jini-ball.glb'),
(gltf) => {
gltf.scene.traverse((o) => {
if (o.isMesh) {
o.material.envMap = cubeTexture
o.castShadow = true
}
})
gltf.scene.position.set(0, 0.5, 0)
gltf.scene.scale.set(3, 3, 3)
scene.add(gltf.scene)
}
)
// Add a plane that can receive shadows.
const planeGeometry = new THREE.PlaneGeometry(2000, 2000)
planeGeometry.rotateX(-Math.PI / 2)
const planeMaterial = new THREE.ShadowMaterial()
planeMaterial.opacity = 0.5
const plane = new THREE.Mesh(planeGeometry, planeMaterial)
plane.receiveShadow = true
scene.add(plane)
// Set the initial camera position relative to the scene we just laid out. This must be at a
// height greater than y=0.
camera.position.set(0, 2, 2)
}
// Return a camera pipeline module that adds scene elements on start.
return {
// Camera pipeline modules need a name. It can be whatever you want but must be unique within
// your app.
name: 'threejsinitscene',
// onStart is called once when the camera feed begins. In this case, we need to wait for the
// XR8.Threejs scene to be ready before we can access it to add content. It was created in
// XR8.Threejs.pipelineModule()'s onStart method.
onStart: ({canvas}) => {
const {scene, camera, renderer} = XR8.Threejs.xrScene() // Get the 3js scene from XR8.Threejs
renderer_ = renderer
initXrScene({scene, camera, renderer}) // Add objects set the starting camera position.
// Sync the xr controller's 6DoF position and camera paremeters with our scene.
XR8.XrController.updateCameraProjectionMatrix(
{origin: camera.position, facing: camera.quaternion}
)
// prevent scroll/pinch gestures on canvas
canvas.addEventListener('touchmove', (event) => {
event.preventDefault()
})
// Recenter content when the canvas is tapped.
canvas.addEventListener(
'touchstart', (e) => {
e.touches.length === 1 && XR8.XrController.recenter()
}, true
)
},
onProcessCpu: ({frameStartResult}) => {
const {cameraTexture} = frameStartResult
// force initialization
const {scene, camera, renderer} = XR8.Threejs.xrScene() // Get the 3js scene from XR8.Threejs
const texProps = renderer.properties.get(camTexture_)
texProps.__webglTexture = cameraTexture
},
}

```

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [June 17, 2024, 4:32pm UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/6 "2024-06-17T16:32:22Z")

</div>

![negx](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/4aca239328922cfaeeaa1575dd2a308683633f4c.jpeg)  
 ![negy](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/a28fa4ec54c94df0534390e259a5f1cdd09bc1bc.jpeg)  
 ![negz](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/048a4c5bb8de633bb5e25849a11bdab939c5853b.jpeg)

Then upload these files for cubemap

---

<div class="post-metadata">

**Author:** ![Ian](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/ian/32/430_2.png) [@Ian](https://forum.8thwall.com/u/Ian)\
**Post date:** [June 17, 2024, 4:32pm UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/7 "2024-06-17T16:32:35Z")

</div>

and these 3 as well. So 6 total  
 ![posx](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/2514e9c1da40e785a3d07e5d876463f0dfe139a0.jpeg)  
 ![posy](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/188d4d4863ac519e2315bd8733809ad7f20dce35.jpeg)  
 ![posz](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/1X/76e4138aaaee3904c023316ce00a480101b52983.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex019/uploads/x8thwall/original/2X/9/9212a857458f1b03a6accb129e0f8cbea408e3e5.png) [@system](https://forum.8thwall.com/u/system)\
**Post date:** [June 21, 2024, 4:32pm UTC](https://forum.8thwall.com/t/environment-maps-usage/1653/8 "2024-06-21T16:32:45Z")

</div>

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.