webgl从入门到成仙
webgl、three.js学习,从基础到打造大型3D场景
2024路在何方
某行业全球top1企业的前端主管
展开
-
webgl入门到成仙【入门-04wegbl的实际绘图思路】
04webgl的实际绘图思路 知识点 webgl的绘图思路 找一台电脑 浏览器里内置的webgl渲染引擎,负责渲染webgl图形,只认GLSL ES语言 找一块手绘板 程序对象,承载GLSL ES语言,翻译GLSL ES语言和js语言,使两者相互童心 找一只触控笔 通过canvas获取的webgl类型的上下文对象,可以向手绘板传递绘图命令,并接收手绘板的状态信息 开始画画 通过webgl类型的上下文对象,用js画画 webgl的绘图步骤 在html中建立canvas画布原创 2021-03-01 22:49:22 · 401 阅读 · 0 评论 -
webgl入门到成仙【入门-03多姿多彩的画布】
03多姿多彩的画布 知识点 color对象: 我们可以采用thress.js中的Color类,去new一个color对象,然后传入rgb颜色,就可以取到webgl的rgb的色值,不需要再学写一段代码去转换了 // 建立Color对象 const color = new Color("rgb(255, 0, 0)") // 有了color以后,可以对color进行取色,color.r、color.g、color.b,注意没有a的属性,color下面还有其他很多属性 let {r,原创 2021-03-01 22:46:18 · 430 阅读 · 2 评论 -
webgl入门到成仙【入门-02CSS颜色转webgl颜色】
02CSS颜色转webgl颜色 知识点 css的颜色rgba值的范围是: - 前面三个参数是颜色为0255,第四个参数是透明度为01 2. webgl的颜色rgba值的范围是: - 前面三个参数是颜色,第四个参数是透明度,四个参数均为0~1 3. css的颜色rgba转webgl颜色rgba的方法: - 先将css的rgba用正则获取出四个参数 - 然后将三个颜色除以255,透明度不用变 // css颜色 const rgbaCss = 'rgba(255,10原创 2021-03-01 22:43:07 · 475 阅读 · 0 评论 -
webgl入门到成仙【入门-01刷底色的基本步骤】
01刷底色的基本步骤 知识点 css刷底色跟webgl刷底色有本质区别: css刷底色是无法做webgl运算的 设置canvas属性,不要再css设置,要设置在canvas的DOM上 二维画笔 const gl = canvas.getContext(“2d”); 三维画笔 const gl = canvas.getContext(“webgl”); 清除画布,并给画布声明颜色,但是不是涂上底色,涂上还需要加一步gl.clear(gl.COLOR_BUFFER_BIT); 这原创 2021-03-01 22:39:37 · 326 阅读 · 0 评论