- 博客(744)
- 资源 (6)
- 收藏
- 关注
RSS订阅转载 112 Three.js postProcess 后处理内置shader包
threejs的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，可以直接使用内置的着色器包，避免了复杂的着色器代码编写。效果示例：实现方式：初始化效果组合器composer=new THREE.EffectComposer(renderer); //该参数是WebGLRenderer对象为了保证组合器的正常使用，必要的引用包，在工程文件下可找到，这四个都是必须的，并且注意引用的顺序，如果顺序不对，浏览器控制台会报错的 <script src="js/pos
2020-07-30 17:28:01
1680
1
原创 111 three.js下雨进阶版，面只旋转y轴朝向相机
之前实现过，是利用的sprite永久朝向相机的特性实现的效果。但是这种效果对于雪还比较好，如果贴图修改成长条形的雨的话，从上往下看，就会有一种说不出的感觉，不真实。而我也通过修改shader和自己拼接渲染数据，实现了一个比较简单的渲染效果。接下来讲解一下实现逻辑：第一步，创建一个包围盒，来设置范围 const box = new THREE.Box3( new THREE.Vector3(-2000, -2000, -2000), new THREE.Vect
2020-07-22 17:25:26
2043
3
原创 43 Three.js自定义二维图形THREE.ShapeGeometry
简介通过THREE.ShapeGeometry，你可以调用几个函数来创建自己的图形。我们可以使用线条（line）、曲线（curve）和样条曲线（spline）创建图形的轮廓。还可以使用THREE.Shape对象的holes属性给这个图形打几个孔。创建THREE.ShapeGeometry对象使用THREE.Shape对象绘制完成后，需要创建THREE.ShapeGeometry几何...
2020-07-22 17:07:29
14136
4
原创 使用canvas实现对图片的旋转
注意点：一定要先变换完成后才可以旋转。默认canvas是原点位置旋转，可以通过对原点偏移进行设置切换旋转中心。封装的方法，第一个传img，必须load完成的，第二个传入一个角度 function createCanvas(img, deg) { const canvas = document.createElement("canvas"); canvas.height = img.height; canvas.width = img.width;
2020-05-26 14:33:00
4240
1
原创 nodejs读取图片并将二进制数据转换成base64格式
首先，使用nodejs进行数据读取，需要用到nodejs的fs模块进行数据读取：fs.readFile('你的资源路径','binary',function(err,data){ if(err){ console.log(err) }else{ console.log('数据读取成功'); }});读取到当前的文件数据以后，我们还需要...
2020-03-04 14:46:12
14830
原创 解决webpack打包ie报错不兼容的问题，promise 未定义
用ie打开webpack打包好的代码突然报这个错，ie11也出现这个问题。最后通过百度查了一下，是因为方法转换异步的问题，没有保证所有的不兼容对象都转换成功，所以，通过查询找到了别的朋友写的解决方案：通过增加babel-polyfill 模块来实现全局处理通过npm安装当前模块：npm install --save babel-polyfill在源码的顶部引入当前模块，确保它在任何其他代...
2020-01-17 17:44:05
2819
原创 兼容最新版浏览器的陀螺仪的心得
记录一下当前时间，当前时间为2020年1月16号。当前版本的移动端浏览器的权限都更新了，首先说明一下安卓系统的浏览器：如果你发现你的浏览器陀螺仪代码没有改什么，但是陀螺仪确不管用了，那肯定是你用的协议出了问题，在当前版本的浏览器中，需要使用https协议才可以开启陀螺仪，不安全的https已经不兼容了。另外再说一下ios13，在经历了悲催的ios12需要手动去设置中设置允许浏览器使用陀螺仪，...
2020-01-16 15:00:58
3815
1
原创 TS入门笔记
一下记录了一下TS相关入门的笔记记录，作为备忘录TS中定义基本数据类型：布尔值、数值、字符串、null、undefined以及ES6中的symbol。例子：let bool: boolean = false; //布尔类型let num: number = 1; //数字类型let str: string = '字符串类型'; //字符串类型let u: undefined = und...
2020-01-14 18:19:03
719
原创 使用js实现拖动缓动的效果
话不多说，先上效果，一个体验非常好的拖拽缓动的效果，让页面提升一个档次。这个效果看似很简单，到也困惑了很长时间，为什么别人写出来的拖拽体验为什么这么好？直到我自己实现了以后，才发现，原来我想的实现方式不对。接下来，我通过简短的几句话，来提供这个功能的实现思路。首先，我们要明白，我们鼠标拖拽是在一个2d平面上拖拽2d平面只有x轴和y轴，而且获取的拖拽值也是基于平面的像素获取的。所以，我们第...
2020-01-10 17:59:45
2762
1
原创 使用css3 实现3d正反翻转特效
首先，上传一下最终效果：接下来，我们按照结构来实现当前的demo效果：第一步，创建一个触发hover效果的容器，并设置3d距离：<!--item 可以触发翻转的区域--><div class="item">...</div>设置.item的perspective属性距离，就是3d效果的z轴距离，浏览器默认就xy两个轴向，css3增加了z轴，就是...
2020-01-09 14:39:00
2757
原创 使用canvas实现对图片的翻转
要通过canvas实现对图片沿x轴或者颜色y轴实现翻转，我们可以通过canvas2d的接口进行实现。使用到的api：使用getContext来获取canvas2d对象使用 canvas2d对象的scale方法进行翻转由于翻转的xy轴使用的是原点，也就是canvas的左上角的位置的轴，所以，我们还需要使用到translate方法，来移动将翻转后的图片移动到canvas的显示区域逻辑说完了，...
2019-12-10 23:37:19
4135
原创 书写一个自运行函数的坑
抛出问题：今天群友提出了一个问题，看题： let b = 1; (function b() { b = 9; console.log(b) })();请问，b打印的值是什么？根据经验来说，大家明眼一看，肯定感觉打印的值是9，因为在上面就赋值了，打印的肯定就是9。可惜事与愿违，这个打印的竟然是函数function b。当场直接蒙蔽，下面...
2019-11-15 17:04:16
334
1
原创 canvas 获取鼠标位置是否处于图形中
实现这个思路的方法就是使用canvas对象的context的2d对象的方法：isPointInPath我们可以通过这个方法判断绘制的图形，以及自己通过随机的点绘制的2d图形以下是demo的源码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <...
2019-10-23 15:06:14
3416
原创 通过经纬度获取OpenstreetMap，谷歌地图，高德地图的切片
直接复制代码放到本地运行即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>根据经纬度坐标获取对应的切片算法</title></head><script> function getP...
2019-10-12 11:53:25
2143
原创 Layabox 2 使用其它编辑器开发layabox2d
由于我习惯了使用webstorm进行代码的编写，所以尝试使用webstorm进行环境搭建一下layabox。此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载，但是下载下来以后没有查到相应的使用教程，无法进行配置。接着，我就通过创建一个新项目，将新项目文件夹内的bin文件夹转移过来，来实现的效果。这种实现方式有可能不是很好，但是绝对可用，而且还有代码提示...
2019-08-14 23:11:27
2184
原创 Layabox 1 layabox的项目文件以及项目配置
本人使用的是layabox ide 2.1版本。首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。.laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。比如文件夹内的compile.js中33行就是设置项目文件的主入口。bin文件夹内是项目输出的文件，在编辑器上运行时，其实就是运行的bin文件夹下的html文件。laya文件夹存放的是项目的资源文件...
2019-08-12 22:29:22
3631
转载 一种基于边缘Bloom的溶解shader的实现
此文章为转载：作者：胡说ba道原文：https://blog.csdn.net/qq_37925032/article/details/80146256溶解效果在游戏中十分常见，然而普通的溶解效果往往并不好看，本文将实现一种基于边缘bloom的溶解效果的实现先上最终效果图整体思路：将溶解的边缘提取出来，bloom之后再与原图像混合。首先我们实现一下最基础的溶解，下面给出关键代码：...
2019-07-25 10:49:57
1124
原创 layabox 节点查找
layabox也是一个树形结构。如果一个组件类绑定到节点上面，可以通过 this.owner来获取绑定的节点。获取一个节点的父亲节点，则使用 this.owner.parent获取节点所在的场景 this.owner.scene根据名称查找孩子节点，则使用 this.owner.getChildByName(“孩子name”);通过索引查找孩子节点，则可以使用 this.owner....
2019-07-08 23:18:14
4409
原创 本人的项目案例
bim案例：http://www.wjceo.com/examples/demo/bim/街景案例：http://www.wjceo.com/examples/demo/streetscape/移动端展示效果：http://www.wjceo.com/examples/demo/3dartTest/ （点击建筑大门可以移动到建筑内部）个人普通案例网站：http://www.wjceo.com...
2019-07-08 14:49:40
4312
5
原创 矩阵的逆矩阵 和 转置矩阵
这几天用到了逆矩阵，就在这里总结一下逆矩阵和转置矩阵。逆矩阵逆矩阵就是一个矩阵的逆向。比如一个点乘以一个矩阵后得到了一个新的点的位置，如果想通过这个点再获得矩阵转换前的位置，那我们就需要乘以这个矩阵的逆矩阵。在Three.js里面，我们可以通过new THREE.Matrix4().getInverse(matrix4)方法来获得一个矩阵的逆矩阵。具有的性质：可逆矩阵一定是方阵。如果矩...
2019-06-17 13:59:25
25010
1
原创 cesium获取某个位置垂直于当前地表的垂直坐标系
我们可以通过Cesium.Transforms对象来获取到相关的方法：Cesium.Transforms.eastNorthUpToFixedFrame常用的有Cesium.Transforms.eastNorthUpToFixedFrame这个方法，这个方法支持通过传入一个中心点，然后获取到中心点的正东正北，和地表法线的方向：x轴指向当前点的东方向。y轴指向当前点的北方向。z轴在椭圆体...
2019-06-14 11:24:52
8951
3
原创 CESIUM获取世界坐标转为屏幕坐标
我们可以通过场景对象scene的cartesianToCanvasCoordinates 方法进行获取。方法将返回转换成在画布的位置坐标。这个方法支持传入两个值，一个是需要获取坐标的世界三维坐标。第二个值为可选，可以指定一个Cartesian2对象，cesium将自动填充对象内的值为画布上的坐标。例子：var scene = widget.scene;var ellipsoid = sc...
2019-06-14 09:58:27
4578
1
转载 使用C++或者js求空间点到直线垂足坐标的解算方法
假设空间某点O的坐标为（Xo，Yo，Zo）,空间某条直线上两点A和B的坐标为：(X1,Y1,Z1),(X2，Y2，Z2),设点O在直线AB上的垂足为点N，坐标为(Xn，Yn，Zn)。点N坐标解算过程如下：首先求出下列向量：由向量垂直关系，两个向量如果垂直，那么两个向量的点积（点乘，向量积）则为0，可得出。上式记为（1）式。点N在直线AB上，根据向量共线定理： (2)由（2）得： ...
2019-06-12 18:51:51
2101
1
原创 110 THREE.JS 获取一个点，沿坐标轴的偏转
如果让我们自己算，需要通过三角函数自己求。好在，Three.js封装了自己的数学库，里面有相关的对象，叫Spherical类。这是一个虚拟的球坐标类，我们可以定义一个点通过此类获取到当前的偏转弧度。实例化此类需要三个值：radius phi theta 。radius代表当前点距离原点的距离。phi代表从Y轴正方向沿X轴的旋转角度。theta代表从Z轴正方向逆时针沿Y轴旋转的角度。这三...
2019-05-04 03:51:12
2112
1
翻译 25 Babylonjs入门进阶 键盘鼠标等与场景交互
用户可以通过三种主要的方式与场景交互：键盘，GUI以及鼠标/移动端的手指事件或游戏手柄。本节主要讲解键盘和鼠标/手指的事件使用。键盘事件通过设置一下代码，你可以得到场景中不同的键盘按键的事件反馈。scene.onKeyboardObservable.add((kbInfo) => { switch (kbInfo.type) { case BABYLON.Key...
2019-04-18 00:07:47
4227
1
翻译 24 Babylonjs入门进阶 如何使用Observables
对于很多人来说，只是创建了Babylon.js项目相关的gui，其实还需要场景的Observables，特别是scene.onPointerObservable（获取场景触摸事件）。介绍Babylon.js提供了很多事件（比如scene.beforeRender），在v2.4之前没有统一的方法处理它们。从v2.4开始，我们介绍了一种新模式（不会破坏向后兼容性）：Observables。它分为...
2019-04-16 23:33:36
1770
翻译 23 Babylonjs入门进阶 使用凹凸纹理，透明度纹理和平铺
凹凸纹理凹凸贴图是一种模拟渲染去面试的凹凸和凹痕的技术。这些是通过从图像穿件发现贴图来实现的。可以在网上查找相关生成方法。 来自图像的原始图像法线贴图凹凸贴图可以与颜色一起使用; 原始图像或下图中的其他图像。创建凹凸贴图示例只需要将凹凸贴图创建一个凹凸纹理设置给材质的bumpTexture即可：var myMaterial = new BABYLON.StandardMateri...
2019-04-16 00:55:58
4022
翻译 22 Babylonjs入门进阶 使用ActionManager添加模型交互事件
Action是在场景中添加模型交互的一种简单方式。触发器触发需要指定一个动作触发。例如，你可以指定用户单击（或者触摸）模型时，触发回调。要使用Action，你必须实例化BABYLON.ActionManager并添加给模型或场景：mesh.actionManager = new BABYLON.ActionManager(scene);创建ActionManager后，你可以注册触发事件：...
2019-04-15 18:18:58
5347
翻译 21 Babylonjs入门进阶 自定义相机输入事件
相机默认会在我们我们将其绑定（attachControl）到画布上面时，给我们自动处理操作输入事件。你还可以使用detachControl函数来解除事件的绑定。大多数Babylon.js的专家都使用两步：//第一步，设置相机的activeCamera为你创建的相机scene.activeCamera = myCamera;//第二步，将相机绑定到画布//配置项：画布对象canvas，不阻止...
2019-04-08 23:19:08
1981
翻译 20 Babylonjs入门进阶 弧形旋转相机的更多设置
限制相机距离焦点的距离我们可以通过设置弧形旋转相机的lowerRadiusLimit和upperRadiusLimit来设置相机距离焦点的距离范围。camera.lowerRadiusLimit = 2;camera.upperRadiusLimit = 6;upperRadiusLimit的值不应小于lowerRadiusLimit，避免出现错误或不起作用。反弹效果反弹效果是弧形旋...
2019-04-07 23:15:29
2659
1
翻译 19 Babylonjs入门进阶 设置声音
Babylon.js声音引擎基于Web Audio规范。官方不决定提供音频标签和其他回退的备用机制。因此，要使用声音引擎，必须使用与Web Audio兼容的浏览器（一般支持WebGL的浏览器都支持）。尽管如此，如果你在不兼容的浏览器上使用，也不会出现异样，只是没有声音播放而已。声音引擎提供背景音频（ambient sound），空间音频（spatialized sound）和定向音频（direct...
2019-04-07 02:48:00
1229
翻译 18 Babylonjs入门进阶 使用Assets Manager加载多个模型
为了方便开发者加载多个模型，Babylon.js从1.14版本引入了AssetsManager类。此类可用于将模型导入场景活加载文本和二进制文件。注意：导入的模型具有旋转四元数设置，因此使用rotation设置旋转会发现会旋转到意想不到的位置，如果使用rotation请将rotationQuaternion设置为空。使用AssetsManager初始化和创建任务要使用它，首先要先通过场景...
2019-04-04 00:09:15
4216
原创 游戏开发计划
最近准备做点情怀的东西，从小就热衷于redAlert这款游戏，因为玩这个小的时候也没少被家长训斥。但是，却一直玩了下来，随着时代的发展和学业的加重，后面也没有多少时间去玩，只是下载一些mod来感受一下红警粉对这款游戏的热爱，还在感叹别人好厉害，为什么能制作出来这么精良的mod。在玩红警的这个过程中，制作一款游戏的想法就慢慢的扎根在心底。好在浏览器对图形的支持，让我这个页面仔的有机会可以实现这个功...
2019-04-03 17:31:53
2464
8
原创 游戏开发相关心得记录
3DRipper提取游戏建模使用Babylon的组件可以从3D max导出max模型为glTF格式。使用3DRipper可以提取一些游戏建模
2019-04-01 14:00:23
1903
翻译 17 Babylonjs入门进阶 使用场景加载器加载glTF，OBJ，STL模型
Babylon.js内置的模型格式是.babylon，Babylon.js可以不需要其它额外的插件即可加载。注意：由于你导入的模型可以具有rotationQuaternion的设置，因此再设置rotate可能出现无法预测的问题，警告基本用法要加载指定的类型的文件，Babylon.js首先需要引入相应文件的插件。目前支持的文件格式类型：glTFOBJSTL如果想要快速添加对所...
2019-03-31 19:40:33
14868
2
翻译 16 Babylonjs基础入门 阴影
在本节中，我们将学习如何在Babylon.js中创建阴影。阴影现在实现的是动态阴影，它们会根据光源动态生成。你可能需要首先查看一个案例：点击这里。实现阴影使用Babylon.js的ShadowGenerator对象很容易实现阴影。此功能使用到了阴影贴图：从光源的角度生成场景的贴图。创建阴影生成器需要两个参数：阴影贴图的大小，以及用于阴影贴图计算的光。var shadowGenerator ...
2019-03-22 00:16:53
2561
翻译 15 Babylonjs基础入门 高度图
这一节，我们的目标是了解高度图，并学习如何生成真实的地面。最后效果。如何实现？实现没有高度的一个平面效果很简单，直接可以用Babylon.js的方法生成：var groundMaterial = new BABYLON.StandardMaterial("ground", scene);groundMaterial.diffuseTexture = new BABYLON.Textur...
2019-03-17 23:28:29
2250
翻译 14 Babylonjs基础入门 环境搭建
现在，我们已经学了很多的东西，了解了光，精灵，粒子，材质。但是场景中还缺少一样东西：合适的环境。接下来，我们将从简单的场景颜色（clearColor）开始，再到设置场景的天空盒子，然后使用雾来实现场景效果。一张照片显示Babylon.js场景中移动的雾我们将如何实现这些功能？首先，我们先了解场景类上的两个有趣的属性：scene.clearColor - 更改“背景”颜色。scene....
2019-03-17 20:50:51
4487
翻译 13 Babylonjs基础入门 粒子
本教程将讨论Babylon.js中的粒子系统。粒子通常是小型的精灵，用于模拟难以再现的现象，如火，烟，水，或抽象的视觉效果，如魔法闪光和技能特效。这是通过一个区域发出很多粒子组成的云来完成的。从V3.2版本开始，有特定的发射器将该区域约束为一个盒子、球体或圆锥体的形状。你还可以编写自己的自定义函数来控制粒子云和约束区域。GPU粒子是粒子系列的最新成员，可以使用适当的浏览器来提高性能。点击查看...
2019-03-10 23:45:34
3722
Substance Painter 和 Unity 同步Standard
2023-09-22
InstantOC Dynamic Occlusion Culling LOD 3.0.0
2022-09-29
three.js开发指南-资源部分
2017-12-25
three.js开发指南-代码部分
2017-12-25
webpack配置es6+less开发环境
2017-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人