Three.js 天空盒未加载

Question

我是 Three.JS 的新手，似乎无法让天空盒出现在我的场景中。我的代码没有收到任何错误，这让我很困惑。任何帮助将不胜感激。

function createSky(){

    var imageList = "CubeMap"

    THREE.ImageUtils.crossOrigin = '';
    var faces  = ["HDR0001", 
                  "HDR0002", 
                  "HDR0003", 
                  "HDR0004", 
                  "HDR0005"]; 

    var imgType = ".jpg";
    var skyGeo  = new THREE.CubeGeometry (500, 500, 500);
    var matFacesArray = [];

    for (var i = 0; i < 6; i++) {
         matFacesArray.push( new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture( imageList + faces[i] + imgType ),        
            side: THREE.BackSide
         }));

    }      

    var sky = new THREE.MeshFaceMaterial ( matFacesArray );
    var skyBox = new THREE.Mesh ( skyGeo, sky );
    scene.add ( skyBox );    

}

Answer 1

您在哪里查看 warnings/errors 的日志？似乎很奇怪你没有得到任何反馈，因为 THREE.ImageUtils.loadTexture 已被弃用，请使用 TextureLoader.load 而不是 ，如果你使用的是 3 的更高版本，则应该显示此警告js.

另外，你用的是什么浏览器？例如，我发现 Firefox 在显示纹理方面通常比 Chrome 更慷慨。这与跨源图像加载有关，当您尝试在本地运行您的代码时可能会出现问题。

Three.js 天空盒未加载

Three.js skybox not loading

javascript

three.js

skybox