How do I make a threejs scene background with react-three-fiber

[eldrgeek]

I have a project that I've built using 3JS using a CubeTextrure as background. I've tried doing it with three-fiber but it does not work.
Here's the working code:

import * as THREE from "three";

export default function background(scene) {
  var urls = [0, 1, 2, 3, 4, 5].map(n => `./3072_${n}.jpg`);

  var reflectionCube = new THREE.CubeTextureLoader().load(urls);
  var refractionCube = new THREE.CubeTextureLoader().load(urls);
  refractionCube.mapping = THREE.CubeRefractionMapping;

  scene.background = reflectionCube;
}

Here's my attempt to translate to react-three-fiber

import React from "react"
import { useThree, useLoader } from "react-three-fiber"
import { CubeTextureLoader, CubeRefractionMapping } from "three"
export default function CubeMap() {
  const { scene } = useThree()
  let urls = [0, 1, 2, 3, 4, 5].map(n => `./3072_${n}.jpg`)

  let reflectionCube = useLoader(CubeTextureLoader, urls)
  let refractionCube = useLoader(CubeTextureLoader, urls)
  refractionCube.mapping = CubeRefractionMapping
  scene.background = reflectionCube
  return <React.Fragment>{null}</React.Fragment>
}

Here's a link to the working project in CodeSandbox
Here is a link to the react-three-fiber version

[Fasani]

I think it would be like this, basically wrap any kind of AJAX request in a useEffect.

  const { scene } = useThree()
  useEffect(() => {
    const loader = new THREE.CubeTextureLoader()
    loader.load(
      ['room.jpeg', 'room.jpeg', 'room.jpeg', 'room.jpeg', 'room.jpeg', 'room.jpeg'],
      cubeTexture => {
        scene.background = cubeTexture
      },
      [scene.background]
    )
  })

Example:
https://codesandbox.io/s/r3f-basic-demo-1igje?file=/src/index.js

[drcmda]

here's a similar demo with reflection: https://codesandbox.io/s/r3f-ibl-envmap-normalmap-p5zf9

[Fasani]

here's a similar demo with reflection: https://codesandbox.io/s/r3f-ibl-envmap-normalmap-p5zf9

@drcmda I have 2 questions:

1. When you do return null on the Environment function the concept here is that nothing is returned to the canvas but you do in fact get all the nice side effects from modifying the scene etc, correct?

2. Inside the useEffect what is the idea behind returning a function there at the end if there is a background passed as a prop? Why is that needed? (I understand it to be a cleanup function?)

[drcmda]

null is a valid react element, react allows elements, components, strings, numbers and null. null displays nothing. works in react-dom and r3f, all reconcilers. the component is a logical component, it has no visual representation.

yes, when you return a function in useEffect it's going to be called on unmount or according to the dependencies , [...]). in this case it restores the background, though it would be better if it first stores the previous values. then you could mount/unmount the environment indiscriminately and it becomes truly re-usable.

[eldrgeek]

Wow @drcmda and @Fasani this is wonderful. Fast response and great ideas for the reflection. Can hardly wait to turn my current project to use react-three-fiber.

I'm working with a couple of groups of entertainers and the goal is to provide the closest illusion possible to a live musical or theatrical performance. Instead of people singing or playing in little boxes on a square screen, created in post-production, we want to put them "on stage" and synchronized in near real-time.

A goal is to give the audience the feeling they are singing-along

If you are interested or know any people or groups that would like to help, please let me know

Here's a link to a 30-second tour video

+...

[drcmda]

nice project! keep us posted if you like, if you have the fundamentals going i can share your github repo with react developers on twitter, maybe you find some contributors.

[Fasani]

@eldrgeek I attended a few live events via AltSpace early on. Here is a link to such an event:
https://youtu.be/6Nu5cPqZFF8

Also here are some upcoming events:
https://account.altvr.com/events/featured

Usually what happens is that you end up in an environment with X number of people. I attended a stress test with several hundred people but it was horrible, it was also a world record. ‘Most number of people in a single VR instance’. Usually you end up in an instance with 40 or so people.

I appreciate that it might not be what your trying to achieve but I do think it’s interesting for your research perhaps....