随笔分类 - javascript
摘要：动画 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" } }
阅读全文
摘要：加载各种模型 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/"
阅读全文
摘要：init.js增加共用方法 function addMaterialSettings(gui, controls, material, folderName = "Material") { controls.material = material; const folder = gui.addFol
阅读全文
摘要：Group <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" }
阅读全文
摘要：mesh之位置、缩放、平移、旋转属性 <canvas id="mesh-properties"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addon
阅读全文
摘要：开发过程中常常会遇到echarts图由于容器隐藏导致图表不显示问题，最简单的办法就是给容器元素加上宽度和高度 容器加上固定的宽度和高度 <div id="res" style="height: 450px;width:1200px"></div> 然而在实际开发中某些场景下，要求图表宽度100%显示
阅读全文
摘要：最近发现了个问题：ajax post请求查询参数数量动态变化有200-250000个，当参数超过一定数量N时，post传到后台接的参数就只有N个，多出的参数都没附到请求中，这也是奇怪的事情，浏览器对参数的个数有限制。 js const payload = { date: "2024-05-10",
阅读全文
摘要：静态场景 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" }
阅读全文
摘要：很久没写上传文件的功能，偶然在laravel中用jquery ajax发送FormData对象居然报错了，记录下解决方法。 路由 <?php Route::get('test/fileUpload', [TestController::class, 'fileUpload']); Route::po
阅读全文
摘要：仍然是 在图片上特定区域根据数值显示不同的颜色 的需求。拖了这么久，最终的解决方案终于定下来了：使用aoi检测设备导出的坐标来标定需显示数值和颜色的区域，如此一来就不需要人操作UI界面来标定数值的显示区域。 最终使用echarts显示的方法有2种： 地图map+使用坐标标记区域且区域有name属性的
阅读全文
摘要：初始化共用方法 <canvas id="model"></canvas> <canvas id="texture"></canvas> <canvas id="shadow"></canvas> <canvas id="color"></canvas> <script type="importmap
阅读全文
摘要：本系列中案例参考自 https://github.com/josdirksen/learning-threejs-third 动画 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three":
阅读全文
摘要：为了便于后面的学习封装了几个初始化的函数 import { WebGLRenderer, PerspectiveCamera, AmbientLight, SpotLight, PointLight, DirectionalLight, PlaneGeometry, BoxGeometry, Sph
阅读全文
摘要：记录下three.js的学习历程。 Three.js是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。 Three.js擅长 WebGL 场景渲染，Three.js不擅长物理碰撞，因此不适合开发 3D 游戏 three.js基本概念包括画布Canvas、渲染器Renderer
阅读全文
摘要：要使用js计算线性渐变的中间值，记录下。 两个RGB颜色的中间颜色值 <style> #colors { margin-top: 2rem; display: flex; } #colors div { width: 100px; height: 100px; } </style> <div id=
阅读全文
摘要：框选图片区域制作echarts图 这个需求的坑终于填的差不多了 写个demo记录下 生成的svg图代码如下：可以看出svg部分节点有name属性，echarts正是对应此name属性来显示具体数值。 <?xml version="1.0" encoding="UTF-8" standalone="n
阅读全文
摘要：仍然是 在图片上特定区域根据数值显示不同的颜色 的需求，改进下代码。 增加了测量辅助线、对齐辅助线、生成svg图等，基本满足需求。 demo中包括了生成json、svg字符串和下载svg图。导出的svg图使用时需注意背景图的路径问题：url地址且可访问。 <script src="../plugin
阅读全文
摘要：使用bootstrap的tab页组件中发现了一个问题：需要使用js切换，试用了官方文档中的方法和jquery触发点击事件，发现居然报错或者不起作用。 在此记录下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met
阅读全文
摘要：仍然是 在图片上特定区域根据数值显示不同的颜色 的需求，过了这么久，svg图迟迟提供不了，考虑canvas方案。记录比较下canvas及各canvas框架的使用。 canvas <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title
阅读全文
摘要：改一个页面：js新打开一个页面，页面的地址为一个get请求接口，由于传递的字符串变多，要改为post请求。 没办法使用js打开新窗口这种了，考虑ajax请求。写个demo记录下 <script> function downloadFile(url, data) { $.ajax({ url: url
阅读全文
