比较在three.js所创建天空盒材料的方法(comparing methods of creati

当谈到在three.js所制作包厢，我已经看到了两个思想不同的学校。假设我们有码

var imagePrefix = "images/mountains-";
var directions  = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
var imageSuffix = ".jpg";
var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );

在这两种方法，一个创建了一个真正的大立方体和应用纹理。所不同的是是否使用着色器。例如：

材料不使用着色器：

var materialArray = [];
for (var i = 0; i < 6; i++)
    materialArray.push( new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
        side: THREE.BackSide
    }));
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBox );

使用着色器材料：

var imageURLs = [];
for (var i = 0; i < 6; i++)
    imageURLs.push( imagePrefix + directions[i] + imageSuffix );
var textureCube = THREE.ImageUtils.loadTextureCube( imageURLs );
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;
var skyMaterial = new THREE.ShaderMaterial( {
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
} );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
scene.add( skyBox );

我自己的非正式性能测试表明采用2048×2048的图像的纹理FPS无显著差异。自由着色器代码更容易（至少对我来说）了解。是否有情况，其中有一个优势，使用基于着色器纹理？

你有一个概念上的误解。

对于WebGL的，这两种方法涉及着色器。 MeshBasicMaterial有已经为你写了一个方便的顶点和片段着色器。

的两个例子之间的主要差别是第二示例使用用于输入的立方图。

如果你已经在使用相同的立方体贴图作为反射材料的环境地图，例如你可以使用这种方法。

第一个例子是另一种方式来渲染天空盒，并且是两个，将与工作的唯一一个CanvasRenderer 。

three.js所r.58