Kreme的博客

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

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

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

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

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

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

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

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

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

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