现在的页面展示要求越来越高,美的展示总能吸引更多的访客。最近在学习3D打印中的切片算法,刚刚入门,发现通过three.js框架可以很好展示出3D切片细节(虽然我做的比较简单)。

  1. //==========================================================
  2. //导入three.js和mygeo.js文件(自定义几何体顶点和三角片信息)
  3. //==========================================================
  4.  
  5. var scene = new THREE.Scene();
  6. var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
  7. var renderer = new THREE.WebGLRenderer();
  8. renderer.setSize(window.innerWidth,window.innerHeight);
  9. renderer.setClearColor("white");
  10. document.body.appendChild(renderer.domElement);
  11. //上面6行初始化场景、照相机及渲染器=========================
  12.  
  13. var axes = new THREE.AxisHelper(10);
  14. scene.add(axes);
  15. //上面两行画出辅助坐标系
  16.  
  17. //根据mygeo.js中的信息画自定义几何体
  18. var geom = new THREE.Geometry();
  19. geom.vertices = vertices;
  20. geom.faces = faces;
  21. geom.computeFaceNormals();
  22. ma = new THREE.MeshBasicMaterial({color: 'black', wireframe: true});
  23. var G = new THREE.Mesh(geom,ma);
  24. scene.add(G);
  25. //上面7行画出自定义的立体几何体
  26.  
  27. camera.position.x = 5;
  28. camera.position.y = 6;
  29. camera.position.z = 8;
  30. camera.lookAt(scene.position);
  31. //上面几行设置相机位置
  32.  
  33. //自定义的三角形片和Z=h截面总有2个交点
  34. for(var h = 0.5;h <= 6;h += 0.5)
  35. {
  36. var intersection = new Array();
  37. for(var F = 0;F < faces.length;F++)
  38. {
  39. var point1 = vertices[faces[F].a];
  40. var point2 = vertices[faces[F].b];
  41. var point3 = vertices[faces[F].c];
  42. var surface = [point1,point2,point3];
  43.  
  44. if((surface[0].z-h)*(surface[1].z-h)<0) //0-1
  45. {
  46. var m = (h-surface[0].z)/(surface[1].z-surface[0].z);
  47. var x = m * (surface[1].x-surface[0].x) + surface[0].x;
  48. var y = m * (surface[1].y-surface[0].y) + surface[0].y;
  49. var p = [x,y,h];
  50. intersection.push(p);
  51. }
  52. if((surface[0].z-h)*(surface[2].z-h)<0) //0-2
  53. {
  54. var m = (h-surface[0].z)/(surface[2].z-surface[0].z);
  55. var x = m * (surface[2].x-surface[0].x) + surface[0].x;
  56. var y = m * (surface[2].y-surface[0].y) + surface[0].y;
  57. var p = [x,y,h];
  58. intersection.push(p);
  59. }
  60. if((surface[1].z-h)*(surface[2].z-h)<0) //1-2
  61. {
  62. var m = (h-surface[1].z)/(surface[2].z-surface[1].z);
  63. var x = m * (surface[2].x-surface[1].x) + surface[1].x;
  64. var y = m * (surface[2].y-surface[1].y) + surface[1].y;
  65. var p = [x,y,h];
  66. intersection.push(p);
  67. }
  68. }
  69.  
  70. var material = new THREE.LineBasicMaterial({color: "red", linewidth: 6});
  71. var geometry = new THREE.Geometry();
  72. for(var i1=0;i1<intersection.length;i1++)
  73. {
  74. var p1 = new THREE.Vector3();
  75. p1.set(intersection[i1][0],intersection[i1][1],intersection[i1][2]);
  76. geometry.vertices.push(p1);
  77. }
  78. var line = new THREE.Line(geometry,material);
  79. scene.add(line);
  80. }
  81.  
  82. renderer.render(scene, camera);

通过three.js实现简易3D打印模型切片展示的更多相关文章

  1. 如何制作简单的 3D 打印模型

    Hi 大家好! 了解一个方兴未艾,但极为有趣的话题 — 3D 打印 . 为了帮助大家对3D打印有一个初步的感性认识,我在线制作了一款可用于3D打印的model, 大家可以先通过体验这个在线 model ...

  2. 3D打印技术在医疗上的实际应用与实验室研究

    2018-01-17 Chris 免费3D打印模型资源站 预计阅读时间:5-10分钟 关键字:3D打印髋关节.脊柱置换产品,3D打印技术辅助精准截骨,义齿,生物墨水(BioInk),干细胞   随着& ...

  3. 12只超酷机器人,在家用3D打印搞定!

    3D打印最吸引人的地方在于它完全无极限!现在的3D打印已经广范应用在我们的生活.以及工业上的各个领域.最棒的是,DIY玩家可以真正从中受益.我们现在已经可以应用3D打印,在家制作自己的机器人了.如果你 ...

  4. 《3D打印与工业制造》个人总结 —— 周吉瑞

    <3D打印与工业制造>个人总结 ---- 周吉瑞 JERRY_Z. ~ 2020 / 10 / 24 转载请注明出处!️ 目录 <3D打印与工业制造>个人总结 ---- 周吉瑞 ...

  5. 《3D打印与工业制造》—— 读书笔记

    <3D打印与工业制造>-- 读书笔记 原创内容,学习不易,转载请注明出处! 一.读后感-- "WOW" ​ 可以这么说,<3D打印与工业制造>这本书是我第一 ...

  6. 使用three.js创建3D机房模型-分享一

    序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...

  7. Three.js 3D打印数据模型文件(.STL)载入中

    3DPrint是现在和未来10年度科技产品的主流之中.广泛的. 对于电子商务类3D打印网站.一个主要功能就是商品3D呈现的方式,那是,3D数据可视化技术. HTML5(WebGL)它可以用于构建3D查 ...

  8. 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

  9. [转] 使用Node.js实现简易MVC框架

    在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...

随机推荐

  1. 【JZOJ6378】小w与数字游戏(game)

    description analysis 对于\(n\)很大,一眼看出来肯定有两个相等的数减出来是\(0\),答案肯定是\(0\) 其实只要\(n>7\),由于斐波那契数列,肯定能有几个数的和减 ...

  2. 校园商铺-4店铺注册功能模块-8店铺注册之Controller层的改造

    不合理的地方: 1. 并不需要将InputStream转换成File类型,直接将InputStream传进入交给CommonsMultipartfile去处理就可以了 如果做这样的转换,每次都需要生成 ...

  3. .NETFramework:template

    ylbtech-.NETFramework: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://y ...

  4. laravel请求处理管道例子

    例子: <?php interface Middleware{ public static function handle (Closure $next);} class VerifyCsrfT ...

  5. winform的datagridview控件滚动更新数据

    范例源码下载地址:http://files.cnblogs.com/files/luoxiaozhao/PrintDemo.rar

  6. 修改 ulimit 参数

    sudo vim /etc/security/limits.conf 文件下加: * hard nofile 999999 * soft nofile 999999 * soft nproc 1024 ...

  7. 解决VirtualBox下关于CentOS7网络配置问题

    描述:安装了centos7,发现无法ping通网络,根据一些网上的建议,进行了一些修改,修改配置文件(/etc/sysconfig/network-scripts/ifcfg-enq03 ),但并没有 ...

  8. sql 字符串连接

    const string FMCG_BASH = "清除重复商品"; var sqls = new List<string>(); //// Fmcg sqls.},R ...

  9. wpf 纯样式写按钮

    <!--自定义按钮样式--> <LinearGradientBrush x:Key="LinearGradientBlueBackground" EndPoint ...

  10. Echarts——更改仪表盘方向和颜色

    做小项目需要用到仪表盘,官方给出的颜色设置如下: 而我想要如下样式的: 最后,经过一番折腾算是搞成了如下样式效果: 要达到上面效果关键在于设置Echarts的如下两处js代码: 1.大小值要颠倒,因为 ...