使用threejs点云秀出酷炫的模型效果
来源:互联网 发布:unity3d透明材质 编辑:程序博客网 时间:2024/05/17 22:43
前几次用点云去摆放实现图片的效果,这次我决定用点云实现一些模型效果。首先我们知道WebGL底层绘制方式有三种,分别是点绘制,三角形面绘制和线绘制。在threejs中我们可以方便地通过THREE.PointsMaterial设置使用点绘制方式(当然还有THREE.LinesMaterial是专门画线的)。
然后我将我们需要实现的效果分成了四步
1.创建或加载我们转换使用的geometry对象A,B,C(顶点数A>B>C)
2.将网格对象以点的方式绘制出来。
3.将A顶点比B顶点多出的部分进行处理
4.通过Tween.js这个间补动画库进行变换
这里主要的难点就是集中在步骤3上,之前我做过一次顶点位置的转换,两边的顶点数是完全相同的,然而我又想到了两种情况:
1.A顶点数>B
2.A顶点数<B
因为在对顶点进行操作时使用的是强类型数组Float32Array,必须在初始化时就确定数组的长度,所以不能轻易修改,也就是说如果从顶点少的mesh转换到顶点多的mesh必然会有一部分模型覆盖不到。
但是第二种情况,我们可以通过将A顶点数组中多出的部分重复放置到B的顶点位置,也就是说从A转换成B的过程中可能会有很多点叠在一起,但是在视觉效果上还是很好的,下面贴上转换部分的代码:
//创造符合条件的points数组 //con_1要转换的数组 //con_2需要制造的数组 //con_2数组数据 function convertGeo(con_1, con_2, con_2_data) { if(con_1.length > con_2_data.length) { var len = con_1.length - con_2_data.length; for (var i = 0; i < con_2_data.length; i++) { con_2[i] = con_2_data[i]; } for (var j = 0; j < len; j++) { con_2[j + con_2_data.length] = con_2[j]; } } }还有一点要说的就是之前我都是自己写的间补动画,但是要写好的效果十分复杂,后来我发现了Tween.js这个库,用起来十分简单方便,有问题的自己查查源码也就ok了~所以说当自己需要实现一些功能时,可以找找有没有现成的库来用,当然,有空的时候还是要多研究研究源码~
图片效果(变化过程中的图片,还是下载下来好看效果):
Github:https://github.com/StringKun/ThreeJSPotCloud/tree/master/potcloud3
- 使用threejs点云秀出酷炫的模型效果
- 使用threejs点云秀出酷炫的图片效果(一)
- 使用threejs点云秀出酷炫的图片效果(二)
- 使用threejs+tweenjs实现图片炸裂效果
- 使用threejs实现辉光&大气层效果
- 使用threejs离屏渲染实现高斯模糊效果
- THREEJS阴影效果
- Threejs 中建立可看到其内部的房间效果
- threejs 加载stl 或 obj 模型的代码模板
- threejs学习心得(场景的搭建+运动模型导入)
- ThreeJS学习-模型角度限制
- threejs知识点:1.模型分析
- threejs使用概述
- threejs贴图的几个问题
- 基于threejs 的webvr
- threejs
- threejs加载3D模型例子
- threejs 鼠标移动控制模型旋转
- Pygame学习笔记 (1)
- Android的五个进程
- oop思想实现数字时钟
- 【排序】选择排序
- 第三章 函数
- 使用threejs点云秀出酷炫的模型效果
- JVM之类加载机制
- HDU2196 Computer(树形dp或树的直径)
- 23种设计模式(3)-原型模式
- pat b 1035 插入与归并
- 字符编码测试总结
- leetcode--20. Valid Parentheses
- HDU 1231 最大连续子序列(HDU 1003 dp)
- ACdream 1020 The Game about KILL【约瑟夫环+打表规律】