时间戳

首页 > 解决方案 > 如何在 Three.js 中制作一个有效的天空盒？

javascript - 如何在 Three.js 中制作一个有效的天空盒？

问题描述

我是 Three.js 的新手，我很难找到/理解很多官方的 Three.js 文档。此外，我发现的许多教程/视频至少已经过时 5 年，而且我似乎无法让它们在我的本地电脑上运行（打开时只是一个白屏）。

标签： javascripthtmlcssthree.jsskybox

解决方案

有很多方法。一种方法是加载 equirectangular 纹理并设置 renderer.background：

renderer.background = new THREE.TextureLoader().load('youtextureurl.jpg')

或者在背面的球体上做同样的事情：

scene.add (new THREE.Mesh(new THREE.SphereBufferGeometry(100,32,32), new THREE.MeshBasicMaterial({map:new THREE.TextureLoader().load('youtextureurl.jpg'),side:THREE.BackSide );

设置天空盒后，您可以使用 CubeCamera 拍摄环境快照，然后将 scene.environment 设置为生成的立方体贴图以获得一些环境照明效果。

推荐阅读