![](https://img-blog.csdnimg.cn/439627032a0c4e799d73d4d8fe110eff.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
threejs
文章平均质量分 67
threejs介绍与实战
小猴子喝牛奶
这个作者很懒,什么都没留下…
展开
-
Threejs系列--22游戏开发--沙漠赛车游戏【布置游戏开始场景】
Threejs系列--22游戏开发--沙漠赛车游戏【布置游戏开始场景】序言目录结构代码一览index.js代码Objects.js代码Materials.js代码materials/FloorShadow.js代码materials/Matcap.js代码代码解读运行结果序言本章将进行游戏开始场景的处理,场景中模型较多,需要统一管理目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Cam原创 2022-05-12 12:51:32 · 955 阅读 · 1 评论 -
Threejs系列--21游戏开发--沙漠赛车游戏【实现音乐加载器,加载进入场景音效】
Threejs系列--21游戏开发--沙漠赛车游戏【实现音乐加载器,加载进入音效】序言目录结构代码一览index.js代码Areas.js代码Area.js代码Sounds.js代码代码解读运行结果序言本章将实现鼠标点击开始按钮后,加载进入场景的音效。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__Resources.js 构建模型的资源类原创 2022-05-10 14:11:31 · 813 阅读 · 0 评论 -
Threejs系列--20游戏开发--沙漠赛车游戏【点击开始之场景切换】
Threejs系列--20游戏开发--沙漠赛车游戏【点击开始之场景切换】序言目录结构代码一览Area.js 代码Areas.js代码index.js代码代码解读运行结果序言本章将实现鼠标点击切换场景。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__Resources.js 资源类 | |__geometries 定制的物体类文件夹 |原创 2022-05-09 20:58:07 · 992 阅读 · 0 评论 -
Threejs系列--7游戏开发加载glb模型之牛刀小试
Threejs系列--7游戏开发加载glb模型之牛刀小试终极效果展示开发环境搭建目录结构重要依赖代码html模板内容main.ts游戏主场景role.ts角色构建helper.ts辅助线events.ts事件代码运行作者的话终极效果展示目标如下,先来熟悉下threejs吧~~开发环境搭建emmmmmm ~~~ 一台非常攒劲的电脑编辑器vscodejs运行环境nodejs浏览器chrome目录结构|-- src 源代码 |-- assets 资源目录 |-- m原创 2021-11-10 17:44:11 · 5475 阅读 · 4 评论 -
Threejs系列--19游戏开发--沙漠赛车游戏【开始按钮鼠标交互之光标移入提示】
Threejs系列--19游戏开发--沙漠赛车游戏【开始按钮鼠标交互之光标移入提示】序言目录结构代码一览AreaFenceBufferGeometry.js代码AreaFence.js代码Area.js代码Areas.js代码index.js代码Application.js代码代码解读运行结果序言本章将实现鼠标的交互效果。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.j原创 2022-05-07 21:10:16 · 584 阅读 · 0 评论 -
Threejs系列--18游戏开发--沙漠赛车游戏【loading资源加载进度条】
Threejs系列--18游戏开发--沙漠赛车游戏【loading资源加载进度条】序言目录结构代码一览AreaFloorBorderBufferGeometry.js代码AreaFloorBorder.js代码Area.js代码Areas.js代码index.js代码代码解读运行结果序言本章将实现loading加载资源进度条。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera原创 2022-05-05 22:01:08 · 1018 阅读 · 0 评论 -
Threejs系列--17游戏开发--沙漠赛车游戏【构建资源加载器,完成loading切换】
Threejs系列--17游戏开发--沙漠赛车游戏【构建资源加载器,完成loading切换】序言目录结构代码一览base/Resources.js代码utils/Loader.js代码world/index.js代码Application.js代码代码解读运行结果序言本章将构建资源加载器,从而实现loading加载资源等待效果。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camer原创 2022-05-03 12:55:58 · 898 阅读 · 0 评论 -
Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】
Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】序言目录结构新增依赖代码一览world/index.js代码代码解读运行结果序言本章将调整相机角度,让整个游戏界面看起来不是一张纸…目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__geometries 定制的物体类文件夹 | |__materials 材质原创 2022-05-03 11:40:55 · 725 阅读 · 0 评论 -
Threejs系列--15游戏开发--沙漠赛车游戏【相机角度调整】
Threejs系列--15游戏开发--沙漠赛车游戏【相机角度调整】序言目录结构代码一览Camera.js代码Application.js代码代码解读运行结果序言本章将调整相机角度,让整个游戏界面看起来不是一张纸…目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 【新增--相机位置】 | |__geometries 定制的物体类文件夹 | |__materi原创 2022-05-03 09:40:13 · 782 阅读 · 0 评论 -
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】序言目录结构代码一览world/index.js代码Application.js代码代码解读运行结果序言本章将创建一个loading的纹理贴图。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__geometries 定制的物体类文件夹 | |__materials原创 2022-05-02 21:56:10 · 664 阅读 · 0 评论 -
Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】
Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】序言目录结构代码一览Blur.js代码Glows.js代码Application.js代码代码解读运行结果序言本章将对画面进行高级渲染,使用threejs提供的EffectCompose,该类管理了产生最终视觉效果的后期处理过程链,使用通道可以将高级效果逐一设置。例如:扫描线和失真模拟电视屏幕,在指定场景上渲染新场景等。目录结构资源目录里面的结构不变,点击传送门快速查看。|__src |__assets |原创 2022-05-02 18:19:52 · 554 阅读 · 0 评论 -
Threejs系列--12游戏开发--沙漠赛车游戏【地面添加纹理】
Threejs系列--11游戏开发--沙漠赛车游戏【地面添加纹理】序言目录结构代码一览world/Floor.js代码代码解读运行结果序言通过上章的内容,对于地面创建的过程有了一定了解,本章将对代码进行升级,将定义的着色器应用到地面上。目录结构在上一章的基础上新增了两个动画事件处理的文件。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__geometries 定制的物体类文件夹 | |__mate原创 2022-05-02 10:27:04 · 821 阅读 · 0 评论 -
Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】
Threejs系列--10游戏开发--沙漠赛车游戏【初步加载地面】序言目录结构代码一览index.js代码world/Floor.js代码materials/Floor.js代码Application.js代码代码解读运行结果序言本章介绍地面的加载。目录结构在上一章的基础上新增了两个动画事件处理的文件。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js 相机类 | |__geometries 定制的物体类文件夹 |原创 2022-05-01 13:43:22 · 488 阅读 · 0 评论 -
Threejs系列--10游戏开发--沙漠赛车游戏【基础事件处理器】
Threejs系列--9游戏开发--沙漠赛车游戏【基础事件处理器】序言目录结构代码一览Time.js代码EventEmitter.js代码Sizes.js代码Application.js代码代码解读运行结果序言通过上一章,你可以将图形渲染出来,但是没有任何动画效果。本章将进行动画事件的基本处理,让图像可以在页面内运动。目录结构在上一章的基础上新增了两个动画事件处理的文件。|__src |__assets |__js | |__base 基础类文件夹 | |__Camera.js原创 2022-05-01 09:00:00 · 457 阅读 · 0 评论 -
Threejs系列--9游戏开发--沙漠赛车游戏【基础场景渲染】
Threejs系列--9游戏开发--沙漠赛车游戏【基础场景渲染】序言准备工作目录结构代码一览index.js代码index.css代码Camera.js代码Sizes.js代码Application.js代码运行结果为什么换react序言开篇先来碎碎念,最近项目紧张,多个项目同时在搞国际化,终于有时间写一篇了。本章将开始编程,为了方便初学者,将逐步增加代码量以及项目中的某些依赖。准备工作emmmm,项目开始直接换react了,其实换不换对于这个项目来说几乎毫无影响,各位可根据个人情况而定。不原创 2022-04-29 20:34:50 · 1470 阅读 · 0 评论 -
Threejs系列--8游戏开发--沙漠赛车游戏【素材及依赖准备】
Threejs系列--8游戏开发是素材准备终极效果展示终极效果展示最终效果中的所有资源作者已经打包好了glb文件mp3文件还有图片原创 2022-04-09 09:46:32 · 838 阅读 · 1 评论 -
Threejs系列--7相机
Threejs系列--7相机序言正交相机透视相机立体相机立方相机摄像机在3D演示中扮演着重要的角色,Treejs提供了Camera对象及其子对象,可以非常方便的应用。正交相机使用正交投影来进行投影,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。渲染2D场景或者UI元素非常有用。OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number原创 2022-04-29 20:43:55 · 658 阅读 · 0 评论 -
Threejs系列--6阴影
Threejs系列--6阴影序言点光源照射出的阴影平行光照射出的阴影聚光灯照射出的阴影新手看这里通过上一章灯光的了解,相信你对在实际业务中如何取舍已经有了自己的答案。本章将讲解灯光的阴影。treejs提供了 LightShadow对象以及其子对象,可以使得我们非常方便的控制阴影。点光源照射出的阴影//构造函数PointLightShadow( ) 创建一个新的PointLightShadow。pointLight内部实现了相关调用,我们无需手动调用。设置shadow前的效果设置原创 2021-07-13 08:35:18 · 589 阅读 · 1 评论 -
Threejs系列--5灯光
Threejs系列--6灯光序言光源创造光源环境光平行光半球光点光源平面光光源聚光灯新手请看这通过前几张的了解,你应该对几何体、材质以及如何添加纹理贴图有了一定的了解,本章将介绍灯光。光源treejs提供了 Light对象以及其它子对象,可以使得我们非常方便的管理灯光效果。Light是光源的基类,不要直接使用,我们应该使用其派生类。//关于LightLight( color : Integer, intensity : float )color:16进制表示光的颜色,默认白色原创 2021-07-12 16:28:18 · 3021 阅读 · 2 评论 -
Threejs系列--4纹理贴图
Threejs系列--4纹理贴图序言添加纹理完整代码相信通过前两章的阅读,在项目中你能根据实际情况快速选定需要的几何体与材质。本章将优化这个物体,实质更加真实,加上一些纹理,让其更加细腻。添加纹理treejs提供了 TextureLoader,可以使得我们非常方便的添加纹理贴图。构造函数TextureLoader() 创建一个新的TextureLoader.方法共有方法请参见其基类Loader。.load ( url : String) : Textureurl — 文件的U原创 2021-07-09 19:06:29 · 1471 阅读 · 0 评论 -
Threejs系列--3材质
Threejs系列--3几何体序言材质公共参数基础网格材质随着上章关于几何体的认识,相信你已经建立起了属于自己的几何体分类体系,在项目开发中可以快速找到相关几何体并应用于项目中。不过我们还不能对各种几何体实现材质管理,本章将解决这个问题,使得我们的几何体更加形象生动、真实。treejs提供了Material对象以及一系列的子对象,一起来看看吧。材质公共参数骚年,这里很有用呢~~文章以下的每一种材质都可以用到这里的属性哦!color: 材质的颜色(Color),默认值为白色 (0xf原创 2021-07-08 19:31:16 · 537 阅读 · 0 评论 -
Threejs系列--2几何体
Threejs系列--案例一(掌握场景设置)序言Treejs简介随着上章基本知识的了解,相信你应该对Treejs基本流程及一些常见术语等有了基本的认识,本章将对场景设置进行详细讲解。Treejs简介treejs是基于原生WebGL封装运行的三维引擎。可以使用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。...原创 2021-07-07 17:29:36 · 1121 阅读 · 5 评论 -
Threejs系列--1入门
Threejs系列--入门序言Treejs简介学习Treejs需要了解的基本知识Treejs使用基本步骤一个例子来体会体会吧随着科技发展,人们对应用交互效果越来越高,我们希望简单的平面交互能使用更多的3D交互效果代替,为了能在短时间内完成炫酷的效果,这便是本系列文章的目的。准备好秃头了吗?少年 ^ 0 ^Treejs简介treejs是基于原生WebGL封装运行的三维引擎。可以使用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。学习Treejs需要了解的基本知识在上面的解析中,原创 2021-07-05 17:58:20 · 904 阅读 · 1 评论