Three.js使用SceneUtils为模型添加多种材质

JavaScript013

Three.js使用SceneUtils为模型添加多种材质,第1张

当我们想要为模型添加多种材质的时候可以通过使用SceneUtils来实现。

该正方体的材质使用了MeshBasicMaterial和MeshLambertMaterial。

通过SceneUtils中createMultiMaterialObject属性来为模型使用多个材质。createMultiMaterialObject的第一个参数是模型对象，第二个参数是材质数组。

有关物体的材质，我们前面用了MeshBasicMaterial来体现。

MeshBasicMaterial就是基础网格材质，它不受光源的影响。而在实际场景中，物体大多都是受光源影响的，也就是漫反射，这时我们就要用到另一个材质函数：MeshLambertMaterial。

Lambert（朗伯）这个单词是亮度单位，词源是lamp（灯），我们来做个例子：

map为默认材质色，添加normalMap法线贴图产生凹凸视觉， 配合roughness数值产生高光。

材质代码：

let map_d=new THREE.TextureLoader().load("常规贴图.jpg")

let map_n=new THREE.TextureLoader().load("法线贴图.jpg")

let material=new THREE.MeshStandardMaterial({

map:map_d,

normalMap:map_n,

roughness:0.1

})

let geometry = new THREE.CircleBufferGeometry( 5, 32 )

let circle = new THREE.Mesh( geometry, material )

scene.add( circle )