通过three.js实现简易3D打印模型切片展示
现在的页面展示要求越来越高,美的展示总能吸引更多的访客。最近在学习3D打印中的切片算法,刚刚入门,发现通过three.js框架可以很好展示出3D切片细节(虽然我做的比较简单)。
//==========================================================
//导入three.js和mygeo.js文件(自定义几何体顶点和三角片信息)
//========================================================== var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor("white");
document.body.appendChild(renderer.domElement);
//上面6行初始化场景、照相机及渲染器========================= var axes = new THREE.AxisHelper(10);
scene.add(axes);
//上面两行画出辅助坐标系 //根据mygeo.js中的信息画自定义几何体
var geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces;
geom.computeFaceNormals();
ma = new THREE.MeshBasicMaterial({color: 'black', wireframe: true});
var G = new THREE.Mesh(geom,ma);
scene.add(G);
//上面7行画出自定义的立体几何体 camera.position.x = 5;
camera.position.y = 6;
camera.position.z = 8;
camera.lookAt(scene.position);
//上面几行设置相机位置 //自定义的三角形片和Z=h截面总有2个交点
for(var h = 0.5;h <= 6;h += 0.5)
{
var intersection = new Array();
for(var F = 0;F < faces.length;F++)
{
var point1 = vertices[faces[F].a];
var point2 = vertices[faces[F].b];
var point3 = vertices[faces[F].c];
var surface = [point1,point2,point3]; if((surface[0].z-h)*(surface[1].z-h)<0) //0-1
{
var m = (h-surface[0].z)/(surface[1].z-surface[0].z);
var x = m * (surface[1].x-surface[0].x) + surface[0].x;
var y = m * (surface[1].y-surface[0].y) + surface[0].y;
var p = [x,y,h];
intersection.push(p);
}
if((surface[0].z-h)*(surface[2].z-h)<0) //0-2
{
var m = (h-surface[0].z)/(surface[2].z-surface[0].z);
var x = m * (surface[2].x-surface[0].x) + surface[0].x;
var y = m * (surface[2].y-surface[0].y) + surface[0].y;
var p = [x,y,h];
intersection.push(p);
}
if((surface[1].z-h)*(surface[2].z-h)<0) //1-2
{
var m = (h-surface[1].z)/(surface[2].z-surface[1].z);
var x = m * (surface[2].x-surface[1].x) + surface[1].x;
var y = m * (surface[2].y-surface[1].y) + surface[1].y;
var p = [x,y,h];
intersection.push(p);
}
} var material = new THREE.LineBasicMaterial({color: "red", linewidth: 6});
var geometry = new THREE.Geometry();
for(var i1=0;i1<intersection.length;i1++)
{
var p1 = new THREE.Vector3();
p1.set(intersection[i1][0],intersection[i1][1],intersection[i1][2]);
geometry.vertices.push(p1);
}
var line = new THREE.Line(geometry,material);
scene.add(line);
} renderer.render(scene, camera);
通过three.js实现简易3D打印模型切片展示的更多相关文章
- 如何制作简单的 3D 打印模型
Hi 大家好! 了解一个方兴未艾,但极为有趣的话题 — 3D 打印 . 为了帮助大家对3D打印有一个初步的感性认识,我在线制作了一款可用于3D打印的model, 大家可以先通过体验这个在线 model ...
- 3D打印技术在医疗上的实际应用与实验室研究
2018-01-17 Chris 免费3D打印模型资源站 预计阅读时间:5-10分钟 关键字:3D打印髋关节.脊柱置换产品,3D打印技术辅助精准截骨,义齿,生物墨水(BioInk),干细胞 随着& ...
- 12只超酷机器人,在家用3D打印搞定!
3D打印最吸引人的地方在于它完全无极限!现在的3D打印已经广范应用在我们的生活.以及工业上的各个领域.最棒的是,DIY玩家可以真正从中受益.我们现在已经可以应用3D打印,在家制作自己的机器人了.如果你 ...
- 《3D打印与工业制造》个人总结 —— 周吉瑞
<3D打印与工业制造>个人总结 ---- 周吉瑞 JERRY_Z. ~ 2020 / 10 / 24 转载请注明出处!️ 目录 <3D打印与工业制造>个人总结 ---- 周吉瑞 ...
- 《3D打印与工业制造》—— 读书笔记
<3D打印与工业制造>-- 读书笔记 原创内容,学习不易,转载请注明出处! 一.读后感-- "WOW" 可以这么说,<3D打印与工业制造>这本书是我第一 ...
- 使用three.js创建3D机房模型-分享一
序:前段时间公司一次研讨会上,一市场部同事展现了同行业其他公司的3D机房,我司领导觉得这个可以研究研究,为了节约成本,我们在网上大量检索,最后找到一位前辈的博文[TWaver的技术博客],在那篇博文的 ...
- Three.js 3D打印数据模型文件(.STL)载入中
3DPrint是现在和未来10年度科技产品的主流之中.广泛的. 对于电子商务类3D打印网站.一个主要功能就是商品3D呈现的方式,那是,3D数据可视化技术. HTML5(WebGL)它可以用于构建3D查 ...
- 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
- [转] 使用Node.js实现简易MVC框架
在使用Node.js搭建静态资源服务器一文中我们完成了服务器对静态资源请求的处理,但并未涉及动态请求,目前还无法根据客户端发出的不同请求而返回个性化的内容.单靠静态资源岂能撑得起这些复杂的网站应用,本 ...
随机推荐
- Flask框架图
- ROS 自定义消息类型方法
流程 1.在package中新建文件夹名为msg 2.在msg文件夹中创建消息(此处以my_msg.msg)为例,注意的是要以msg为后缀名 内容举例如下: int32 data1 float64 d ...
- 服务器断过一次电之后,mysql启动不了了
公司内部服务器,周末会直接拉闸断电,之前也没问题,但这次回来发现mysql启动不了了. service mysqld start 提示: Starting MySQL.The server quit ...
- iOS扩展Extension之Today
1.简介 扩展(Extension)是iOS 8中引入的一个新特性.扩展让app之间的数据交互成为可能.在iOS 8系统之前,每一个app在物理上都是彼此独立的,app之间不能互访彼此的私有数据.而在 ...
- service sshd start启动失败,Badly formatted port number.
在做xhell学习的时候,把端口号修改了,后面忘记修改回 来,导致 [root@MyRoth 桌面]# service sshd start 正在启动 sshd:/etc/ssh/sshd_confi ...
- 依赖注入(DI)
Spring依赖注入(DI)的三种方式,分别为: 1. 接口注入 2. Setter 方法注入 3. 构造方法注入 依赖注入是一种思想,或者说是一种设计模式,在java中是通过反射机制实现,与具 ...
- gradle 排除冲突依赖包
1 , 如何查看jar包依赖源 2 结果显示: 3 排除
- 百度跨域搜索demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 1.关于Python的发展历史你知道吗?
1989,为了度过圣诞假期,Guido开始编写Python语言编译器.Python这个名字来自Guido的喜爱的电视连续剧<蒙蒂蟒蛇的飞行马戏团>.他希望新的语言Python能够满足他在C ...
- JS数组 呼叫团里成员(使用数组元素) myarray[0]
呼叫团里成员(使用数组元素) 我们知道数组中的每个值有一个索引号,从0开始,如下图, myarray变量存储6个人的成绩: 要得到一个数组元素的值,只需引用数组变量并提供一个索引,如: 第一个人的 ...