Crimaster·W-CSDN博客

原创 THREEJS - 基于A*算法实现自动避障路径计算

前段时间，在项目中接到一个需求，需要实现从报警位置，自动计算最近的逃生路线，我基于A*算法实现了自动计算的功能，下面跟大家简单分享一下。首先跟大家介绍一下A*算法是什么？A*(A-Star)算法是一种静态路网中求解最短路径最有效的直接搜索方法，也是解决许多搜索问题的有效算法。算法中的距离估算值与实际值越接近，最终搜索速度越快。（摘自百度百科A*算法）说简单直白一点，就是利用了0和1的矩阵，快速计算可行进的路径，明白了基本原理，我们就可以开始做自动避障的功能了。具体的实现思路是根据A*算法的矩阵关系.

2022-04-19 14:58:57 1439 1

原创 THREEJS - 点击/拾取

在三维场景中，我们经常会遇到点击拾取事件，例如点击某个模型，模型变色等等，常规的点击事件声明是：container.addEventListener('click', onDocumentMouseDown, false);但是这种点击事件，当你切换至移动端时，你就会发现点击事件失效了，这时候我们需要定义的点击事件是：container.addEventListener('touchstart', onDocumentMouseDown, false);所以，我们在写点击拾取的时候，可以综合以上

2021-12-09 17:02:24 2555

原创 THREEJS - 获取场景中模型数据

在一些场景中，我们需要展示场景内的模型数据，如模型的数量、面片数以及顶点数等，下面给大家提供的就是对应的统计函数，在场景加载结束后，传入对应的scene即可：/** * 获取场景内模型数量、顶点数及面片数 * @param {*} view ：需要计算的场景视图即scene */function getSceneModelFaceNum(view) { let scene = view; let objects = 0; // 场景模型对象 let vertices = 0

2021-12-09 16:48:04 4309

原创 THREEJS - 旋转中心调整及获取模型中心点

在开发中，我们有时候需要知道模型子级的中心点做一些操作，但是常规的模型子级中心点的位置在模型的中心，这时候，就需要我们自己手动获取，方法如下：model.traverse(child => { if (child.isMesh) { let center = new THREE.Box3().setFromObject(child).getCenter(); }});当我们获取中心点位置后，就可以根据中心点位置做一些我们想要的功能，例如给子级添加标签等等。.

2021-12-09 16:43:06 4161 4

原创 THREEJS - 自定义曲线绘制

今天来给大家分享一个自定义曲线绘制的demo，这个demo主要是结合鼠标在三维空间点击的焦点获取、new THREE.CatmullRomCurve3（）对象等。我们需要在三维的scene内，监听鼠标的点击事件，绘制曲线的前提，需要一个平面，所以我们先在三维场景构建一个看不见的虚拟平面：// 创建平面let normal = new THREE.Vector3(0, 1, 0); // 构建向量let VirtualPlane = new THREE.Plane(normal, 0); // 虚

2021-10-21 15:14:43 1675 2

原创 THREEJS - 利用UV偏移模拟传送带运动

在制作产线动画的过程中，避免不了实现传送带的运动，实现的方式有很多，这里我给大家介绍一种最简单真实的运动方式：利用贴图进行UV偏移。首先，我们需要知道贴图的路径，以及需要设定运动的目标模型，将模型的材质进行复制和赋值，代码如下：/** * 加载传送带材质 * @param {*} model ：模型 * @param {*} picPath ：贴图路径 */function loadTexture(model, picPath) { let modelMesh = null;

2021-05-30 20:02:45 1715 1

原创 THREEJS - mousedown/mouseup等鼠标相关事件失效

在three.js的场景中，我们经常会给鼠标的点击添加交互事件，最常见的方式就是：container.addEventListener("mousedown", function(){ });但是，在监听的过程中，发现鼠标的点击事件并不能触发监听事件，造成这种情况的原因一般就是场景中引入了orbitControl控件导致，解决这个问题的方式有如下两种方式：方式一：修改orbitControl源码在OrbitControls.js的源码中，搜索关键字mousedown找到onMouseDow

2021-05-30 19:51:00 2811 2

原创 THREEJS - 动态标签（texture纹理方式）

前问提到了关于场景中给模型动态标注标签的一种方式 - dom，这篇文章将会讲述另一种方式 -texture纹理方式。在场景中添加mesh的时候，我们可以给mesh添加想要的纹理材质，利用这个特性，就可以将需要展示的标签内容贴到mesh的面上，这样就可以实现利用纹理特性实现标签的构建，具体思路如下：1.创建texture纹理材质：这里采用的是标签内容转化为图片的形式// 利用canvas的属性，我们封装一个函数，根据数据的文字内容，创建一个canvas画布function getTextTo.

2021-04-09 15:07:13 2519

原创 THREEJS - 动态标签（dom方式）

在三维场景中，我们会有一种需求：需要给三维场景中的模型打上标签，例如展示模型的名称/性能展示等，三维场景打标签的方式很多，有dom、sprite、Mesh等等，这篇文章来给大家介绍的是一种比较常见的打标签方式：dom。这种方式我们可以自定义任何样式的dom标签，比较容易满足各种场景的需求。1.创建dom元素：<div id="sign" style="position: absolute;"> <div class="sign"> <div c

2021-03-27 11:21:49 4380 11

原创定时器的清除

定时器是我们在开发过程中用到比较多的，为了减少浏览器的加载进程以及内存的占用，我们通常会在使用了定时器后，手动清除定时器，达到释放内存的效果，通常的办法是：let timer = = setTimeout(() => { console.log(1);}, 1000);clearTimeout(timer);在创建定时器的时候做好声明，然后清楚掉定时器，一两个还好，但是如果一个场景内存在多个定时器，例如在我们做动画的时候，这时候如果一个个的手动清除就太过于麻烦，所以我们可以用下面这个便

2021-03-04 20:12:07 6114 1

原创 THREEJS - 模型的任意视角展示

上一篇博客我们提到了任意模型加载的居中的解决办法，但是呢，细心的同学会发现，模型虽然居中了，但是模型的大小我们比较难以控制，可能会导致模型加载时，展示在场景中或大或小，这时候我们就需要设定一下模型的展示视角。在说方法前，我们先来说明一下另一个概念：orbitContorl。这个控制器是用来控制模型在场景中的展示，可以通过鼠标控制实现我们想要的效果，但是orbitCotrol内置属性中，会影响到我们创建场景中的camera的设定，此时如果需要改变相机的位置和视角时，我们需要用下面这个办法：orbit

2021-03-04 20:05:15 3810 9

原创 THREEJS - 模型居中

在使用THREEJS的过程中，我们常常会遇到关于模型的处理，有时候建模的同事会帮我们将模型归零后给我们，有时候是没有归零的，但这时候需要将模型在场景中居中展示。这里采用的办法是包围盒的方式，具体代码如下：// 将模型的中心点设置到canvas坐标系的中心点，保证模型显示是居中的，object就是操作的目标模型let box = new THREE.Box3().setFromObject(object); // 获取模型的包围盒let mdlen = box.max.x - box.min.x

2021-03-02 22:09:16 4771

原创 Gulp的压缩处理

大家好，我又回来了！！！！！！断更了一年多，今日起，我将继续发布新的博客，后续的文章会开辟新的技术领域以及新的实际开发工具，希望大家继续关注，有不足之处，还请多多指教与交流。今天，我将以一个实际开发工具 —— gulp的压缩打包，开启2021新年的大门，大家拭目以待吧。好了，言归正传，在实际开发中，我们经常会碰到JS和CSS文件混合压缩的情况，有很多人都会直接使用网上的压缩工具直接压缩，下面我给大家带来一种便捷的压缩方法：Gulp。1.打包前准备需要安装 node 和 npm。

2021-02-01 19:58:02 499

原创 JavaScript：异步执行机制

使用JavaScript的开发者都知道，JS的异步执行机制在JS中占据着重要的地位，主要就是体现在回调函数以及事件方面，最近看了很多文章，将自己的一些感受和理解跟各位分享一下。前面的博客中也有提到，JavaScript是一个单线程执行机制的程序，这样虽然说避免了并发访问的问题，但是这样也致使JS中的异步执行不能按照传统的多线程方式执行异步，JS所有的异步的实现需要插到同一个队列中，从而依次在主...

2019-12-17 16:30:08 719

原创 JavaScript：执行机制

在说本章主要讨论的问题之前，先来讲述一下函数中的try/catch/finally分别代表什么：try：语句测试代码块的错误；catch：只有当try中的代码块发生错误的时候，才会执行这部分的代码，参数err记录了try内代码块的错误信息；finally：不管有无异常都会执行内部的代码介绍完几个关键字代表的含义，我们接着来思考两个问题：try，catch，finally中r...

2019-12-03 15:49:31 198

原创 JavaScript：模块化及模块化规范

什么是JavaScript的模块化？模块化模块化，那就是先有模块，模块是什么？模块就是将一个复杂的程序按照一定的规则拆分并单独封装成一个块或者文件，每一个块内都有自己的内部数据和方法，并且会向外暴露一些接口或方法与其它模块之间相互联系。模块化就是程序在运行编码过程中，就是按照每个模块一个一个逐一编码，最后形成一整个项目。当然了，这些许许多多的模块不能胡乱的编写和使用，那么就需要一定的规范了，下面给...

2019-11-28 17:22:52 420

原创 JavaScript：堆栈溢出&&内存泄漏

在JavaScript中，会有听到两个概念：堆栈溢出和内存泄漏，这两种机制在开发中遇到的不多，但是一旦碰到就很头疼。下面就分别来讲述一下二者的概念，触发原因以及解决办法。堆栈溢出：什么是堆栈溢出？我们知道JS中的数据存储分为栈和堆，程序代码运行都需要一定的计算存储空间，就是栈了，栈遵循先进后出的原则，所以程序从栈底开始运行计算，程序内部函数的调用以及返回会不停的执行进栈和出栈的操作，栈内被所...

2019-11-26 17:51:23 4251

原创 JavaScript：闭包

在说JavaScript中闭包概念之前，我们先来了解一下作用域和变量生命周期的问题。作用域在前面的博客中有提到，大家可以点击查看一下，关于变量的生命周期，什么是生命周期？也就是变量从创建到销毁的一个过程。对于全局变量，它的生命周期是永久的，除非我们在开发中主动销毁这个变量，而在函数中的局部变量，当退出该函数时，这个函数内的局部变量回随着函数的结束而被销毁。了解了作用域和生命周期的基本概念后，我们来...

2019-11-22 14:15:53 273

原创 JavaScript：执行上下文&&执行上下文栈

在JavaScript概念中，有一个概念比较难以理解，它就是执行上下文和执行栈。最近在网上查阅了很多资料，现在把我的一些理解写出来，希望对各位有些帮助。一、执行上下文什么是执行上下文？是不是我们平时写文章的时候的那个上下文关系？答案是否定的，在JavaScript中的执行上下文指的是JS代码被解析和运行时所处的环境，被称之为JavaScript中的执行上下文，换句话来说，我们在实际开发中写...

2019-11-20 11:55:41 418

原创 JavaScript：变量提升&&作用域

作用域是JavaScript中听上去感觉很简单，其实比较麻烦的一个特性，什么是作用域？我看书籍有一个相对的官方解释：作用域（scope，或译有效范围）就是变量和函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期，是在代码运行时中某些特定部分或代码块中变量，函数和对象的可访问性，也就是说作用域决定了代码区块中变量等其它的可见性或可访问性。我们先看一个简单的例子：function fu...

2019-11-14 14:22:34 278

原创 JavaScript：class类的实现方式及特点

在JavaScript开发中，我们通常会使用构造函数的方式来是实现实例对象的生成，代码如下：function People(name, age) { this.name = name; this.age = age;}People.prototype.say = function () { console.log('hello');}var tom = new...

2019-11-12 15:11:04 749

原创 JavaScript：new关键字的执行过程

在使用JavaScript开发过程中，经常会用到new关键字，从字面意思来看，就是新建一个对象，那么在我们看不见的数据之间的操作到底发生了什么呢？使用new的这个过程执行了哪些操作？看下面的例子：function Person(name) { this.name = name;}let zhangsan = new Person('张三');上述代码中new了一个Person...

2019-11-11 14:42:43 2741 4

原创 JavaScript：继承

在JavaScript中，有很多地方都涉及到继承的使用，这样不仅可以合理的利用数据，而且可以结合实际开发情况衍生一些特定的属性，我们先定义一个类：function Person(name) { // 属性 this.name = name || 'zhangsan'; // 实例方法 this.sayName = function () { c...

2019-11-11 11:31:28 151

原创 JavaScript：instanceof 实现原理

前文我们有说数据类型的判断，中间提到了一种判断方式就是instanceof，这里我们来详解介绍下关于instanceof具体的实现原理。语法：object in constructor，具体含义就是检测对象object的原型链中是否存在一个构造函数的prototype属性。例如之前提到的例子：123 instanceof Number, //false'dsfsf' instanceo...

2019-11-08 16:42:42 886 2

原创 JavaScript：原型设计模式

在JavaScript中有很多设计模式，例如工厂模式、模块模式、发布订阅模式、单例模式等等，这里主要说的是一种比较重要的设计模式---原型设计模式。所谓原型设计模式，我参考了网上比较多的解释，这种设计模式就是创建一个共享的原型，并通过拷贝这些原型创建新的对象。用于创建重复的对象，这种类型的设计模式属于创建型模式，它提供了一种创建对象的不错选择。那么如何实现原型模式？答案就是原型链，我们可以通过...

2019-11-07 14:52:14 273

原创 JavaScript：数据类型判断的方法

在JavaScript的基本数据类型中，还有两个特殊的类型：null和undefined，两者在布尔类型下都转义为false，看以下代码：console.log(null == undefined); // trueconsole.log(null === undefined); // false我们利用双等来判断null和undefined，得到的结果是true，是因为他们俩布尔值...

2019-11-05 14:11:41 230

原创 Symbol()类型的定义及特点

前文我们提到了JavaScript中的两种数据类型的存储方式，在说到数据类型的时候，提到了ES6新增的一种数据类型：Symbol类型，这个类型的功能类似于一种标识唯一性的ID。Symbol类型属于JavaScript中两大数据类型中的基本数据类型，接下来我们就介绍下Symbol类型的一些特点。首先就是创建一个Symbol实例，一般是用以下两种方式：var a = Symbol(); ...

2019-11-05 10:48:01 4643

原创 JavaScript：数据的存储

在JavaScript中，变量基本上分为两大类：值类型（也称为基本类型）和引用类型，当然在ES6中新提出了一种新的类型，就是Symbol类型，在这里我们主要说一下值类型和引用类型：值类型：number（数值类型），string（字符串类型），Boolean（布尔类型），null，undefined；引用类型：object（对象），array（数组），function（函数）先看下对于值类...

2019-10-31 11:29:37 651

原创箭头函数：this的指向问题

关于typescript中函数的定义，有提到过它的定义方式（详见：函数的定义及特性），当时提到typescript中的'=>'不是ES6中的箭头函数的意思。什么是ES6的箭头函数？代码如下：var fnc = v => v;第一次看到这个，你肯定心里在想：what ' s this！！！！！！！！！！！！！解释一下，上述代码表现形式就相当于：var fnc = func...

2019-10-29 17:50:59 848

原创 TypeScript学习（八）：数组的补充及内置对象说明

在前面我们提到了有关数组的定义和数组的一些特性，那篇博客只提到了三种定义方式，这里我们再补充两种方式：第一种：数组泛型// 语法格式：Array<elemType>let list: Array<number> = [1, 2, 3];第二种：类数组function sum() { let args: { [index: num...

2019-10-25 14:28:37 612

原创 TypeScript学习（七）：类型断言

前面我们提到了值类型，在我们设置值类型的时候，有一种定义方式就是联合类型的设定，如下：let a: number | string;a = 1; // 类型推论：此时变量a为number类型a = 'string'; // 类型推论：此时变量a为string类型或者是任意类型的设定，如下：let a: any;a = 1; // 类型推...

2019-10-25 10:18:28 1349

原创 TypeScript学习（六）：函数的定义及特性

前面我们说完了对象和数组的定义，接下来就是一个重头戏---函数。函数可谓是在程序猿界无处不在，不管你学什么语言，都会接触到函数，我看有的文章将函数定义为一等公民，这就可以看得出函数对于我们来说地位是多么的高，是多么的重要，废话不多说，我们进入正题。老样子，我们先说一下在JavaScript中，对于函数的定义和使用。什么是函数？函数就是被开发者用来执行某一项或多项功能任务的代码块。在JS中定义函...

2019-10-24 17:47:50 589

原创 TypeScript学习（五）：数组的定义方式及常见数组操作方法使用

上一篇我们提到了在typescript中对于对象的定义和使用，俗话说"万物皆对象"，这里我们就来说一下另一个特别的对象---数组。在网上有很多对于数组的定义，例如：数组对象是使用单独的变量名来存储一系列的值，简单理解，我们可以说数组就是一组或者说是一系列数据的集合。我们都知道，数组是我们在使用JavaScript开发中用到最多的类型之一，在JavaScript中，数组有以下两个主要特点：...

2019-10-24 10:31:59 10299 1

原创 TypeScript学习（四）：对象的定义及使用

前面我们说到了数据类型，像什么布尔类型，数值类型，字符串类型等等，在开发中，我们还会遇到很多像对象、数组、函数等类型，那么在typescript中是怎么定义这些类型的？对象(object)我们先介绍下在JavaScript中式怎么定义对象的，在我之前的博客中有提到关于原型链的理解，那里面有对于对象的构造函数-实例对象-原型对象的一个介绍（浅谈我对原型链的理解），这里我再简单说一下，在Jav...

2019-10-23 13:34:01 29134 4

原创 TypeScript学习（三）：联合类型及推论

前面说到了typescript中的数据类型的定义及类型推论，定义的方式也就是单数据类型定义或者是任意类型的定义，但是我们在开发中，有时候会涉及到一些变量的值类型校验，例如只需要数值和字符串，或者数值和布尔值等等，这个时候，我们就需要利用typescript中的联合类型的定义方式，如下：let a : string | number;看到上面的定义方式，我们可以从字面意思上理解，意思是我...

2019-10-23 10:41:04 990

原创 TypeScript学习（二）：任意类型及推论

上文我们提到typescript（以下统称为“TS”）中原始数据类型的一些声明方式，不难看出，TS中的数据定义方式跟JS是大同小异的，但是在JS中，我们常常会声明一个变量，如：var a; // 声明变量a此时，我们在后台打印a的值是undefined，因为我们定义了变量a，但是没有赋值，在声明之后，我们可以随意给变量a赋值，例如：a = 1; 或者 a = 'string'; ...

2019-10-22 14:44:41 595

原创 TypeScript学习（一）：原始数据类型的定义

这篇博客主要是讲述TS中原始数据类型的定义，有不足之处，还望大家指点（这里就不赘述TS的安装及编译方式了，详情可前往官网查看）：Typescript中原始数据类型：布尔类型（boolean）、数值类型（number）、字符串类型（string）、undefined、null等；一、布尔类型（Boolean）在JS中创建布尔值有两种语法格式：构造函数（new Boolean(value)...

2019-10-21 16:12:21 716

原创循环匹配对应筛选（2）

下面的代码模拟的场景是：筛选目标数据流，将目标数据内的相同键类型的值存到同一个数组；现定义一个模拟的数据流：var newFeature = [ { "attributes": { "XL": "高中", "CYRYQMRS": 61, "CYRYQMNX": 39 } }, { "attributes": { "XL": "大专", "C...

2019-07-25 11:03:08 206

原创 H5页面--Android滑动屏幕图片误触

处理移动端上点击有300ms延迟的方法，我们通常会用fastclick.js来解决，但是调用fastclick.js可能会导致另一个问题，就是在安卓端的时候，H5页面未加载完时，滑动页面如果误触图片，会触发图片的点击事件，这在实际应用中是很不好的体验，在此，我自己在开发中遇到，给出如下的一套解决方案：判断页面是否加载完毕，未加载完时不让触发点击事件，加载完毕才允许触发点击事件documen...

2019-06-19 11:28:14 626

原创上拉加载更多

在开发中，不管是移动端还是web端，我们经常会遇到上拉加载更多的需求，有些时候，我们不想用scrollTop来判断，因为这样需要获取到页面的高度，比较麻烦，所以可以使用下面这种方式，完全不同去计算页面滚动的高度，奉上代码(angularJS,可根据自己的实际框架情况进行修改)：首先，我们先定义一个分页设置的对象：$scope.pages = { total: 0, cur...

2019-06-11 17:34:21 1050

THREEJS - 基于A*算法实现自动避障的功能

空空如也