CubeTexture 立体纹理

—> Texture

立体纹理是当材质 Material 使用 envMap 属性时, 能够反映出周围空间景观的能力. 这种反映不一定是反射 CubeReflectionMapping, 还可以是折射 CubeRefractionMapping, 修改下面演示便可看到. 其实并非是真正的反光, 而是把一系列的纹理贴在物体上, 假装反光. 需经过以下这3个步骤:
(1) 通过 CubeTextureLoader 下载6张天空盒图片:px、nx、py、ny、pz、nz (→, ←, ↑, ↓, 前, 后);
(2) 新建一 CubeTexture 对象, 把 CubeTextureLoader.load() 下载后的值赋给它, 并用它来装饰场景 background;
(3) 把 CubeTexture 对象传递改材质的 envMap.

function CubeTexture( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) { } var loader = new THREE.CubeTextureLoader(); loader.setPath('../assets/textures/skybox/'); var cubeTexture = loader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']); scene.background = cubeTexture; var material = new THREE.MeshBasicMaterial( {color:0xffffff, envMap: cubeTexture });

Attributes

isCubeTexture : Boolean

Default value : true (只读)
Description : 类型是否为CubeTexture.

flipY : Boolean

Default value : false
Description : 是否翻转图像的 y 轴以匹配 WebGL 的纹理坐标.

images : Array

Default value : []
Description : 图片数组, 格式形如 ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], 方向是:→, ←, ↑, ↓, 前, 后. 可从网站 http://www.humus.name/index.php?page=Textures 下载

mapping : Integer

Default value : THREE.CubeReflectionMapping
Description : 物体如何展示图像.