摘要: three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈。吐槽完毕回归正题。前几天郭先生看到网上有人开发了3D机房,正愁博客没什么写的,于是昨天熬夜也做了一个,今天就把大体的流程告诉萌新们,先说说主要功能模块。 墙体、地面、窗户 阅读全文
posted @ 2020-08-11 13:27 郭先生的博客 阅读(4117) 评论(7) 推荐(5) 编辑
摘要: 今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击博客原文。 这里我们分别引入三个纹理,分别是地球的表面纹理,对应的海拔灰度图,和云朵的纹理。使用表面纹理还是地球的外貌,海拔灰度图给地球添加凹凸效果,云朵纹理给地球添加云朵效果。下面我们说一说代码。 1. 阅读全文
posted @ 2020-08-10 12:06 郭先生的博客 阅读(3063) 评论(6) 推荐(3) 编辑
摘要: 这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能更好地掌握。效果如下图,在线案例请点击博客原文。 这里用到了用到了顶点着色器和片元着色器。 1. 设置几何体 设置一个几何体,对于波浪效果, 阅读全文
posted @ 2020-08-07 09:21 郭先生的博客 阅读(727) 评论(0) 推荐(0) 编辑
摘要: 上一篇郭先生在例子中用到了着色器变量中的uniform和varying。这篇继续结合例子将一下attribute变量,在使用过程中也发现由于three.js的版本迭代,之前的一些属性和参数已经发生了改变,ShaderMaterial也不需要传递attributes属性值,查看源码我们可以看到如果传递 阅读全文
posted @ 2020-08-06 09:06 郭先生的博客 阅读(1249) 评论(4) 推荐(0) 编辑
摘要: 上一篇说顶点着色器和片元着色器的皮毛,这篇郭先生说一说着色器变量,通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击博客原文。 在这个案例之前,我们先复习一下着色器变量 Uniforms是所有顶点都具有相同的值的变量。 比如灯光,雾,和阴影贴图就是被储存在uniforms中的数据。 uni 阅读全文
posted @ 2020-08-05 09:32 郭先生的博客 阅读(1982) 评论(0) 推荐(0) 编辑
摘要: 郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着色器材质,利用好的我们的GPU。这篇说一说glsl内置函数。 1. 和角度相关的函数 下面是一个和角 阅读全文
posted @ 2020-08-04 09:27 郭先生的博客 阅读(1999) 评论(0) 推荐(1) 编辑
摘要: 说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 1. 什么是着 阅读全文
posted @ 2020-08-03 09:06 郭先生的博客 阅读(3203) 评论(4) 推荐(2) 编辑
摘要: 上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击博客原文。话不多说先上图。 1. 初始化一些四元数 首先我们需要一些四元数,因为我们的动画里有很多旋转并且帧动画的旋转要求 阅读全文
posted @ 2020-08-01 11:01 郭先生的博客 阅读(2076) 评论(0) 推荐(1) 编辑
摘要: 上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧。在线案例请点击博客原文。话不多说先上大图 骨骼动画在GUI上面都有体现。制作骨骼动画的步骤在官方案例中已经看到了,这里在回忆一下。骨骼动画的基本步骤 创建一个BufferGeometry,并添 阅读全文
posted @ 2020-07-31 09:47 郭先生的博客 阅读(6370) 评论(1) 推荐(2) 编辑
摘要: 今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画,也不深入讲解,先说说它的实现和原理 阅读全文
posted @ 2020-07-30 09:29 郭先生的博客 阅读(4044) 评论(0) 推荐(2) 编辑