前面算是有了模型以及控制
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;
其他的话可以参考官网的属性
其他
到这里,我发现这玩意不是那么容易学完的,内容很多。如果你和我一样是刚接触的,多查文档,文档有说明。
到这里,我就想去做我的集装箱了。