我偶然发现了这个网站: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]从我所看到的。
这是过程。
MeshLambertMaterial
BackSided
。确保自发光颜色设置为白色。