如何在THREE.js中加入“移动”背景

Posted 2021-05-02

我偶然发现了这个网站：qazxsw poi

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

THREE.js的哪一部分会成为这样的一部分？

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

答案

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

https://travisscott.com/

使用相同的环境贴图实现模型上的闪亮材质：

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

有关在three.js文档中加载立方体纹理的更多信息：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 [r79]从我所看到的。

另一答案

这是过程。

1. 创建资源 - 从某个来源获取360全景图像。 Photoshop它使它模糊。
2. 在Threejs设置中创建球体。使其规模比主模型规模高10倍
3. 将https://threejs.org/docs/#api/textures/CubeTexture应用到脸部两侧为MeshLambertMaterial
4. 加载在场景中编辑的360图像
5. 将图像应用为BackSided。确保自发光颜色设置为白色。
6. 给予