心脏在线预览(次时代模型)

本文是Three.js电子书的14.6节

本节课加载一个心脏的次时代模型，模型包含颜色贴图.map、法线贴图.normalMap、高光贴图.specularMap、环境贴图.envMap，关于这些贴图的相关属性可以查看高光网格模型材质的文档MeshPhongMaterial。

贴图普通颜色纹理贴图map法线贴图normalMap高光贴图specularMap环境贴图envMap提供RGB值减少模型顶点数量，节约计算资源，加快传输速度一个网格模型不同的区域反射光线的能力不同反射周围环境，效果更逼真

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RikJjZUe-1575356893237)(0.gif)]

心脏次时代模型加载设置

/*** OBJ文件加载  只加载obj文件中的几何信息，不加载材质文件.mtl*/
var loader = new THREE.OBJLoader();
// 没有材质文件，系统自动设置Phong网格材质
var mesh = null; //声明一个网格模型变量
loader.load('./heart/model.obj', function(obj) {// 控制台查看返回结构：包含一个网格模型Mesh的组Groupconsole.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，表面细节更丰富，为了压缩模型顶点数量，也就是降低文件大小，3D美术通常会给程序员提供法线贴图。

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

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

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

通过类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 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);

Three.js心脏在线预览(次时代模型)相关推荐

springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...
基于ASP.NET MVC 利用(Aspose+Pdfobject.js) 实现在线预览Word、Excel、PPT、PDF文件
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak VS2010版本以及以上版本源码下载 ...
前端js实现在线预览pdf、word、xls、ppt等文件
昨天遇到一个需求,公司的视频项目都是视频类型,如果是文件类型就直接打开预览,或者下载查看项目把请求的资源都作为视频资源处理,直接赋值给 video 标签解析.所以我新增了一个功能函数,方法很简单文 ...
img pdf 展示_pdf.js实现图片在线预览
项目需求前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
java集成pdf.js实现pdf文件在线预览
最近项目需要实现在线预览pdf文件功能,找来找去,发现有个pdf.js的类库挺好用,直接用js实现在线预览. pdf.js是开源项目,github的地址: https://github.com/moz ...
java pdf 预览_pdf.js实现图片在线预览
项目需求前段时间项目中遇到了一个模块,是关于在线预览word文档(PDF文件)的,所以,找了很多插件,例如,pdf.js,pdfobject.js框架,但是pdfobject.js框架对于IE浏览器 ...
js在线预览pdf文件
js在线预览PDF文件一.效果预览二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...
html做在线预览pdf文件,html中在线预览pdf文件之pdf在线预览插件
html中在线预览pdf文件之pdf在线预览插件最近遇到一个需求,要在html页面查看pdf生成的pdf文件! 翻来覆去找到两种办法 ,最后采用了jquery.media.js插件方式一将pdf ...

Three.js心脏在线预览(次时代模型)

心脏在线预览(次时代模型)

心脏次时代模型加载设置

Three.js心脏在线预览(次时代模型)相关推荐

最新文章

热门文章