ThreeJs常用材质介绍

为了方便开发Threejs提供了一系列的材质,所有材质就是对WebGL着色器代码的封装,如果你不了解WebGL,会通过查阅Threejs文档使用相关材质类即可。点材质PointsMaterial点材质比较简单,只有PointsMaterial,通常使用点模型的时候会使用点材质PointsMaterial。点材质PointsMaterial的.size属性可以每个顶点渲染的方形区域尺寸像素大小。va

- 阅读全文 -

ThreeJS 设置材质效果

半透明效果更改场景中的球体材质对象构造函数THREE.MeshLambertMaterial()的参数,添加opacity和transparent属性,opacity的值是0~1之间,transparent表示是否开启透明度效果, 默认是false表示透明度设置不起作用,值设置为true,网格模型就会呈现透明的效果,使用下面的代码替换原来的球体网格模型的材质, 刷新浏览器,通过鼠标旋转操作场景,可

- 阅读全文 -

settimeout、setinterval区别和相互模拟

看到“避免双重求值”一节时有提到settimeout()、setinterval() 建议传入函数而不是字符串以作为第一个参数,所以这里总结一下settimeout()和setinterval()的区别,以及它们之间的相互模拟。setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式(函数更好,下面会解释为什么函数更好!)。语法:setTimeout(code,millisec)cod

- 阅读全文 -

EVAL IS EVIL?(eval 函数是魔鬼吗?) eval can be harmful

eval can be harmful1. eval的用法?eval() 函数可以用来计算某个字符串,并执行其中的javascript代码。其语法eval(string);如果传入的参数不是字符串,则直接返回这个参数。2. eval在什么时候使用?当我们预先不知道执行什么语句,只有条件和参数给定时才知道执行什么语句3. why eval is evil ?eval is evil这句话是Dougl

- 阅读全文 -

js中~~和 | 的妙用

双~的用法~~它代表双非按位取反运算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,对于正数,它向下取整;对于负数,向上取整;非数字取值为0,它具体的表现形式为:~~null; // => 0 ~~undefined; // => 0 ~~Infinity; // => 0 --NaN; // => 0 ~~0;

- 阅读全文 -

着色器语言 GLSL (opengl-shader-language) 基础入门必看

着色器语言 GLSL (opengl-shader-language)基本类型类型说明void空类型,即不返回任何值bool布尔类型 true,falseint带符号的整数 signed integerfloat带符号的浮点数 floating scalarvec2, vec3, vec4n 维浮点数向量 n-component floating point vectorbvec2, bvec3,

- 阅读全文 -

3D图像不是有XYZ轴吗?为什么会有XYZW轴这一说???

3D图像不是有XYZ轴共3根轴吗?为什么会有XYZW轴这一说???显卡运算提及到像素RGBA和顶点XYZW都称为4D矢量运算像素的四个通道RGB(三原色)和A(透明度)这个4D矢量XYZ比较常见,但就是不懂得W轴是哪根轴这个W轴指的是什么?纯空间性的四维空间另有一对垂直于其他三个主要方向的主要方向。这一对方向处在另一条同时垂直于x、y、z轴的坐标轴上,通常称作w轴。对这两个方向的命名,人们的看法不

- 阅读全文 -

双击鼠标左键选中模型并显示信息

双击鼠标左键选中模型并显示信息。坐标系的概念首先,解释一下三种坐标系的概念:场景坐标系(世界坐标系)、屏幕坐标系、视点坐标系。场景坐标通过three.js构建出来的场景,都具有一个固定不变的坐标系(无论相机的位置在哪),并且放置的任何物体都要以这个坐标系来确定自己的位置,也就是(0,0,0)坐标。例如我们创建一个场景并添加箭头辅助。屏幕坐标在显示屏上的坐标就是屏幕坐标系。如下图所示,其中的clie

- 阅读全文 -

通过引入模型文件实现3d展示

ThreeJS 官方提供了DRACOLoader GLTFLoader MMDLoader MTLLoader OBJLoader OBJLoader2 PCDLoader PDBLoader PRWMLoader SVGLoader TGALoader本次实验使用的是GLTF格式注意:实验demo 仅参考了现有gltf模型可行性,若非gltf格式模型,尽可能转换为gltf或上

- 阅读全文 -

Vue/React页面引入three.js实现3d动画场景

页面引入three.js实现3d动画场景研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三方库。Three.js是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机、视角、材质等相关属性来创造大量3D动画场景。所需依赖我们开始引入three.js相关插件。npm install three2.接下来利用npm安装轨道控件插件:npm install thre

- 阅读全文 -

AxiosStream-使用Axios和Blob对象实现文件流下载(axios二进制流文件下载)

AxiosStream通过axios下载流文件该库仅适用于使用axios作为HTTP请求库的WEB项目请先安装axios,然后再使用axios-stream 它解决的问题:使用Axios和Blob对象实现文件流下载如何使用:1.安装npm install axios-stream或yarn add axios-stream2.参考从“ axios-stream”导入AxiosStream;3.调用

- 阅读全文 -

AXIOS 执行多个并发请求

执行多个并发请求AXIOS官方处理方式 const getUserAccount =()=> { return axios.get('joynop.com/user/12345'); } const getUserPermissions =()=> { return axios.get('joynop.com/user/12345/permissions'); } ax

- 阅读全文 -