柠檬菜菜-CSDN博客

原创 three.js中dat.gui.js的使用

dat.GUI是一个轻量级的图形用户界面库，使用这个库可以很容易地创建出能够改变代码变量的界面组件。一.使用方法1、使用script标签添加dat.gui.js库<script src="./js/dat.gui.js"></script>2、定义一个对象，用来存储需要改变的属性GUI={}3、将上一步定义的对象传给dat.gui对象var datGUI=new dat.GUI();datGUI.add(GUI,"GUI中的对象名",取值范围);二.控件类型

2021-04-09 16:09:02 2809

原创 three.js导入外部模型的动画后通过点击事件调用

通过上一篇将外部模型及动画导入到页面中后，还需要对动画进行一些控制操作，因此此篇主要讲述如何添加点击事件对动画进行一定的控制。注意：以下操作都是基于导入模型及动画之后的参考上一篇：three.js导入外部模型—FBX1、添加监听事件document.addEventListener('dblclick',onDocumentMouseDown,flse);//第一个参数：事件名称//第二个参数：事件发生时调用的函数//第三个参数：布尔值，指定是使用事件冒泡还是事件捕获，true为事件捕获，fa

2021-04-06 16:40:02 1600 3

原创 three.js导入外部模型—FBX

导入fbx格式的模型基于上一篇关于导入obj模型，此篇主要讲述如何导入fbx格式的模型。两者区别：obj模型只是静态模型，而fbx模型是可以带有动画的模型。导入静态fbx模型1、引入fbx模型加载库FBXLoader.js<script src="js/FBXLoader.js"></script>2、引入inflate.js文件<scriipt src="js/inflate.js"></script>如果不引入该文件会出现报错信息：T

2021-03-19 16:07:33 8999 3

原创 three.js导入外部模型—obj

一、导入obj格式的模型只加载obj文件：即只加载obj文件中的几何信息，不加载材质文件，系统自动设置phong网格材质1、引入obj模型加载库OBJLoader.js<script src="./OBJLoader.js"></script>2、定义obj模型加载器var loader=new THREE.OBJLoader();3、进行加载loader.load("./几何体.obj",function(obj){ console.log(obj); //可

2021-03-09 10:23:22 4245 1

原创 three.js网格组合—使用threeBSP库

为了实现更多模型的样式，可以使用threeBSP库中的三种函数对现有网格模型进行组合。1.相关函数intersect（交集）：使用该函数可以基于两个现有几何体的重合的部分定义此几何体的形状。union（并集）：使用该函数可以将两个几何体联合起来创建出一个新的几何体。substract（差集）：使用该函数可以在第一个几何体中移除两个几何体重叠的部分来创建新的几何体。2.具体用法1、使用script标签引入threeBSP库<script src="../js/ThreeBSP.js"&gt

2021-03-02 11:04:07 666

原创 three.js添加鼠标事件—使用onEvent.js插件

three.js的官方文档中提供了一个Raycast类进行物体拾取来实现模型鼠标事件，其原理就是先建立一个Raycaster对象，通过setFromCamera函数向场景物体发出射线，再通过intersectObject检测射线投射到的物体。很显然这种点击物体实现代码有些繁琐，因此通过不断地查询资料，找到一个封装了鼠标事件的插件，即onEvent.js插件。相比之下，使用插件更加简便易懂。onEvent.js的使用方法1、引入使用script标签引入onEvent.js2、初始化确保已经引入onE

2021-02-26 14:39:56 1661 3

原创 three.js创建不规则几何

ExtrudeGeometry（挤压几何体）ExtrudeGeometry是通过shape对象生成几何体对象，利用2D轮廓生成3D模型。原理是先绘制一个二维的轮廓图，然后拉伸或扫描成型得到三维模型。1、拉伸成型2、扫描成型...

2021-02-25 08:46:16 2375

原创 web前端使用websocket获取ActiveMQ消息队列

1.websocket1、websocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。2、websocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。3、websocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。2.activeMQ1、MQ:Message Queue 消息队列，就是用来在系统之间进行消息传递的。2、MQ俗称消息队列,也称为消息中间件,是一种在分布式系统中应用程序借以

2021-02-24 08:48:08 2958

原创 WebGL基础学习—three.js

1.基础概念WebGL是在浏览器中实现三维效果的一套规范three表示3D的意思，js表示JavaScript的意思。即three.js是基于原生WebGL封装运行的三维引擎。2.开发环境浏览器：Chrome、FireFox、360安全浏览器6.0js开发工具：VScode、WebStorm3.应用1、引用使用script标签，引入three.js文件2、创建场景构建一个新的场景：var scene=new THREE.Scene();3、创建相机添加一个相机固定视角：var cam

2021-02-23 10:47:15 749

原创字体图标的引入

一、下载图标百度搜索“iconfont”，进入icon font官网。链接：icon font官网选择需要引入的图标，点击“购物车”图标，添加入库。3.点击右上角“购物车”图标，弹出购物车窗口，选择“添加至项目”。4.弹出“添加项目”窗口5.点击右上角的“文件夹图标”，添加一个新项目，点击“确定”，显示添加成功。6.选择font class，点击右侧的“查看在线链接”。7.弹出“代码”。8.点击“复制代码”，打开一个新标签页，复制代码地址，打开.css的源代码。二、引入

2020-08-07 16:17:24 705

原创 gitee的使用

一.注册 1、打开浏览器搜索输入gitee，打开gitee官网。 2、点击“注册”按钮，输入注册信息后提交注册。 3、验证--->注册成功。二、新建仓库 1、登录之后，点击页面中右上角的“+”号，选择新建仓库。 2、依次输入仓库名称、仓库介绍以及选择是否开源。 3、点击“新建”按钮，则仓库新建成功。该仓库就是对应一个远程仓库。三、个人使用 1、登录个人gitee账号，新建一个仓库，即远程仓库。 2、然后在本地新建一个文件夹，即本地仓库。

2020-07-31 15:41:10 2540

赵佳佳的博客