携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情 >
基础材质 MeshBasicMaterial
贴图Map修改材质
// 获取texture加载类
const textureLoader = new THREE.TextureLoader();
// 加载贴图
const doorColorTexture = textureLoader.load('/textures/door/color.jpg')
// 将贴图设置为我们模型的材质map属性
// type1:声明时直接设置
const material = new THREE.MeshBasicMaterial({
map:doorColorTexture
})
// type2:声明后修改对象的属性设置
const material = new THREE.MeshBasicMaterial()
material.map = doorColorTexture;
贴图alphaMap
alphaMap 有点类似与ps中的蒙版,黑色区域为不可见,白色区域为可见;
// 设置alphaMap
material.alphaMap = doorAlphaTexture;
// 当我们修改了alphaMap时发现我们的模型并未发生改变,因为material中有transparent属性
// transparent 定义此材质是否透明,默认为false 当我们改成true时,我们的透明度才有意义
结合map与alphaMap的效果图如下:
注:效果可叠加
修改渲染的面
我们可以通过side设置我们的模型渲染的面,根据我们的需要合理设置;
// 前面
material.side = THREE.FrontSide;
// 双面
material.side = THREE.DoubleSide;
// 背面
material.side = THREE.BackSide;
修改材质颜色
// type1:声明时直接设置
const material = new THREE.MeshBasicMaterial({
color:'pink'
})
// type2:声明后修改对象的属性设置
// 使用该方法时,可能会出现设置无效果的情况,是由于在我们颜色设置时会被转换成Color实例,所以我们需要调用set方法进行设置,也可以直接复制Color实例
const material = new THREE.MeshBasicMaterial()
material.color.set('pink')
material.color = new THREE.Color('pink')
Color实例
Color( r : Color_Hex_or_String, g : Float, b : Float )
表示一个颜色。
对 Color 实例进行遍历将按相应的顺序生成它的分量 (r, g, b)
修改颜色透明度
// 设置材质的透明度 0-1
material.opacity = 0.5
// 我们同样需要把tansparent属性打开
material.transparent = true
法线网格材质 MeshNormalMaterial
这个材质感觉效果很好看,下图为尚未进行任何设置,打开线框和不打开线框的效果;就是很好看呀!!
下一篇 法线网格材质介绍
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧
