CODEWITHSUNDEEP
javascriptthree.js
corporalpoon
corporalpoon

Reputation: 229

How to incorporate a "moving" background in THREE.js

I cam across this site: https://travisscott.com/

As you can see, when you move the camera, the gradient background has different 360 degree shading.

What part of THREE.js would something like this be part of?

Can someone point me in the right direction?

Upvotes: 1

Views: 3002

Answers (2)

Atul Mourya
Atul Mourya

Reputation: 191

Here's the process.

  1. Create the asset - Get a 360 panorama image from some source. Photoshop it to make it blurred.
  2. Create sphere in your Threejs setup. Make its scale 10x heigher than the main model scale
  3. Apply MeshLambertMaterial to it with face sides to be BackSided
  4. Load the 360 image that you edited in your scene
  5. Apply the image as emissiveMap. Make sure that the emissive color is set to white.
  6. Render

Upvotes: 0

DTC
DTC

Reputation: 161

As @gaitat said in their comment above- the background is a cube map wrapped in a sphere. This is just a normal three.js material with a texture map applied. Here is the code from the page cleaned up to be readable:

var backgroundSphere = new THREE.Mesh(
    new THREE.SphereGeometry(30,10,10),
    new THREE.MeshBasicMaterial({
        map: (new THREE.TextureLoader).load("assets/images/textures/pano.jpg"),
        side: c.DoubleSide
    })
);

The shiny material on the model is achieved using the same environment map:

var shinyMaterial = new THREE.MeshStandardMaterial({
    color: 16777215,
    metalness: 1,
    roughness: -1,
    envMap: <A loaded cube texture (the same as the pano image above)>,
    side: c.DoubleSide,
    shading: c.FlatShading
});

There is more information on loading a cube texture in the three.js docs: https://threejs.org/docs/#api/textures/CubeTexture

Page is using: three.js [r79] from what I can see.

Upvotes: 1

Related Questions