仙魁XAN
作为技术及管理人员,精通VR/AR/MR 3D开发,擅长使用Unity、Three.js、Laya等平台,开发创新的游戏、家具设计、教育和工业仿真应用。
在游戏开发中,带领团队创造沉浸式体验,提供创新玩法和引人入胜的故事情节。家具设计上,通过AR技术,为用户提供新颖的家居体验。
教育领域,负责开发交互式教学应用,提升学生学习兴趣和理解力。工业仿真项目中,运用VR技术优化产品设计和生产流程,提高效率。
还涉足人工智能,开发智能化应用,提供个性化服务。凭借技术与管理能力,期待与合作伙伴共同开发创新项目,创造卓越数字体验。
展开
-
Three 之 three.js (webgl)GLSL-Card 中文手册相关知识
Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本文简单记录 GLSL 的一些中文手册的基础知识,以便后期查阅。原创 2024-04-07 10:39:35 · 773 阅读 · 0 评论 -
Three 之 three.js (webgl)鼠标/手指通过射线移动物体的简单整理封装
目录Three 之 three.js (webgl)鼠标/手指通过射线移动物体的简单整理封装一、简单介绍二、实现原理三、注意事项四、效果预览五、案例实现步骤六、关键代码Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl) 中,PC 端移动通过鼠标移动物体,移动端通过手指交互移动物体的整理,主要是通过对应的touchstart、touchmove、touchend ,以及 Threejs 中的 Raycaster 。其中,如果有不足之处,原创 2022-12-06 11:08:43 · 2782 阅读 · 4 评论 -
Three 之 three.js (webgl)碰撞检测(非官方的简单的碰撞检测,使用局限性,仅供思路参考)
本节介绍, three.js (webgl) 中 进行碰撞检测,其实,网上有方法介绍,使用射线,或者也可以使用官方的方法 ammo.js,这里由于自己使用的一些情况特殊,所以并没有使用官方的方法和射线方法,而是使用包围盒 + 位置判断的方法,来简单判断是否发生碰撞;2、然后根据移动物体与其他物体的位置差,同移动物体与其他物体包围盒对应的长宽高之和的一半,如果位置差的xyz 都小于移动物体与某个物体包围盒长宽高之和的一半,则可判断碰撞。2、在上面的基础上,添加一个 html ,用来实现案例效果,引入相关包。原创 2022-10-24 14:59:27 · 4322 阅读 · 1 评论 -
Three 之 three.js (webgl)绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool
Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl) 中绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool,主要是给实物绘制线框,有点像AI 识别正方形包裹框的效果。其中,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。原创 2022-10-21 15:01:45 · 1793 阅读 · 0 评论 -
Three 之 three.js (webgl)物体描边效果(outline)三种实现方式的简单整理(后期渲染/MeshBasicMaterial/法线扩展)
Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl) 中实现描边效果 outline 的三种方法实现的简单介绍,其中,包括:1)后期渲染进行描边效果;2)使用 MeshBasicMaterial 略微放大比例,从而形成描边效果;3)点位置法线扩展,从而实现描边效果。其中,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期渲染实现描边:1、具体可参见博文:Three 之 three.js (webgl)PostProcessin原创 2022-09-23 17:03:16 · 4607 阅读 · 0 评论 -
Three 之 three.js (webgl)使用BufferGeometry (GPU) 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果
Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl) 中,使用 BufferGeometry ,添加位置和移动方向数据,结合 shader,简单实现类似 particle 的粒子运动效果,这里把之前BufferGeometry 实现简单粒子效果Three 之 three.js (webgl)使用BufferGeometry (CPU) 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果。原创 2022-09-21 14:54:00 · 868 阅读 · 0 评论 -
Three 之 three.js (webgl)使用BufferGeometry (CPU) 根据位置和移动向量简单实现持续生成运动的简单粒子particle运动效果
本节介绍, three.js (webgl) 中,使用 BufferGeometry ,添加位置和移动方向数据,结合 shader,简单实现类似 particle 的粒子运动效果,这里主要的逻辑在js脚本,而非 shader 中,所以这里算是 cpu 中,使用BufferGeometry 实现简单粒子效果,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。5、构建 位置、移动向量、粒子大小、颜色、旋转等数据,并传入粒子图片,创建 BufferGeometryCpuParticleEffect。原创 2022-09-19 11:42:29 · 876 阅读 · 0 评论 -
Three 之 three.js (webgl)简单的渲染策略(简单性能优化/主要根据渲染控制 render 渲染调用)
Three js开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)渲染策略上进行必要的合理规划 render 的调用,从而性能上的优化,特别是在移动端,避免不必要的屏幕render 刷新,从而避免卡顿和发热情况,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。Three 之 three.js (webgl)性能优化、提高帧率的思路/方向整理_仙魁XAN的博客-CSDN博客_webgl 性能二、实现原理。原创 2022-09-18 14:49:24 · 2768 阅读 · 0 评论 -
Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 指定物体添加描边 outline 效果
Three js开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)中有各种后期渲染效果的简单实现,不同屏幕渲染又有不同的效果,这里做简单的介绍,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道。原创 2022-09-18 10:51:56 · 2038 阅读 · 1 评论 -
Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 屏幕整体色调和饱和度调整 HueSaturationShader
Three js开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)中有各种后期渲染效果的简单实现,不同屏幕渲染又有不同的效果,这里做简单的介绍,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道。原创 2022-09-13 11:43:11 · 644 阅读 · 0 评论 -
Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 屏幕pixel像素化效果的简单实现
Three js开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)中有各种后期渲染效果的简单实现,不同屏幕渲染又有不同的效果,这里做简单的介绍,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道。原创 2022-09-09 15:37:15 · 678 阅读 · 0 评论 -
Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 饱和度、对比度、亮度动态调整效果简单实现
Three js开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)中有各种材质,不同材质又有不同的效果,这里做简单的介绍,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道。原创 2022-09-09 11:22:46 · 1567 阅读 · 0 评论 -
Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 简单dotScreen 屏幕点效果
开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js ()中有各种材质,不同材质又有不同的效果,这里做简单的介绍,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道。2、EffectComposer 用于在three.js中实现后期处理效果。原创 2022-09-08 16:46:56 · 767 阅读 · 0 评论 -
Three 之 three.js (webgl)PostProcessing/shader/EffectComposer 屏幕渲染 之 简单RGB颜色分离(类似抖音)效果
Three js开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)中有各种材质,不同材质又有不同的效果,这里做简单的介绍,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果,有了这些效果会大大降低代码难度,并且可以直接使用内置的着色器包,避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行,后加入的会覆盖前面的通道。2、EffectComposer 用于在three.js。原创 2022-09-08 14:58:57 · 908 阅读 · 0 评论 -
Three 之 three.js (webgl)基础 3D 辅助对象 Helper 开发的工具简单介绍
Three 之 three.js (webgl)基础 3D 辅助对象 Helper 开发的工具简单介绍目录Three 之 three.js (webgl)基础 3D 辅助对象 Helper 开发的工具简单介绍一、简单介绍二、辅助对象 Helper1、ArrowHelper 箭头辅助对象2、AxesHelper 轴坐标系辅助对象3、BoxHelper 包围盒辅助对象4、Box3Helper 模拟3维包围盒辅助对象5、 CameraHelper 相机视锥体辅助对象6.原创 2022-05-06 22:57:33 · 2493 阅读 · 0 评论 -
Three 之 three.js (webgl)透视视角和正交视角,以及透视转正交的视角切换
Three 之 three.js (webgl)透视视角和正交视角,以及透视转正交的视角切换目录Three 之 three.js (webgl)透视视角和正交视角,以及透视转正交的视角切换一、简单介绍二、实现原理三、正投影和透视投影简单解释四、透视相机(PerspectiveCamera)五、正交相机(OrthographicCamera)六、threejs中透视投影相机转换正交投影相机基本原理与代码实现七、案例实现八、案例代码下载一、简单介绍T...原创 2022-05-02 19:43:51 · 10326 阅读 · 3 评论 -
Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展示
Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展示目录Three 之 three.js (webgl)基础 第二个入门案例之汽车模型加载和简单模型展示一、简单介绍二、实现原理三、GLTF加载器(GLTFLoader)四、材质(Material)五、轨道控制器(OrbitControls)六、注意事项七、第二个入门案例 之 汽车模型八、案例代码下载:第二个入门案例之汽车模型加载和简单模型展示一、简单介绍T...原创 2022-05-01 20:51:01 · 7219 阅读 · 2 评论 -
Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景
Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景目录Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景一、简单介绍二、Three 中构建场景主要的三要素三、场景(Scene)四、摄像机(Camera)五、WebGLRenderer六、第一个入门 Web 3D 场景一、简单介绍Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (w原创 2022-04-28 22:37:43 · 2333 阅读 · 3 评论 -
Three 之 three.js (webgl)基础 音频的加载与播放的简单整理
Three 之 three.js (webgl)基础 声音的加载与播放的简单整理目录Three 之 three.js (webgl)基础 声音的加载与播放的简单整理一、简单介绍二、Three 中实现音频播放的三要素三、THREE.Audio 一般播放器(非位置播放)四、THREE.PositionalAudio 位置播放器(更真实的声音播放器,走进声音越大,离开声音减小等效果)五、AudioAnalyser 音频解析器(获取声音数据,进行可视化声音操作等)一、简单...原创 2022-04-27 22:46:06 · 4897 阅读 · 0 评论 -
Three 之 three.js (webgl)涉及的各种材质简单说明(常用材质配有效果图)
Three 之 three.js (webgl)涉及的各种材质简单说明(常用材质有效果图)目录Three 之 three.js (webgl)涉及的各种材质简单说明(常用材质配有效果图)一、简单介绍二、各种材质说明1、MeshBasicMaterial 基础网格材质2、MeshDepthMaterial 深度网格材质3、MeshDistanceMaterial 距离网格材质4、MeshLambertMaterial Lambert网格材质5、MeshMatcapMat原创 2022-04-25 23:38:07 · 9955 阅读 · 0 评论 -
Three 之 three.js (webgl)使用 html div 给 Threejs 场景添加背景图的方法实现
Three 之 three.js (webgl)使用 html div 给 Threejs 场景添加背景图的方法实现目录Three 之 three.js (webgl)使用 html div 给 Threejs 场景添加背景图的方法实现一、简单介绍二、该案例效果示图三、实现原理四、注意事项五、该案例的大概实现步骤六、关键代码一、简单介绍 Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js...原创 2022-04-23 22:42:30 · 7772 阅读 · 0 评论 -
Three 之 three.js (webgl)简单实现根据点绘制线/弧线(基于LineGeometry / Line2 / LineMaterial,绘制两点基于圆心的弧线段)
Three 之 three.js (webgl)简单实现根据点绘制线/弧线(基于LineGeometry / Line2 / LineMaterial,绘制两点基于圆心的弧线段)目录Three 之 three.js (webgl)简单实现根据点绘制线/弧线(基于LineGeometry / Line2 / LineMaterial,绘制两点基于圆心的弧线段)一、简单介绍二、案例简单示意图三、实现原理四、注意事项五、该案例的大概实现步骤六、关键代码一、简单介绍.原创 2022-04-22 17:30:28 · 4918 阅读 · 1 评论 -
Three 之 three.js (webgl)旋转属性函数的简单整理,以及基于此实现绕轴旋转的简单案例
Three 之 three.js (webgl)旋转函数的简单整理,以及实现绕轴旋转的简单案例目录Three 之 three.js (webgl)旋转函数的简单整理,以及实现绕轴旋转的简单案例一、简单介绍二、案例简单示意图三、案例旋转的实现原理四、注意事项五、该案例的大概实现步骤六、关键代码一、简单介绍Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three.js (webgl)中几个常用旋转函数的整理,并在此原创 2022-04-22 16:35:59 · 7976 阅读 · 0 评论 -
Three 之 three.js (webgl)模型的删除/场景的清空/内存的释放 的简单整理
Three 之 three.js (webgl)模型的删除/场景的清空/内存的释放 的简单整理目录Three 之 three.js (webgl)模型的删除/场景的清空/内存的释放 的简单整理一、简单介绍二、实现原理三、场景中的模型 group (mesh)四、清空 scene 场景,释放内存五、参考补充:Three.js 内存释放问题(如果不正确处理,可能并未释放,还会占用内存)一、简单介绍Three js 开发的一些知识整理,方便后期遇到类似的问题,能够及时查原创 2022-04-20 23:14:32 · 18541 阅读 · 1 评论 -
Three 之 three.js (webgl)性能优化、提高帧率的思路/方向整理
Three 之 three.js (webgl)性能优化思路方向整理目录Three 之 three.js (webgl)性能优化思路方向整理一、简单介绍二、优化方向1、创建多量物体时 ,BufferGeometry (或者InstancedBufferGeometry)创建2、合理执行渲染方法.render()3、减少没必要执行的代码在周期性渲染函数中的执行4、减少模型面数,必要可以用法线贴图增加模型细节替代5、共享几何体和材质6、渲染帧率的优化,其实就是合理调用原创 2022-04-19 23:29:50 · 21344 阅读 · 4 评论 -
Three 之 three.js (webgl)CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理
Three 之 three.js (webgl)CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理目录Three 之 three.js (webgl)CSS2DObject 添加文字按钮等并与OrbitController / html button 等交互冲突的简单使用说明整理一、简单介绍二、实现原理在 Three js 3D 添加 CSS2D 的方法处理 CSS2DRenderer 与 Orbit原创 2022-04-17 17:16:28 · 10147 阅读 · 0 评论 -
Three 之 three.js (webgl) 中实现简单热力图的方法简单整理
Three 之 three.js (webgl) 中实现简单热力图的方法简单整理目录Three 之 three.js (webgl) 中实现简单热力图的方法简单整理一、简单介绍二、实现原理方法 context.createRadialGradient 实现原理方法 heatmap.js 实现原理三、注意事项四、效果预览五、实现代码方法 context.createRadialGradient 实现代码,相关过程,见代码注释:方法 heatmap.js 实现代码原创 2022-04-12 16:42:41 · 7082 阅读 · 2 评论 -
Three 之 three.js (webgl)Layers 图层的简单介绍和简单实用
Three 之 three.js (webgl)Layers 图层的简单介绍和简单实用目录Three 之 three.js (webgl)Layers 图层的简单介绍和简单实用一、简单介绍二、实现原理三、注意事项四、效果预览五、实现步骤六、关键代码一、简单介绍Three js (官网: Three.js – JavaScript 3D Library) 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。本节介绍, three 开发网页 3D 场原创 2022-04-11 09:53:53 · 4670 阅读 · 0 评论 -
Three 之 three.js (webgl)着色器材质的一些内置变量的简单说明(gl_PointSize/gl_Position/gl_PointCoord/gl_FragCoord...)
three.js着色器的内置变量,分别是gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变) gl_Position:控制顶点选完的位置 gl_FragColor:片元的RGB颜色值 gl_FragCoord:片元的坐标,同样是以像素为单位 gl_PointCoord:在点渲染模式中,对应方形像素坐标他们或者单个出现在着色器中,或者组团出现在着色器中,是着色器的灵魂...原创 2022-04-09 12:15:03 · 1952 阅读 · 0 评论 -
Three 之 three.js (webgl)shader 中 Texture 贴图 uv 坐标的相关简单说明,并简单测试 UV 重复旋转偏移效果
纹理坐标系统uv其实就是纹理坐标,因为xyz已经被顶点坐标占用了,所以uvw就用来表示纹理坐标。它时候贴图影射到模型表面的依据,把表面的点与平面上的像素对应起来,一般取值在0~1;u:图片在显示器水平的坐标v:垂直方向w:垂直于显示器表面一般情况只是在表面贴图,就涉及不到w,所以常称为uv。ThreeJS纹理贴图使用纹理对象贴图ThreeJS本身做了封装,贴图十分方便,如果大家英文好可以直接去官网,嫌麻烦也可以在中文网站上直接查看教程或对象方法。(⚠️以下非完整代码)...原创 2022-04-09 11:39:55 · 8672 阅读 · 0 评论