【threeJs笔记】3. Three.js贴图Texture

admin

来源：https://blog.csdn.net/weixin_41192637/article/details/109680932

心脏案例 模型图

/** * OBJ文件加载  只加载obj文件中的几何信息，不加载材质文件.mtl */var loader = new THREE.OBJLoader();
// 没有材质文件，系统自动设置Phong网格材质
var mesh = null;
//声明一个网格模型变量loader.load('./heart/model.obj', function(obj) {
  // 控制台查看返回结构：包含一个网格模型Mesh的组Group  
console.log(obj);  
scene.add(obj);  
mesh = obj.children[0];
//获得心脏网格模型  
mesh.scale.set(10, 10, 10);
//网格模型缩放  
// 创建一个纹理加载器  
var textureLoader = new THREE.TextureLoader();...})

设置模型的颜色贴图.map

var texture = textureLoader.load('./heart/color.png');  mesh.material.map = texture;
法线贴图normalMap**设置模型的法线贴图.normalMap，表面细节更丰富，为了压缩模型顶点数量，也就是降低文件大小，3D美术通常会给程序员提供法线贴图。**

  //加载颜色纹理
var textureNormal = textureLoader.load('./heart/normal.png');
mesh.material.normalMap = textureNormal
// 设置深浅程度
mesh.material.normalScale.set(1.5, 1.5)

高光贴图specularMap

**对于心脏模型而言，模型外表面不同区域的粗糙度不同，对光线的镜面反射程度不同，所以可以把这些不同区域的不同光反射信息记录在一个贴图上，即高光贴图.specularMap,设置高光贴图需要高光网格模型材质MeshPhongMaterial。
**

// 设置高光贴图，一个网格模型不同的区域反射光线的能力不同
var textureSpecular = textureLoader.load('./heart/Specular.png');
mesh.material.specularMap = textureSpecular;mesh.material.specular.set(0xffffff);
// 高光反射颜色
mesh.material.shininess = 100;
// 高光高亮程度，默认30
// 设置高光贴图，一个网格模型不同的区域反射光线的能力不同
var textureSpecular = textureLoader.load('./heart/Specular.png');
mesh.material.specularMap = textureSpecular;mesh.material.specular.set(0xffffff);
// 高光反射颜色mesh.material.shininess = 100;
// 高光高亮程度，默认30

环境贴图envMap

通过类CubeTextureLoader来加载六张纹理贴图’px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’。
设置环境贴图.envMap，反射周围环境效果，渲染更逼真。

var textureCube = new THREE.CubeTextureLoader()  .setPath('环境贴图/')  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg');mesh.material.envMap = textureCube;
var textureCube = new THREE.CubeTextureLoader()  .setPath('环境贴图/')  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
mesh.material.envMap = textureCube;

光源设置

渲染模型的时候，合理的设置光源是很必要的，比如光源强度太低，模型就会比较灰暗，光源强度太高，模型会过于明亮。

/** * 光源设置 */
//点光源
var point = new THREE.PointLight(0xffffff, 0.3);
point.position.set(400, 200, 300);
//点光源位置scene.add(point);
//点光源添加到场景中
// 环境光
var ambient = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambient);
// 方向光1
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(400, 200, 300);
scene.add(directionalLight);
// 方向光2
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(-400, -200, -300);
scene.add(directionalLight);

参考 http://www.webgl3d.cn/Three.js/