纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。我们把这张图片放在立方体上。（我通常称为
贴图）。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的 map 属性设置为该方法的返回值
| 属性 | 描述 |
|---|---|
| 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 |
//纹理加载 (注意load方法的参数为需要加载的素材路径)
var texture = new THREE.TextureLoader().load('textures/crate.gif')
//创建材质
var material = new THREE.MeshBasicMaterial({
map:texture
})
注意素材位置) <!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>
