如何融入“动"?THREE.js 中的背景 [英] How to incorporate a "moving" background in THREE.js

问题描述

我浏览了这个网站:https://travisscott.com/

如您所见，当您移动相机时，渐变背景具有不同的 360 度阴影.

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

像这样的东西会属于 THREE.js 的哪一部分?

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

有人能指出我正确的方向吗?

Can someone point me in the right direction?

推荐答案

正如@gaitat 在上面的评论中所说 - 背景是一个包裹在球体中的立方体贴图.这只是一个普通的 Three.js 材质，应用了纹理贴图.这是页面中的代码清理后可读:

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
});

在three.js 文档中有更多关于加载立方体纹理的信息:https://threejs.org/docs/#api/textures/CubeTexture

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

据我所知，页面正在使用:three.js [r79].

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

这篇关于如何融入“动"?THREE.js 中的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！