一、什么是纹理加载

纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。我们把这张图片放在立方体上。（我通常称为贴图）。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的 map 属性设置为该方法的返回值

1.属性介绍

属性	描述
map	我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL,返回值就是map的属性
alphaMap	alpha地图是一种灰度纹理，它控制着表面的不透明度（黑色：完全透明;白:完全不透明)。默认为null
color	材料的颜色值，默认为白色
combine	将材质表面颜色与环境贴图相结合，默认为THREE.Multiply，如果选择混合模式，则反射率是用来混合两种颜色的
envMap	环境贴图，默认为null
lightMap	灯光贴图，默认为null
lightMapIntensity	灯光贴图的强度，默认为1
lights	材料是否受到光线影响，默认为false
reflectivity	反射率，表面对环境的影响程度，有效范围在0 - 1之间，默认为1
wireframe	是否以线框模式呈现，默认为false

2.代码示例

//纹理加载 (注意load方法的参数为需要加载的素材路径)
 var texture = new THREE.TextureLoader().load('textures/crate.gif')
 //创建材质
 var material = new THREE.MeshBasicMaterial({
            map:texture
        })

二、纹理加载demo (`注意素材位置`)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        overflow: hidden;
    }
</style>
<script src="../../../../lib/three.js"></script>
<body>
<script>
    var camera ,scene, renderer; //声明相机、场景、渲染器
    var mesh; //声明网格对象
    init();
    animate();
    function init(){
        //生成透视投影相机并加入场景
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,0.1,1000);
        camera.position.z = 400;
        scene = new THREE.Scene();

        //纹理加载 (注意load方法的参数为需要加载的素材路径)
        var texture = new THREE.TextureLoader().load('textures/crate.gif')
        //创建立方缓冲几何体
        var geometry = new THREE.BoxBufferGeometry(150,150,150);
        //创建材质

            /*
        alphaMap	alpha地图是一种灰度纹理，它控制着表面的不透明度（黑色：完全透明;白:完全不透明)。默认为null。
        color	材料的颜色值，默认为白色
        combine	将材质表面颜色与环境贴图相结合，默认为THREE.Multiply，如果选择混合模式，则反射率是用来混合两种颜色的
        envMap	环境贴图，默认为null
        lightMap	灯光贴图，默认为null
        lightMapIntensity	灯光贴图的强度，默认为1
        lights	材料是否受到光线影响，默认为false
        map	贴图，默认为null
        reflectivity	反射率，表面对环境的影响程度，有效范围在0 - 1之间，默认为1
        wireframe	是否以线框模式呈现，默认为false
            * */
        var material = new THREE.MeshBasicMaterial({
            map:texture
        })

        //创建立方体对象
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        renderer = new THREE.WebGLRenderer({
            alpha:true,
            antialias:true
        })
        //设置渲染器背景颜色
        renderer.setClearColor("skyblue");
        //设置渲染器像素分辨值
        renderer.setPixelRatio(window.devicePixelRatio);
        //设置渲染器区域
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }
    function animate(){
        requestAnimationFrame(animate);
        //做旋转
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
        renderer.render(scene,camera)
    }
</script>
</body>
</html>