- 博客(13)
- 收藏
- 关注
RSS订阅原创 Three.js中动画的事件触发
上一节讲了按键来调用某一动画，有时候会出现不用按键就需要调用某一动画。比如机器人一直都是跑步的状态，当发生某一事件或者按键时执行某一动作，执行完就得化成跑步的状态。那这个时候就需要一个回调函数，就是自动的判断这一个动作结束时切换成某一动作。这个就在AnimationMixer类中调用了事件监听函数，addEventListener ( type : String, listener : Function ) : null。type 是需要添加监听的事件类型。listener 是事件发生时被调用到的函数。我们
2021-02-07 11:22:58
1481
原创 Three.js的人物动画与交互
程序员的很多工作是在数据处理和优化以及交互上，这种人物动画的数据是由专业的三维模型人员用三维软件做好了的，不是程序员做的。就是人物的模型和动作都是事先做好了的，程序员做的是载入场景并且能够满足交换需求。这里讲一个three.js自带的案例,机器人动画，稍稍修改了下为了下面的几节做铺垫。
1
原创 3d模型格式转换的一个小工具
如果你安装了各种3D模型软件你就能随意转换各种格式的模型。好像废话哦。这里在你没有这些软件的情况下，介绍一个小的工具可以转换各种常用的3D模型。你可以在网站https://objexx.com/OpenSceneGraph.html下载OpenSceneGraph 3.6.5 – Visual C++ 2019 – 64-bit – Release，或者当前最高版本的release。这个是openscenegraph一个基于opengl的三维开发包，编译好的一个release版本。这里是windows版
2021-01-31 11:27:31
1184
原创 three.js加载3d模型以及阴影生成
前面见了那么多基础章节，今天讲一个实际用的加载3dmax做的的模型，模型格式为3ds。这个应该是项目对接三维模型最常用的格式。这个比较osg来说已经很先进，可以直接加载3ds了，不用转换成特有的格式。加载完的效果以及阴影的效果如下如：我们看下代码，首先是灯光的部分，这里用的是shadowmap的阴影方式，模型较大，设置了投影的大的投影框，camera.left,camera.right,top,bottom等参数，这些参数在文末最下图中辅助线可以看到。开启阴影模式。let directionalLig
2021-01-29 15:47:35
2043
2
原创 threejs的阴影
three.js中的阴影根据光照的分类分成三种，平行光源的（DirectionLight)如图1，，点光源的(PoinLight)如图2，聚光灯光源的(SpotLight)如图3。环境光只是一种背景光没有产生阴影就略去了。下面的三个图是三种光源把球的阴影投影到平面上，为了让大家看清楚，加了一个辅助线，看清楚每种光源投影的方式，实际做项目的时候这个辅助线可以作为测试用的。...
2021-01-18 11:59:33
1525
原创 three.js右手坐标系
three.js是opengl的封装，所以坐标系同opengl，都是右手坐标系。著名的微软开发的一套directx是左手坐标系。把四个手指从x轴到y轴的方向握拳，大拇指指向的方向就是z的方向，右手坐标系就用右手就可以了。因为我们这里很多节都提前用到了坐标的概念所以把这个坐标系先讲一下，这里指的是世界坐标系。暂且可以理解为你绘制的场景的坐标系。原点就是中心点，然后x,y，z轴的方向如上图所示。...
2020-12-28 11:55:43
391
原创 three.js 的纹理贴图
上一节讲过了几种光照模型下的材质还有就是透明效果，这节讲最常用的纹理材质。这节的程序主要是给箱子帖纹理图片，纹理贴图如下图所示，将图片贴到网格上，左边的网格是四边形的，是三维空间的一个四边形，每个顶点都是有坐标的，还通过纹理坐标也叫uv坐标来对应，前几节讲BuffeGeometry的时候提到过一个顶点一个 uv坐标。左图（0，1），（1，1），（0，0），（1，0）就是这个网格的纹理坐标，表明贴右边的图片的哪个地方，这是刚好把右图贴到左边的网格上。虚线表示了映射关系。这个箱子的信息用BoxBufferG
2020-12-28 10:50:57
1358
原创 Three.js中的材质
我们这里讲了三种常用的材质，第一个用的lambert光照模型，能看出有明暗的部分。第二个球用的是是经典的Phong光照模型，有高光的部分，类似于金属的那种材质。最后一个是透明的与背景融合的材质。
2020-12-23 10:05:09
934
原创 Three.js中的光照
这一节主要讲光照。光照有三种，一种背景光，也叫环境光，这个开启后能看出一个物体昏暗表面是没有立体感的。还有一种是平行光源，类似于现实中的太阳光照,如下图所示，太阳光从无限远的地方打过来，照射到物体时已经变成平行光了，这个就很明显有明暗面，朝向光源的方向就是明的，背向就是暗的。还有是点光源，点光源类似于在一个位置加了一个灯泡，它可以向它的四面八方发射光照，一般的位置设置成相机的位置一致，同样物体有明暗面，跟光源的位置有关系。如下图所示。然后我们画了一个白色的球体，在三种光线照射下的样子，如下图所示。这
2020-12-22 10:57:49
1544
原创 用BufferGeometry自定义顶点来创建图形
上一节用到了自带函数PlaneBufferGeometry创建四边形，PlaneBufferGeometry的基类也是BufferGeomtry。但是在你做项目或者产品的时候是需要自定义顶点数组的，特别是大规模顶点数据时，我们要用到BufferGeometry。使用 BufferGeometry 可以有效少向 GPU 传输上述数据所需的开销。BufferGeometry包括了几何体所有的信息，都放入buffer中一次性传输给gpu,包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。因为
2020-12-18 10:31:19
1746
原创 欢迎来到Three.js的三维世界
图形的东西必须见着效果才能学会的，所见即所得，你自己好好去研究three.js下example案例是一个很好的方法。我这里就给你提供了捷径讲一些基础的案例。我们来画一个粉红色的四边形，如下图所示。你先按照上一节搭好环境，在examples目录下自己写一个html文件。也可以在examples同级目录下建一个文件夹写自己的html，但是要拷贝examples下的库文件。因为这是第一个程序，会讲的比较仔细。我这个html一共三个函数init(),onWindowResize(), animate()1.i
2020-12-17 11:01:49
156
原创 Three.js的学习之旅
这个学习文档是面向小白的，讲解Three.js基础的，最后会有实战项目，实战就是下面这个小游戏。学习使我快乐，加油！Three.js顾名思义是javascript 语言的用来做三维绘制的。说白了，就是可以允许在网页上编写的一种三维库。百度百科上说的是Three.js 是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。三维的内容没有想象中那么复杂，从最基本的一点点学起来就可以了。这里说的基于webGL很明显就是跟图形库openGL有关系的了，不过都有牛人给你封装好了，你只需要知道
2020-12-15 09:23:07
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人