carol2014 - 博客园

2024年4月

three.js基础之加载外部模型、纹理贴图、投射阴影、几何体颜色属性、面模型属性

摘要：初始化共用方法 <canvas id="model"></canvas> <canvas id="texture"></canvas> <canvas id="shadow"></canvas> <canvas id="color"></canvas> <script type="importmap 阅读全文

posted @ 2024-04-05 17:14 carol2014 阅读(496) 评论(0) 推荐(0)

three.js基础之简单动画、GUI、Controls、相机、灯光、简单材质

摘要：本系列中案例参考自 https://github.com/josdirksen/learning-threejs-third 动画 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": 阅读全文

posted @ 2024-04-05 16:59 carol2014 阅读(174) 评论(0) 推荐(0)

three.js基础之Curve、Geometry

摘要：为了便于后面的学习封装了几个初始化的函数 import { WebGLRenderer, PerspectiveCamera, AmbientLight, SpotLight, PointLight, DirectionalLight, PlaneGeometry, BoxGeometry, Sph 阅读全文

posted @ 2024-04-05 16:36 carol2014 阅读(135) 评论(0) 推荐(0)

three.js基础

摘要：记录下 three.js 的学习历程 Three.js 是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。 Three.js 擅长 WebGL 场景渲染，Three.js不擅长物理碰撞，因此不适合开发 3D 游戏。 three.js基本概念包括画布 Canvas、渲染器 Re 阅读全文

posted @ 2024-04-05 14:35 carol2014 阅读(80) 评论(0) 推荐(0)

php给pdf文件加上水印

摘要：最近要开发给pdf文件增加水印的程序，因此研究了几个php生成pdf的类库，记录下。首先要能够读入pdf文件，然后给pdf文件增加水印，然后能够导出。检索资料发现FPDI可以读入pdf文件。 FPDI安装先安装下几个库，以备后面使用： { "require": { "setasign/fpdf" 阅读全文

posted @ 2024-04-03 11:41 carol2014 阅读(1314) 评论(0) 推荐(0)

2024年3月

js计算线性渐变的中间颜色值

摘要：要使用 js 计算线性渐变的中间值，记录下。两个RGB颜色的中间颜色值 <style> #colors { margin-top: 2rem; display: flex; } #colors div { width: 100px; height: 100px; } </style> <div i 阅读全文

posted @ 2024-03-28 16:32 carol2014 阅读(208) 评论(0) 推荐(0)

使用fabric.js生成的svg图制作echarts的map图表

摘要：框选图片区域制作 echarts 图这个需求的坑终于填的差不多了，写个 demo 记录下。生成的 svg 图代码如下：可以看出 svg 部分节点有 name 属性，echarts 正是对应此 name 属性来显示具体数值。 <?xml version="1.0" encoding="UTF-8" 阅读全文

posted @ 2024-03-28 15:24 carol2014 阅读(156) 评论(0) 推荐(0)

使用fabric.js框选图片区域并生成svg图

摘要：仍然是在图片上特定区域根据数值显示不同的颜色的需求，改进下代码。增加了测量辅助线、对齐辅助线、生成svg图等，基本满足需求。 demo 中包括了生成 json、svg 字符串和下载 svg 图。导出的 svg 图使用时需注意背景图的路径问题：url 地址且可访问。 <script src=".. 阅读全文

posted @ 2024-03-28 15:06 carol2014 阅读(566) 评论(0) 推荐(0)

js切换bootstrap的tab页

摘要：使用 bootstrap 的 tab 页组件中发现了一个问题：需要使用 js 切换，试用了官方文档中的方法和 jquery 触发点击事件，发现居然报错或者不起作用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <m 阅读全文

posted @ 2024-03-25 14:12 carol2014 阅读(135) 评论(0) 推荐(0)

使用fabric.js框选图片区域定位标注图片内容

摘要：仍然是在图片上特定区域根据数值显示不同的颜色的需求，过了这么久，svg 图迟迟提供不了，考虑 canvas 方案。记录比较下 canvas 及各 canvas 框架的使用。 canvas <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> 阅读全文

posted @ 2024-03-20 12:01 carol2014 阅读(1107) 评论(0) 推荐(0)