个人开发的公司 【长城网络靶场竞技系统】项目里面数据可视化大屏展示系统,产品的视觉效果得到了极大提升,远超竞争对手。
运用了Three.js这个WebGL开源库,效果设计,贴图制作,模型修改,代码开发均自己搞定。
[……]
Javascript WebGL Threejs TypeScript Vue Webpack npm
运用了Three.js这个WebGL开源库,效果设计,贴图制作,模型修改,代码开发均自己搞定。
[……]
如果你想要在3D效果中表达例如,星星、灰尘等效果,就要用到很多粒子,Three.js中提供了这样一个类 THREE.Point 。[……]
效果如图,如何来实现这个效果呢?首先我们要把问题分解,然后细化每个部分,分析用到哪些技术点,有哪些困难,最后再着手开发。[……]
在Three.js中使用着色器时,片段着色器所需的最小计算如下:[……]
外积,数学中又称向量积、叉积,物理中称矢积、叉乘,是一种在向量空间中向量的二元运算。与点积不同,它的运算结果是一个向量而不是一个标量。并且两个向量的叉积与这两个向量和垂直。其应用也十分广泛,通常应用于物理学光学和计算机图形学中。[……]
内积是向量的乘法,如“OA·OB”。它由以下表达式表示:
OA・OB = |OA||OB|cosθ
例如,如果OA向量的长度为2,则OB向量的长度为1,两个向量之间的角度为60度:
OA・OB = |OA||OB|cosθ = 2 x 1 x 0.5;
从该结果可以看出,加法和减法的情况下,计算结果是一个向量,而内积的计算结果则是一个数值。[……]
向量在3D内容的制作中是一个有用的概念,下面我们将一同学习一下Three.js中使用加法和减法计算坐标的方法,这是矢量的基础。[……]
想要有效的控制物体,做出绚丽的效果,那么下面的这些公式对你来说是非常重要的。[……]
很多时候我们为了有效的管理一些物体,我们需要把他们放到同一个THREE.Group()中去。那么移动或旋转Group时怎么获取内部某个元素的绝对坐标呢?[……]