前面算是有了模型以及控制

Three.js（三）控制器

接下来就看看材质贴图，实际上这个我小时候就学过了。以前用3mdx建模的时候，概念是一样的。

材质

我这里有一张图

然后呢，我要把它贴到我的box中去

let woodMap = new THREE.TextureLoader().load('./images/wood.png');
//创建一个立方体,我从官网CP的：
//https://threejs.org/docs/index.html?q=box#api/zh/geometries/BoxGeometry
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial(
	{
		map: woodMap
	}
);
let cube = new THREE.Mesh(geometry, material);

效果

纹理控制

前面我们贴图是随便贴的，如果要控制贴图呢？

通常来说，按面向对象的思想，我们要修改对象的内容，对象会提供对应的方法/属性给我们去设置。

参考一下官方文档，Texture

• 旋转

//设置中心点位置，默认是以左下角为中心点的
woodMap.center.set(0.5, 0.5);
//旋转
woodMap.rotation = 45;

• 贴图重复

先看一下重复之前的效果

我贴了一张瓷砖

然后我觉得不太合理，一个面内，我多贴几张

let woodMap = new THREE.TextureLoader().load('./images/china.png');
//设置中心点位置，默认是以左下角为中心点的
woodMap.center.set(0.5, 0.5);
//旋转
//woodMap.rotation = 45;
//重复次数，这个在贴瓷砖的时候，很有用，很影响效果
woodMap.repeat.set(2, 2);
woodMap.wrapS = THREE.RepeatWrapping;
woodMap.wrapT = THREE.RepeatWrapping;

其他的话可以参考官网的属性

其他

到这里，我发现这玩意不是那么容易学完的，内容很多。如果你和我一样是刚接触的，多查文档，文档有说明。

到这里，我就想去做我的集装箱了。