发布于2020/03/10 19:03
Vue+Three.js 入门八(使用canvas自定义纹理)
[图片]
前言
通常一个3D场景必不可缺少元素的是一个数据的显示,像3D游戏里的人物血条、3D工厂里面的大屏生产数据(类似上图),因为这些数据都是实时的,我们不可能用像图片这种静态资源来渲染,况且有时显示样式还比较复杂,所以我们需要自定义这些实时数据的显示,这里的核心便是canvas。
核心知识点
1、canvas:一系列canvas的操作,渲染文字、绘画图片、...
- 5225
发布于2020/03/06 18:14
Vue+Three.js 入门七(模型根据轨迹自动移动和转向)
[图片]
前期的思路分享
为了实现模型给定像上图中蓝色的轨迹之后来回走动的效果(卫兵巡逻),我一开始的思路就是根据模型坐标和模型的下一个坐标计算出夹角(v1.angleTo(v2);加上特定的方式计算出模型向左转还是向右转),然后用模型的rotation累加累减的方式实现转向效果,实际上模型是在不停转动,并且代码繁多,十分不可取,所以分享一下我这个失败的思路。下面是成功实现效果的...
- 5771
发布于2020/03/06 18:09
Vue+Three.js 入门六(控制模型动画)
[图片]
核心知识点
1、AnimationMixer(Object3D):混合器播放的动画所属的对象。当场景中的多个对象独立动画时,每个对象都可以使用同一个动画混合器。我们可以理解为模型的动画引擎,有了它我们就可以操作动画。
2、AnimationClip(String,Number,Array):动画编辑器,当我们导入的模型存在动画时,模型数据里面的anima...
- 3247
发布于2020/02/29 15:17
Vue+Three.js 入门五(实现流动管道效果)
[图片]
实现流动管道的思路
在到这里的同学应该是对Three.js的基础有了一定的认知,如果对材质不太了解的同学可以去官方网站查阅一下资料。
言归正传,如果想要完成一个可以看见管道内部流水的效果,首先离不开的是构造函数“管道几何体(TubeGeometry)”,它可以根据三维点坐标,连接起来进而生成一个管道体,但是...
- 15922
发布于2020/02/29 13:49
Vue+Three.js 入门四(鼠标点击模型实现交互)
[图片]
实现点击模型触发事件的思路
在一个3D场景中,事件的交互大部分是点击鼠标完成的,像上图显示的那样,我点击了3号车间,然后与其对应的生产数据框就显示出来了。那么“它”是怎么知道我点击的就是3号车间,这里就用到Three里的一个构造函数“光线投射Raycaster”,Raycaster里的一个方法“s...
- 6116
发布于2020/02/20 18:20
Vue+Three.js 入门三(使用OrbitControls操作镜头)
官方列举的属性
.autoRotate : Boolean
将其设为true,以自动围绕目标旋转。
请注意,如果它被启用,你必须在你的动画循环里调用.update()。
.autoRotateSpeed : Float
当 .autoRotate : Boolean为true时,围绕目标旋转的速度将有多快,默认值为2.0,相当于在60fps时每旋转一次需要30秒。
请注意,如果 ...
- 5572
发布于2020/02/20 18:10
Vue+Three.js 入门二(导入obj文件)
前期爬过的坑
关于obj文件的读取肯定是用到一个构造函数OBJLoader,然而他并不在three.js里面,vue中只是 import * as THREE from 'three'是远远不够的,然而我们如何引用OBJLoader?去官方文档没有给出明确,但是官方给了示例:
可引入的示例
three.js的核心...
- 5402
发布于2020/02/18 16:07
Vue+Three.js 入门一(搭建第一个3D场景)
前言
由于本文介绍的是Vue + Three.js,所以首先我们肯定需要下载依赖包,一般地执行npm install three -s即可,可根据需求加装其他依赖包(新版本中不需要这些):
安装轨道控件插件:npm install three-orbit-controls
安装加载.obj和.mtl文件的插件:npm i --save three-obj-mtl-l...
- 3237
发布于2020/02/16 14:28
Vue公众号项目iOS分享失败的原因和解决方法
Vue公众号项目iOS分享失败的原因和解决方法
分享失败的原因
1、首先我们需要了解页面流程,如下图所示:通常的进入公众号的首个页面是A页面,这个页面的作用是获取用户信息和一些该系统需要一些基础支撑数据,然后根据具体的逻辑跳转不同界面,就像图上例子一样,没有授权跳转B授权界面,用户授权之后跳转C公众号主界面,这里我们的D就是需要分享的界面。
[图片]...
- 3023
发布于2019/03/26 18:36
element-admin 七牛云上传图片,拿走不谢
好久没写了…言简意赅,直接介绍el-upload怎么实现七牛云上传图片以及其中的注意事项。
首先先看下面一串代码:
<el-form-item >
<el-upload
action="http://up-z0.qiniup.com"
list-type="picture...
- 5197
发布于2018/12/12 15:57
vue2.0 checbox的点击事件(使用心得)
vue项目开发在使用CheckBox时遇到一个点击响应问题,归根结底就是复选框当前v-model的数据点击响应问题。直接结合代码来说:
Html部分:
<input type="checkbox" id="label" v-model=" isChoose " />
<label f...
- 2955
发布于2018/12/12 15:56
VS2015 .Net 发布web新资源打包问题
在.Net开发中,有时我们会在项目系统文件夹里中一个文件如:js、txt等,然而,VS一般这些文件debug模式下可以使用,但是到了发布的时候这些文件是不会一起发布的,这个时候他们的样子是这样的:
[图片]
这些发布不了就意味着,部署的网站使用到这些的某个资源文件时会报错。
一开始不会用,都是将这些资源文件粘贴复制到发布好的对应的文件夹下,这个...
- 2983
发布于2018/10/24 17:35
idea javaFx项目 用exe4j打包成exe(包含第三方jar包和文件读写路径问题)
Idea环境FX项目如何引用第三方jar包
个人习惯,非maven项目引用的jar包我都会放在lib里面,这里面就是整个项目需要用到的第三方jar包们。
[图片]
然后,能够让整个项目调用,在project setting里面设置一下即可,如下图:
[图片]
[图片]
添加完之后点击Apply,然后发现第三方程序已经可以使用。
如何将FX项目打包成jar包
...
- 5617
发布于2018/09/14 10:58
自我勉励的文章
转:
数据结构与算法
我们为什么要学数据结构与算法、设计模式
革命尚未成功,需努力提升自己。
不自满、有创新、不断积累、加油!
...
- 2794
发布于2018/08/29 12:11
css 修改滑动条样式
有的时候网页布局中间部分用了overflow: scroll;(当然这种设计是不常见的),当有的时候,一旦中间部分出现滑动条且样式和全局不搭,那视觉效果会大打折扣,但是那一块还必须要有滑动条,这个时候为了满足视觉效果就需要修改修改滑动条样式了,css代码如下:
::-webkit-scrollbar
{
/*
width: y 轴上的滑动条宽度;
...
- 2631