摘要:上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判定,最后是获胜的判定。 1. 根据数据渲染陷阱和目标区域 首先我们P一张底图和陷阱图,如下图 就像这样,然后就是根据数据渲染陷阱和目标区域了 阅读全文
posted @ 2020-08-20 14:29 郭先生的博客 阅读(294) 评论(0) 推荐(0) 编辑
摘要:今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢。玩法可以看上面的连接,下面附几张图。线案例请点击博客原文。 游戏规则不懂得可以看自行百度哈,其实玩起来还挺有难度的。关于这个问题,对于新手来说,主要需要克服两个困难。一是这个模型的旋转轴不是固定的,每一次的旋转都是 阅读全文
posted @ 2020-08-19 09:50 郭先生的博客 阅读(277) 评论(0) 推荐(0) 编辑
摘要:最近有three网友,问我要不要学习blender,其实我感觉学习一下也无妨,不过花大量时间精通,尚可不必,术业有专攻给别人留一条路吧,哈哈。那我我们就是用ThreeBSP和uv贴图的知识来制作一个定制化的快递柜,先上图,在线案例请点击博客原文。 下面我们来讲解一下这样一个柜子的制作。 1. 主角是 阅读全文
posted @ 2020-08-18 11:41 郭先生的博客 阅读(350) 评论(0) 推荐(1) 编辑
摘要:今天郭先生来说一说uv映射,什么是uv映射?uv映射就是将二维的贴图映射到对象的一个面(或者多个面)上。说到这个问题,我们就不得不了解一下Geometry的点、面和uv的结构。我们以BoxGeometry为例。 new THREE.BoxGeometry(20, 20, 20); //创建一个边长为 阅读全文
posted @ 2020-08-17 13:59 郭先生的博客 阅读(270) 评论(0) 推荐(1) 编辑
摘要:这篇郭先生说一下three.js着色器的内置变量,分别是 gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变) gl_Position:控制顶点选完的位置 gl_FragColor:片元 阅读全文
posted @ 2020-08-14 09:23 郭先生的博客 阅读(222) 评论(0) 推荐(0) 编辑
摘要:这一篇书接上文,说一说剩下的一些模块。 1. 机箱存储占用比率 机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是从绿色到红色。我们就不多废话了。 2. 监控摄像视角 监控摄像相机我在强 阅读全文
posted @ 2020-08-12 09:38 郭先生的博客 阅读(499) 评论(4) 推荐(2) 编辑
摘要:three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈。吐槽完毕回归正题。前几天郭先生看到网上有人开发了3D机房,正愁博客没什么写的,于是昨天熬夜也做了一个,今天就把大体的流程告诉萌新们,先说说主要功能模块。 墙体、地面、窗户 阅读全文
posted @ 2020-08-11 13:27 郭先生的博客 阅读(744) 评论(5) 推荐(4) 编辑
摘要:今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击博客原文。 这里我们分别引入三个纹理,分别是地球的表面纹理,对应的海拔灰度图,和云朵的纹理。使用表面纹理还是地球的外貌,海拔灰度图给地球添加凹凸效果,云朵纹理给地球添加云朵效果。下面我们说一说代码。 1. 阅读全文
posted @ 2020-08-10 12:06 郭先生的博客 阅读(368) 评论(5) 推荐(2) 编辑
摘要:这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能更好地掌握。效果如下图,在线案例请点击博客原文。 这里用到了用到了顶点着色器和片元着色器。 1. 设置几何体 设置一个几何体,对于波浪效果, 阅读全文
posted @ 2020-08-07 09:21 郭先生的博客 阅读(120) 评论(0) 推荐(0) 编辑
摘要:上一篇郭先生在例子中用到了着色器变量中的uniform和varying。这篇继续结合例子将一下attribute变量,在使用过程中也发现由于three.js的版本迭代,之前的一些属性和参数已经发生了改变,ShaderMaterial也不需要传递attributes属性值,查看源码我们可以看到如果传递 阅读全文
posted @ 2020-08-06 09:06 郭先生的博客 阅读(226) 评论(4) 推荐(0) 编辑
摘要:上一篇说顶点着色器和片元着色器的皮毛,这篇郭先生说一说着色器变量,通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击博客原文。 在这个案例之前,我们先复习一下着色器变量 Uniforms是所有顶点都具有相同的值的变量。 比如灯光,雾,和阴影贴图就是被储存在uniforms中的数据。 uni 阅读全文
posted @ 2020-08-05 09:32 郭先生的博客 阅读(251) 评论(0) 推荐(0) 编辑
摘要:郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着色器材质,利用好的我们的GPU。这篇说一说glsl内置函数。 1. 和角度相关的函数 下面是一个和角 阅读全文
posted @ 2020-08-04 09:27 郭先生的博客 阅读(238) 评论(0) 推荐(1) 编辑
摘要:说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 1. 什么是着 阅读全文
posted @ 2020-08-03 09:06 郭先生的博客 阅读(360) 评论(4) 推荐(1) 编辑
摘要:上一篇说了一下自制骨骼动画,这一篇郭先生使用帧动画让骨骼动画动起来。帧动画是一套比较完善的动画剪辑方法,详细我的api我们就不多说了,网上有很多例子,自行查找学习。在线案例请点击博客原文。话不多说先上图。 1. 初始化一些四元数 首先我们需要一些四元数,因为我们的动画里有很多旋转并且帧动画的旋转要求 阅读全文
posted @ 2020-08-01 11:01 郭先生的博客 阅读(284) 评论(0) 推荐(0) 编辑
摘要:上一篇郭先生解析了一下官方的骨骼动画案例,这篇郭先生就要做一个稍微复杂一点的骨骼动画了,就拿一个小人下手吧。在线案例请点击博客原文。话不多说先上大图 骨骼动画在GUI上面都有体现。制作骨骼动画的步骤在官方案例中已经看到了,这里在回忆一下。骨骼动画的基本步骤 创建一个BufferGeometry,并添 阅读全文
posted @ 2020-07-31 09:47 郭先生的博客 阅读(667) 评论(0) 推荐(0) 编辑
摘要:今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思,但是对于初学者来说,学起来要稍微困难一些,官方文档比较少,网上除了用圆柱体的例子就是引用外部模型的,想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画,也不深入讲解,先说说它的实现和原理 阅读全文
posted @ 2020-07-30 09:29 郭先生的博客 阅读(372) 评论(0) 推荐(0) 编辑
摘要:今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏。在线案例请点击博客原文。 要制作一个推箱子游戏,正常要有以下4个步骤 定义一些数组,要有开始箱子数组、结束箱子数组、地面数 阅读全文
posted @ 2020-07-29 10:12 郭先生的博客 阅读(419) 评论(7) 推荐(1) 编辑
摘要:今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击博客原文(加载时间比较长,请稍等一下)。话不多说先看效果图。 图片有点多,先放三张,相比于上一个版本,这个版本制作更加细致,动画更加流畅。那么下面分析一下主要代码。 1. 先介绍一下变量 这里 阅读全文
posted @ 2020-07-28 09:48 郭先生的博客 阅读(591) 评论(2) 推荐(1) 编辑
摘要:因为之前的几节讲了一些数学方法,例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击博客原文 制作魔方主要运用坐标变换的知识,制作魔方的方法有很多,建议你先在大脑中构思,然后试着做一做,下面我将一种比较 阅读全文
posted @ 2020-07-27 09:33 郭先生的博客 阅读(442) 评论(1) 推荐(1) 编辑
摘要:这篇郭先生就来说说欧拉角和四元数,欧拉角和四元数的优缺点是老生常谈的话题了,使用条件我就不多说了,我只说一下使用方法。 1. 欧拉角(Euler) 欧拉角描述一个旋转变换,通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法 1. set( x: number, y: n 阅读全文
posted @ 2020-07-26 08:57 郭先生的博客 阅读(312) 评论(0) 推荐(0) 编辑
摘要:上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判定,最后是获胜的判定。 1. 根据数据渲染陷阱和目标区域 首先我们P一张底图和陷阱图,如下图 就像这样,然后就是根据数据渲染陷阱和目标区域了 阅读全文
posted @ 2020-08-20 14:29 郭先生的博客 阅读(294) 评论(0) 推荐(0) 编辑
摘要:今天郭先生又出来制作游戏了,最近有小伙伴要做一个逻辑转体小游戏,我怎么能不先来试试呢。玩法可以看上面的连接,下面附几张图。线案例请点击博客原文。 游戏规则不懂得可以看自行百度哈,其实玩起来还挺有难度的。关于这个问题,对于新手来说,主要需要克服两个困难。一是这个模型的旋转轴不是固定的,每一次的旋转都是 阅读全文
posted @ 2020-08-19 09:50 郭先生的博客 阅读(277) 评论(0) 推荐(0) 编辑
摘要:最近有three网友,问我要不要学习blender,其实我感觉学习一下也无妨,不过花大量时间精通,尚可不必,术业有专攻给别人留一条路吧,哈哈。那我我们就是用ThreeBSP和uv贴图的知识来制作一个定制化的快递柜,先上图,在线案例请点击博客原文。 下面我们来讲解一下这样一个柜子的制作。 1. 主角是 阅读全文
posted @ 2020-08-18 11:41 郭先生的博客 阅读(350) 评论(0) 推荐(1) 编辑
摘要:今天郭先生来说一说uv映射,什么是uv映射?uv映射就是将二维的贴图映射到对象的一个面(或者多个面)上。说到这个问题,我们就不得不了解一下Geometry的点、面和uv的结构。我们以BoxGeometry为例。 new THREE.BoxGeometry(20, 20, 20); //创建一个边长为 阅读全文
posted @ 2020-08-17 13:59 郭先生的博客 阅读(270) 评论(0) 推荐(1) 编辑
摘要:这篇郭先生说一下three.js着色器的内置变量,分别是 gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变) gl_Position:控制顶点选完的位置 gl_FragColor:片元 阅读全文
posted @ 2020-08-14 09:23 郭先生的博客 阅读(222) 评论(0) 推荐(0) 编辑
摘要:这一篇书接上文,说一说剩下的一些模块。 1. 机箱存储占用比率 机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是从绿色到红色。我们就不多废话了。 2. 监控摄像视角 监控摄像相机我在强 阅读全文
posted @ 2020-08-12 09:38 郭先生的博客 阅读(499) 评论(4) 推荐(2) 编辑
摘要:three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈。吐槽完毕回归正题。前几天郭先生看到网上有人开发了3D机房,正愁博客没什么写的,于是昨天熬夜也做了一个,今天就把大体的流程告诉萌新们,先说说主要功能模块。 墙体、地面、窗户 阅读全文
posted @ 2020-08-11 13:27 郭先生的博客 阅读(744) 评论(5) 推荐(4) 编辑
摘要:今天郭先生说一说如何在three.js着色器中添加纹理,先看看今天要完成的效果,在线案例请点击博客原文。 这里我们分别引入三个纹理,分别是地球的表面纹理,对应的海拔灰度图,和云朵的纹理。使用表面纹理还是地球的外貌,海拔灰度图给地球添加凹凸效果,云朵纹理给地球添加云朵效果。下面我们说一说代码。 1. 阅读全文
posted @ 2020-08-10 12:06 郭先生的博客 阅读(368) 评论(5) 推荐(2) 编辑
摘要:这篇郭先生在练习一下着色器变量,在度娘上面或者官网上经常看到类似水波一样的效果,这篇就试着做一个这样的效果,顺便巩固一下顶点着色器和片元着色器,毕竟多多练习才能更好地掌握。效果如下图,在线案例请点击博客原文。 这里用到了用到了顶点着色器和片元着色器。 1. 设置几何体 设置一个几何体,对于波浪效果, 阅读全文
posted @ 2020-08-07 09:21 郭先生的博客 阅读(120) 评论(0) 推荐(0) 编辑
摘要:上一篇郭先生在例子中用到了着色器变量中的uniform和varying。这篇继续结合例子将一下attribute变量,在使用过程中也发现由于three.js的版本迭代,之前的一些属性和参数已经发生了改变,ShaderMaterial也不需要传递attributes属性值,查看源码我们可以看到如果传递 阅读全文
posted @ 2020-08-06 09:06 郭先生的博客 阅读(226) 评论(4) 推荐(0) 编辑