【three.js第四课】自定义材料、贴图。

1.先去下载6张不同的图片素材放到项目中。

2.在【three.js第三课】的代码基础上添加自定义的材料

//自定义材料 cubeMaterial 数组
        //map:用于加载图片，THREE.TextureLoader().load('图片的地址')方法引入要放的图片，也可以用16进制的颜色替换：color:0xFFFFFF
        //side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide
        var cubeMaterial = [
            //右
            new THREE.MeshBasicMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
            //左
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.FontSide}),
            //上
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.BackSide}),
            //下
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
            //前
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
            //后
            new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})

        ];

3.将原来的创建材料代码

var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});

改成

var material = new THREE.MeshFaceMaterial(cubeMaterial);//cubeMaterial:为自定义的材料数组的名称

4.运行观察不同方位的显示情况，并修改cubeMaterial 数组中side属性的值，进行观察

5.全部代码：