![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
String_Kun
主攻3D方向的小程序员~
展开
-
基于threejs开发的卡通风格着色器
作为一个大学一直在玩3D的同学,还是应该多写写关于3D的东西,正好把原来做得着色器整理整理,供大家参考也供自己以后回顾吧~ 一般的现实中的物体讲求一个平滑着色,能够使其看起来更加真实,而卡通风格的物体则是让被着色物体显得过渡的不那么好,明暗交界线很明显,这样的风格独树一帜,也运用到了很多卡通风格的游戏当中,我在网上看到的卡通风格着色器基于Unity开发的有很多,这里我来基于thr原创 2017-03-28 20:49:29 · 2910 阅读 · 0 评论 -
使用threejs离屏渲染实现高斯模糊效果
之前的博客里我使用webgl实现了简单的离屏渲染效果,最近在使用threejs库开发项目的时候,想实现点击物体高亮,背景物体虚化的效果。为了实现这个效果,我决定将每帧渲染出来的图片拿出来,进行一次高斯模糊,在把它贴到一个背景板上。 这里面由于使用了离屏渲染就有几点需要注意 1.两组摄像机、两个scene、一个WebGLRenderTarget。原创 2017-12-20 19:18:15 · 7622 阅读 · 2 评论 -
使用threejs点云秀出酷炫的模型效果
前几次用点云去摆放实现图片的效果,这次我决定用点云实现一些模型效果。首先我们知道WebGL底层绘制方式有三种,分别是点绘制,三角形面绘制和线绘制。在threejs中我们可以方便地通过THREE.PointsMaterial设置使用点绘制方式(当然还有THREE.LinesMaterial是专门画线的)。 然后我将我们需要实现的效果分成了四步 1.创建或加载我们转原创 2017-12-01 22:25:15 · 8738 阅读 · 0 评论 -
threejs中PC与手机操作的一些总结
在一些简单的webgl项目中,我们经常碰到的操作就是两指缩放,滑动旋转,这两种操作经常要进行PC和手机的适配,这里总结一下我踩了的一些小小的坑吧~ 1.手机与PC获取屏幕对应点击位置的方法不同: 手机是触摸获取位置,PC是点击鼠标获取位置两者的代码略有不同,这与threejs构建的3D世界没有关系,仅仅是将点击/触摸的位置转换为窗体位置罢了,我在下面总结一下:原创 2017-10-26 16:40:18 · 6938 阅读 · 7 评论 -
使用threejs+tweenjs实现图片炸裂效果
在之前使用threejs实现了点云的效果,后来想了一下还可以通过着色器修改一块板子上每个点的位置实现一些特殊的效果,比如让一个板子炸开~之前点云中点的运动轨迹都是自己计算出来的,后来发现tweenjs这个工具很好用,于是就应用到了这个项目中。 介绍项目之前,先理一理实现炸裂效果的思路 1.创建一个PlaneBufferGeometry对象方便对顶点进行处理,创建一个Shade原创 2017-10-10 20:03:57 · 7568 阅读 · 0 评论 -
使用threejs实现3D全景漫游
最近发现谷歌相机蛮好玩儿的,可以通过拍摄多幅照片将其合成一张全景图,于是我在宿舍中拍摄了宿舍内和阳台的两张全景图,并使用threejs实现了全景漫游。 只是一个简单的全景场景浏览比较简单,就是创建一个球往里面贴一个全景图。为了实现比较好的交互,能够通过点击鼠标实现漫游效果,我对其中的技术进行了一定的思考与总结。 首先我们来总结一下用户的交互过程:打开网页、等待原创 2017-09-27 15:48:23 · 13826 阅读 · 6 评论 -
使用threejs点云秀出酷炫的图片效果(二)
上一次使用粒子系统,通过改变每一个粒子的位置和颜色构成了一副图片,这次我们使用批量操作粒子移动构成放映机的效果。首先需要控制每一个粒子移动,每一个粒子就需要两套位置,第一个位置是起始时粒子所在的位置,第二个位置时结束时粒子所在的位置。为了能使每一个粒子单独进行移动这里还给每个粒子设置了scale速率,当到达1.0时结束移动。 function createPotCloud() {原创 2017-05-09 16:44:17 · 1356 阅读 · 0 评论 -
对threejs官方案例webgl_kinect的思考
在上次按照自己的想法使用粒子系统对图片进行处理之后,我最近又看到了官方案例中,使用粒子使视频呈现出3D效果,既然是官方案例就需要仔细研究一下。这是该案例的实现效果:可以看到屏幕中由粒子构成了一个人在整理桌面的东西,效果十分的酷炫,大家可以在官方案例中看到动态的效果。官方案例地址:https://threejs.org/examples/#webgl_kinect下面是我自己对于原创 2017-05-17 14:39:13 · 3309 阅读 · 0 评论 -
使用threejs点云秀出酷炫的图片效果(一)
最近做项目很忙,好久没写博客了,前几天看到腾讯回忆时光的一个页面,使用了点云拼凑出了照片轮播十分有趣,于是我想用threejs实现这个效果。 首先这件事情分为两步:1.根据图片数据创建对应大小、颜色的点云。2.给点云加上着色器,给渲染管线传递点云变换需要的数据(位置数据,颜色数据)。 今天我们先来实现加载图片并且通过图片数据加载点云: 首先绘制原创 2017-04-17 18:25:41 · 9074 阅读 · 1 评论 -
基于threejs开发的卡通风格着色器(二)
上次给球体添加了卡通风格着色器之后觉得还少些什么,仔细观察网上卡通风格的游戏发现,卡通风格的3D任务往往除了明显不平滑过渡的色块以外,还都有着黑色描边,这次我们就来修改着色器实现描边的效果。 描边特效可以通过很多方法来实现,比如:判断每个面片的朝向,当一条棱既出现在一个面片的正面又出现在反面时,说明该楞是分界线,将其涂黑即可。或者将每个点沿着法线方向延伸一定距离,相当于一个放原创 2017-04-04 16:04:18 · 2535 阅读 · 1 评论 -
在threejs中对3D物体旋转的思考
今天在写threejs时,突然想到一个问题:一个3D物体需要旋转时,一般情况下简单的旋转我都是使用欧拉角,稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转(欧拉角复杂旋转可能会产生的死锁问题),但是在threejs中object3D的旋转方法无论是使用setRotation(沿着x、y、z轴旋转)还是rotateOnAxis(按从原点到任意方向的向量进行旋转)都无法完成沿着一个不经过原点的轴进行原创 2017-03-31 14:36:28 · 14620 阅读 · 1 评论 -
使用threejs实现辉光&大气层效果
最近想使用threejs实现辉光的特效,在查阅了一些资料之后,不仅实现了辉光的特效,还顺带实现了大气层特效,在写着色器的过程中有了一些理解~ 首要目标:为了实现辉光的着色器,我们把辉光分为几个步骤来实现: 1.创建两个球体,一个作为原始物体,一个略大一些作为它的辉光。 2.作为辉光的球体从内到外片元透明度逐渐减小(线性减小或是指数减小都可以)原创 2017-12-06 20:20:25 · 14977 阅读 · 2 评论