自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

现在学习也不晚

WebGL技术交流群:585582495,Babylon技术交流群:775381370

原创 本人的项目案例

bim案例:http://www.wjceo.com/examples/demo/bim/ 街景案例:http://www.wjceo.com/examples/demo/streetscape/ 移动端展示效果:http://www.wjceo.com/examples/demo/3dartTe...

2019-07-08 14:49:40

阅读数 978

评论数 3

原创 游戏开发计划

最近准备做点情怀的东西,从小就热衷于redAlert这款游戏,因为玩这个小的时候也没少被家长训斥。但是,却一直玩了下来,随着时代的发展和学业的加重,后面也没有多少时间去玩,只是下载一些mod来感受一下红警粉对这款游戏的热爱,还在感叹别人好厉害,为什么能制作出来这么精良的mod。 在玩红警的这个过程...

2019-04-03 17:31:53

阅读数 691

评论数 3

原创 游戏开发相关心得记录

3DRipper提取游戏建模 使用Babylon的组件可以从3D max导出max模型为glTF格式。 使用3DRipper可以提取一些游戏建模

2019-04-01 14:00:23

阅读数 620

评论数 0

原创 WebGL相关框架及网站

(1)three.js 官网:https://threejs.org/ 中文文档:http://techbrood.com/threejs/docs/ (2)RequestAnimationFrame.js(requestAnimationFrame()函数兼容性组件) github地址:http...

2017-07-04 14:49:38

阅读数 1987

评论数 4

原创 持续更新,本人感觉需要的网站

1.程序员相关书籍学习网站地址,免费的编程中文书 2.jquery源码查看网址 3.nodejs的express配合websocket使用 4.判断鼠标移入移出时的位置案例 5、控制元素视差滚动效果 6、angular中文文档 7、webpack的配置 8、ionic官方网站 9、ionic中文翻...

2016-11-02 01:27:14

阅读数 1740

评论数 2

原创 解决webpack打包ie报错不兼容的问题,promise 未定义

用ie打开webpack打包好的代码突然报这个错,ie11也出现这个问题。最后通过百度查了一下,是因为方法转换异步的问题,没有保证所有的不兼容对象都转换成功,所以,通过查询找到了别的朋友写的解决方案: 通过增加babel-polyfill 模块来实现全局处理 通过npm安装当前模块: npm in...

2020-01-17 17:44:05

阅读数 55

评论数 0

原创 兼容最新版浏览器的陀螺仪的心得

记录一下当前时间,当前时间为2020年1月16号。 当前版本的移动端浏览器的权限都更新了,首先说明一下安卓系统的浏览器: 如果你发现你的浏览器陀螺仪代码没有改什么,但是陀螺仪确不管用了,那肯定是你用的协议出了问题,在当前版本的浏览器中,需要使用https协议才可以开启陀螺仪,不安全的https已经...

2020-01-16 15:00:58

阅读数 88

评论数 0

原创 TS入门笔记

一下记录了一下TS相关入门的笔记记录,作为备忘录 TS中定义基本数据类型:布尔值、数值、字符串、null、undefined以及ES6中的symbol。 例子: let bool: boolean = false; //布尔类型 let num: number = 1; //数字类型 let st...

2020-01-14 18:19:03

阅读数 69

评论数 0

原创 使用js实现拖动缓动的效果

话不多说,先上效果,一个体验非常好的拖拽缓动的效果,让页面提升一个档次。 这个效果看似很简单,到也困惑了很长时间,为什么别人写出来的拖拽体验为什么这么好? 直到我自己实现了以后,才发现,原来我想的实现方式不对。接下来,我通过简短的几句话,来提供这个功能的实现思路。 首先,我们要明白,我们鼠标拖拽...

2020-01-10 17:59:45

阅读数 1511

评论数 1

原创 使用css3 实现3d正反翻转特效

首先,上传一下最终效果: 接下来,我们按照结构来实现当前的demo效果: 第一步,创建一个触发hover效果的容器,并设置3d距离: <!--item 可以触发翻转的区域--> <div class="item"> ... </div> ...

2020-01-09 14:39:00

阅读数 52

评论数 0

原创 使用canvas实现对图片的翻转

要通过canvas实现对图片沿x轴或者颜色y轴实现翻转,我们可以通过canvas2d的接口进行实现。 使用到的api: 使用getContext来获取canvas2d对象 使用 canvas2d对象的scale方法进行翻转 由于翻转的xy轴使用的是原点,也就是canvas的左上角的位置的轴,所以,...

2019-12-10 23:37:19

阅读数 63

评论数 0

原创 书写一个自运行函数的坑

抛出问题: 今天群友提出了一个问题,看题: let b = 1; (function b() { b = 9; console.log(b) })(); 请问,b打印的值是什么? 根据经验来说,大家明眼一看,肯定感觉打印的值是9,因为在上面...

2019-11-15 17:04:16

阅读数 77

评论数 0

原创 canvas 获取鼠标位置是否处于图形中

实现这个思路的方法就是使用canvas对象的context的2d对象的方法:isPointInPath 我们可以通过这个方法判断绘制的图形,以及自己通过随机的点绘制的2d图形 以下是demo的源码: <!DOCTYPE html> <html lang="en&quo...

2019-10-23 15:06:14

阅读数 262

评论数 0

原创 通过经纬度获取OpenstreetMap,谷歌地图,高德地图的切片

直接复制代码放到本地运行即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据经纬度坐...

2019-10-12 11:53:25

阅读数 174

评论数 0

原创 Layabox 2 使用其它编辑器开发layabox2d

由于我习惯了使用webstorm进行代码的编写,所以尝试使用webstorm进行环境搭建一下layabox。 此开发环境是我通过webpack和layabox来实现的一个示例搭建。官方也有引擎代码下载,但是下载下来以后没有查到相应的使用教程,无法进行配置。接着,我就通过创建一个新项目,将新项目文件...

2019-08-14 23:11:27

阅读数 183

评论数 0

原创 Layabox 1 layabox的项目文件以及项目配置

本人使用的是layabox ide 2.1版本。 首先创建一个空项目会发现左侧默认生成一些文件夹以及一些文件。 .laya 文件夹中存放一些项目开发中到发布需要的文件以及一些配置信息。 比如文件夹内的compile.js中33行就是设置项目文件的主入口。 bin文件夹内是项目输出的文件,在...

2019-08-12 22:29:22

阅读数 375

评论数 0

转载 一种基于边缘Bloom的溶解shader的实现

此文章为转载: 作者:胡说ba道 原文:https://blog.csdn.net/qq_37925032/article/details/80146256 溶解效果在游戏中十分常见,然而普通的溶解效果往往并不好看,本文将实现一种基于边缘bloom的溶解效果的实现 先上最终效果图 整体思路:将...

2019-07-25 10:49:57

阅读数 171

评论数 0

原创 layabox 节点查找

layabox也是一个树形结构。 如果一个组件类绑定到节点上面,可以通过 this.owner来获取绑定的节点。 获取一个节点的父亲节点,则使用 this.owner.parent 获取节点所在的场景 this.owner.scene 根据名称查找孩子节点,则使用 this.owner.get...

2019-07-08 23:18:14

阅读数 882

评论数 0

原创 矩阵的逆矩阵 和 转置矩阵

这几天用到了逆矩阵,就在这里总结一下逆矩阵和转置矩阵。 逆矩阵 逆矩阵就是一个矩阵的逆向。比如一个点乘以一个矩阵后得到了一个新的点的位置,如果想通过这个点再获得矩阵转换前的位置,那我们就需要乘以这个矩阵的逆矩阵。 在Three.js里面,我们可以通过new THREE.Matrix4().getI...

2019-06-17 13:59:25

阅读数 2945

评论数 1

原创 cesium获取某个位置垂直于当前地表的垂直坐标系

我们可以通过Cesium.Transforms对象来获取到相关的方法: Cesium.Transforms.eastNorthUpToFixedFrame 常用的有Cesium.Transforms.eastNorthUpToFixedFrame这个方法,这个方法支持通过传入一个中心点,然后获取到...

2019-06-14 11:24:52

阅读数 518

评论数 3

原创 CESIUM获取世界坐标转为屏幕坐标

我们可以通过场景对象scene的cartesianToCanvasCoordinates 方法进行获取。方法将返回转换成在画布的位置坐标。 这个方法支持传入两个值,一个是需要获取坐标的世界三维坐标。 第二个值为可选,可以指定一个Cartesian2对象,cesium将自动填充对象内的值为画布上的坐...

2019-06-14 09:58:27

阅读数 539

评论数 1

原创 向量的基础

2019-06-13 09:53:17

阅读数 286

评论数 0

转载 使用C++或者js求空间点到直线垂足坐标的解算方法

假设空间某点O的坐标为(Xo,Yo,Zo),空间某条直线上两点A和B的坐标为:(X1,Y1,Z1),(X2,Y2,Z2),设点O在直线AB上的垂足为点N,坐标为(Xn,Yn,Zn)。点N坐标解算过程如下: 首先求出下列向量: 由向量垂直关系,两个向量如果垂直,那么两个向量的点积(点乘,向量积)则...

2019-06-12 18:51:51

阅读数 202

评论数 0

原创 110 THREE.JS 获取一个点,沿坐标轴的偏转

如果让我们自己算,需要通过三角函数自己求。 好在,Three.js封装了自己的数学库,里面有相关的对象,叫Spherical类。这是一个虚拟的球坐标类,我们可以定义一个点通过此类获取到当前的偏转弧度。 实例化此类需要三个值:radius phi theta 。 radius代表当前点距离原点的距离...

2019-05-04 03:51:12

阅读数 469

评论数 1

翻译 25 Babylonjs入门进阶 键盘鼠标等与场景交互

用户可以通过三种主要的方式与场景交互:键盘,GUI以及鼠标/移动端的手指事件或游戏手柄。本节主要讲解键盘和鼠标/手指的事件使用。 键盘事件 通过设置一下代码,你可以得到场景中不同的键盘按键的事件反馈。 scene.onKeyboardObservable.add((kbInfo) => { ...

2019-04-18 00:07:47

阅读数 540

评论数 0

翻译 24 Babylonjs入门进阶 如何使用Observables

对于很多人来说,只是创建了Babylon.js项目相关的gui,其实还需要场景的Observables,特别是scene.onPointerObservable(获取场景触摸事件)。 介绍 Babylon.js提供了很多事件(比如scene.beforeRender),在v2.4之前没有统一的方法...

2019-04-16 23:33:36

阅读数 160

评论数 0

翻译 23 Babylonjs入门进阶 使用凹凸纹理,透明度纹理和平铺

凹凸纹理 凹凸贴图是一种模拟渲染去面试的凹凸和凹痕的技术。这些是通过从图像穿件发现贴图来实现的。可以在网上查找相关生成方法。 来自图像的原始图像法线贴图 凹凸贴图可以与颜色一起使用; 原始图像或下图中的其他图像。 创建凹凸贴图示例 只需要将凹凸贴图创建一个凹凸纹理设置给材质的bumpTex...

2019-04-16 00:55:58

阅读数 311

评论数 0

翻译 22 Babylonjs入门进阶 使用ActionManager添加模型交互事件

Action是在场景中添加模型交互的一种简单方式。触发器触发需要指定一个动作触发。例如,你可以指定用户单击(或者触摸)模型时,触发回调。 要使用Action,你必须实例化BABYLON.ActionManager并添加给模型或场景: mesh.actionManager = new BABYLON...

2019-04-15 18:18:58

阅读数 491

评论数 0

翻译 21 Babylonjs入门进阶 自定义相机输入事件

相机默认会在我们我们将其绑定(attachControl)到画布上面时,给我们自动处理操作输入事件。你还可以使用detachControl函数来解除事件的绑定。大多数Babylon.js的专家都使用两步: //第一步,设置相机的activeCamera为你创建的相机 scene.activeCam...

2019-04-08 23:19:08

阅读数 205

评论数 0

翻译 20 Babylonjs入门进阶 弧形旋转相机的更多设置

限制相机距离焦点的距离 我们可以通过设置弧形旋转相机的lowerRadiusLimit和upperRadiusLimit来设置相机距离焦点的距离范围。 camera.lowerRadiusLimit = 2; camera.upperRadiusLimit = 6; upperRadiusLim...

2019-04-07 23:15:29

阅读数 274

评论数 0

翻译 19 Babylonjs入门进阶 设置声音

Babylon.js声音引擎基于Web Audio规范。官方不决定提供音频标签和其他回退的备用机制。因此,要使用声音引擎,必须使用与Web Audio兼容的浏览器(一般支持WebGL的浏览器都支持)。尽管如此,如果你在不兼容的浏览器上使用,也不会出现异样,只是没有声音播放而已。声音引擎提供背景音频...

2019-04-07 02:48:00

阅读数 182

评论数 0

翻译 18 Babylonjs入门进阶 使用Assets Manager加载多个模型

为了方便开发者加载多个模型,Babylon.js从1.14版本引入了AssetsManager类。 此类可用于将模型导入场景活加载文本和二进制文件。 注意:导入的模型具有旋转四元数设置,因此使用rotation设置旋转会发现会旋转到意想不到的位置,如果使用rotation请将rotationQua...

2019-04-04 00:09:15

阅读数 715

评论数 0

翻译 17 Babylonjs入门进阶 使用场景加载器加载glTF,OBJ,STL模型

Babylon.js内置的模型格式是.babylon,Babylon.js可以不需要其它额外的插件即可加载。 注意:由于你导入的模型可以具有rotationQuaternion的设置,因此再设置rotate可能出现无法预测的问题,警告 基本用法 要加载指定的类型的文件,Babylon.js首先...

2019-03-31 19:40:33

阅读数 1574

评论数 0

翻译 16 Babylonjs基础入门 阴影

在本节中,我们将学习如何在Babylon.js中创建阴影。阴影现在实现的是动态阴影,它们会根据光源动态生成。你可能需要首先查看一个案例:点击这里。 实现阴影 使用Babylon.js的ShadowGenerator对象很容易实现阴影。此功能使用到了阴影贴图:从光源的角度生成场景的贴图。 创建阴影生...

2019-03-22 00:16:53

阅读数 307

评论数 0

翻译 15 Babylonjs基础入门 高度图

这一节,我们的目标是了解高度图,并学习如何生成真实的地面。 最后效果。 如何实现? 实现没有高度的一个平面效果很简单,直接可以用Babylon.js的方法生成: var groundMaterial = new BABYLON.StandardMaterial("ground"...

2019-03-17 23:28:29

阅读数 317

评论数 0

翻译 14 Babylonjs基础入门 环境搭建

现在,我们已经学了很多的东西,了解了光,精灵,粒子,材质。但是场景中还缺少一样东西:合适的环境。接下来,我们将从简单的场景颜色(clearColor)开始,再到设置场景的天空盒子,然后使用雾来实现场景效果。 一张照片显示Babylon.js场景中移动的雾 我们将如何实现这些功能? 首先,我们先了...

2019-03-17 20:50:51

阅读数 463

评论数 0

翻译 13 Babylonjs基础入门 粒子

本教程将讨论Babylon.js中的粒子系统。粒子通常是小型的精灵,用于模拟难以再现的现象,如火,烟,水,或抽象的视觉效果,如魔法闪光和技能特效。这是通过一个区域发出很多粒子组成的云来完成的。从V3.2版本开始,有特定的发射器将该区域约束为一个盒子、球体或圆锥体的形状。你还可以编写自己的自定义函数...

2019-03-10 23:45:34

阅读数 389

评论数 0

翻译 12 Babylonjs基础入门 精灵图

在本教程中,我们将学习如何使用精灵图。精灵图是2D的图像/动画,并且始终朝向相机,我们将使用它来显示带有alpha通道(透明度)的图像。 如今,精灵通常用于显示动画角色和例子,以及模拟像树木这样的复杂3D对象。 接下来,我们将实现以上效果: 精灵管理器 如果你想使用精灵,你需要创建一个“精灵管理...

2019-03-10 03:10:40

阅读数 417

评论数 0

翻译 11 Babylonjs基础入门 射线拾取

射线Ray就相当于一束光。它用于检查模型网格和细线之间在场景中的碰撞或交叉。 在上一个教程中,我们使用函数scene.pick(scene.pointerX,scene.pointerY):使用鼠标去拾取模型网格(射线从相机位置移动鼠标位置) 但本教程中,我们将实现我们从任何点和任何方法投射射线进...

2019-03-10 01:30:30

阅读数 250

评论数 1

翻译 10 Babylonjs基础入门 鼠标拾取碰撞

在使用鼠标拾取对象时,主要困难是单击3D对象,而屏幕是平面2D显示。 让我们来看看我们如何通过这个枪支射击示例将鼠标位置转换到3D场景中: 上图最后显示效果。 如何实现? Babylon.js可以通过提供的功能让你实现这个功能。 首先,创建代表墙的平面和显示纹理效果的平面。我们必须要检测UI(用...

2019-03-09 21:40:53

阅读数 369

评论数 0

提示
确定要删除当前文章?
取消 删除