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?

回答1:

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.

回答2:

Here's the process.

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

来源：https://stackoverflow.com/questions/47858392/how-to-incorporate-a-moving-background-in-three-js

标签

javascript

three.js