WebGL技能 - 随笔分类 - 琥珀君

WebGL_0020：threejs 加载glb模型，加载图片贴图，加载canvas贴图，创建精灵模型并贴图，设置正交相机射线方法

摘要：1，threejs 加载glb模型 import * as THREE from 'three'; import type { MapViewer } from '@/utils/map3d/mapViewer'; import { STATIC_URL } from '@/config'; imp 阅读全文

posted @ 2024-09-05 17:38 琥珀君阅读(357) 评论(0) 推荐(0)

WebGL_0019：three.js 欧拉角和四元数

摘要：1, 这篇说说欧拉角和四元数，欧拉角和四元数的优缺点是老生常谈的话题了，使用条件我就不多说了，我只说一下使用方法。 1. 欧拉角（Euler）欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。下面我们开看看它的方法 1. set( x: number, y: num 阅读全文

posted @ 2023-11-14 15:51 琥珀君阅读(48) 评论(0) 推荐(0)

WebGL_0018：ES平台背景透明效果

该文被密码保护。

posted @ 2021-02-26 13:58 琥珀君阅读(0) 评论(0) 推荐(0)

WebGL_0017：大屏多点触控多人同步操作 hammer.js

该文被密码保护。

posted @ 2020-09-13 11:01 琥珀君阅读(0) 评论(0) 推荐(0)

WebGL_0016：定制开发音乐视频模块

该文被密码保护。

posted @ 2020-08-22 12:50 琥珀君阅读(0) 评论(0) 推荐(0)

WebGL_0015：参数值在一定范围内循环变化

摘要：1， MeterialUv.prototype.upAdoEssLoop = function(e, a, b, s) { if (e) { upAdoEssLoop.upAdoEssFlag ? (e.emissiveIntensity += s) : (e.emissiveIntensity - 阅读全文

posted @ 2020-08-15 19:34 琥珀君阅读(138) 评论(0) 推荐(0)

WebGL_0014：改变相机的刷新颜色

摘要：1， CameraColorShift.prototype.OnColorShift = function(a) { switch (a) { case 0: targetColor = this.colorTable_1; break; case 1: targetColor = this.col 阅读全文

posted @ 2020-08-13 21:51 琥珀君阅读(148) 评论(0) 推荐(0)

WebGL_0013：JQuery获取json文件读取数据

摘要：1， $.get("https://xxx/gjbz_share.json", function(e) { t._path = e[t.name] }) 阅读全文

posted @ 2020-08-11 16:33 琥珀君阅读(220) 评论(0) 推荐(0)

WebGL_0012：三维讲解导航模板 Icon方式

摘要：1， css样式 /* 导航主按钮模板2 */ .iconElement { width: 50%; /* 高度等于这个元素的宽度 * li元素的宽度 */ height: 2vw; text-align: center; display: inline-block; position: abs 阅读全文

posted @ 2020-08-10 10:24 琥珀君阅读(200) 评论(0) 推荐(0)

WebGL_0011：我的渲染引擎代码注释获取配置文件组件参数

该文被密码保护。

posted @ 2020-07-30 18:27 琥珀君阅读(0) 评论(0) 推荐(0)

WebGL_0010：横屏，竖屏样式切换 JS判断

摘要：1，写在一个CSS中 /* 竖屏模式 */ @media screen and (orientation: portrait){ /* 主按钮 */ .PageBut1N { width: 10%; height: 8%; top: 90%; left: 38%; } } /* 横屏模式 */ @m 阅读全文

posted @ 2020-07-29 15:30 琥珀君阅读(769) 评论(0) 推荐(0)

WebGL_0009：canvas 画布旋转90度

摘要：1， var ii = this.app.graphicsDevice.canvas.parentElement; var ee = this.app.camera; var nn = ee ? ee.script.orbitCamera : null; var a = window.innerWi 阅读全文

posted @ 2020-07-27 16:56 琥珀君阅读(1198) 评论(0) 推荐(0)

WebGL_0008：支持移动端的控制台调试工具

摘要：1， <! 调试代码 start > <script src="http://cdn.jsdelivr.net/npm/eruda"></script> <script> eruda.init(); </script> <! 调试代码 end > 2，阅读全文

posted @ 2020-07-16 09:32 琥珀君阅读(269) 评论(0) 推荐(0)

WebGL_0007：强制横屏的参考

摘要：1， var gt, vt = S.a.register("OrientationManager")(dt = function() { function t(t) { var e = this; ! function(t, e, n) { e in t ? Object.definePropert 阅读全文

posted @ 2020-07-15 23:14 琥珀君阅读(1084) 评论(0) 推荐(0)

WebGL_0006：PlayCan替换材质和贴图的方法

摘要：// 6 9 0 10 8 // this.body2.model.model.meshInstances[22].material.emissive = new pc.Color(255, 0, 0); // 替换材质 mod.body.model.model.meshInstances[6].m 阅读全文

posted @ 2020-05-24 12:45 琥珀君阅读(401) 评论(0) 推荐(0)

WebGL_0005：获取加密字符串方法

该文被密码保护。

posted @ 2019-11-22 10:35 琥珀君阅读(3) 评论(0) 推荐(0)

WebGL_0004：带贴图的材质透明效果

摘要：在材质中： "blendType": 2, 阅读全文

posted @ 2019-10-29 00:13 琥珀君阅读(348) 评论(0) 推荐(0)

WebGL_0003：正则表达式查找字符串

摘要：1，查找字符串，中间是变化的 files/assets/.*?/1/ .*? 表示中间是人一个字符阅读全文

posted @ 2019-09-15 17:05 琥珀君阅读(169) 评论(0) 推荐(0)

WebGL_0002：palycanvas 配置文件路径

摘要：playcanvas 配置文件路径https://s3-eu-west-1.amazonaws.com/apps.playcanvas.com/wmSPTNhb/config.jsonsence 地址在config中其中 wmSPTNhb 为发布地临时地址阅读全文