分享
扫一扫
超级会员免费看
仙魁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 · 870 阅读 · 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 · 2955 阅读 · 4 评论 -
Three 之 three.js （webgl）碰撞检测(非官方的简单的碰撞检测,使用局限性,仅供思路参考)
本节介绍， three.js （webgl） 中 进行碰撞检测，其实，网上有方法介绍，使用射线，或者也可以使用官方的方法 ammo.js，这里由于自己使用的一些情况特殊，所以并没有使用官方的方法和射线方法，而是使用包围盒 + 位置判断的方法，来简单判断是否发生碰撞；2、然后根据移动物体与其他物体的位置差，同移动物体与其他物体包围盒对应的长宽高之和的一半，如果位置差的xyz 都小于移动物体与某个物体包围盒长宽高之和的一半，则可判断碰撞。2、在上面的基础上，添加一个 html ，用来实现案例效果，引入相关包。原创 2022-10-24 14:59:27 · 4559 阅读 · 1 评论 -
Three 之 three.js （webgl）绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool
Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl） 中绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool，主要是给实物绘制线框，有点像AI 识别正方形包裹框的效果。其中，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。原创 2022-10-21 15:01:45 · 1932 阅读 · 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 · 4963 阅读 · 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 · 951 阅读 · 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 · 947 阅读 · 0 评论 -
Three 之 three.js （webgl）简单的渲染策略(简单性能优化/主要根据渲染控制 render 渲染调用)
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）渲染策略上进行必要的合理规划 render 的调用，从而性能上的优化，特别是在移动端，避免不必要的屏幕render 刷新，从而避免卡顿和发热情况，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。Three 之 three.js （webgl）性能优化、提高帧率的思路/方向整理_仙魁XAN的博客-优快云博客_webgl 性能二、实现原理。原创 2022-09-18 14:49:24 · 2954 阅读 · 0 评论 -
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 指定物体添加描边 outline 效果
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中有各种后期渲染效果的简单实现，不同屏幕渲染又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。原创 2022-09-18 10:51:56 · 2144 阅读 · 1 评论 -
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 屏幕整体色调和饱和度调整 HueSaturationShader
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中有各种后期渲染效果的简单实现，不同屏幕渲染又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。原创 2022-09-13 11:43:11 · 729 阅读 · 0 评论 -
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 屏幕pixel像素化效果的简单实现
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中有各种后期渲染效果的简单实现，不同屏幕渲染又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。原创 2022-09-09 15:37:15 · 760 阅读 · 0 评论 -
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 饱和度、对比度、亮度动态调整效果简单实现
Three js开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中有各种材质，不同材质又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。原创 2022-09-09 11:22:46 · 1683 阅读 · 0 评论 -
Three 之 three.js （webgl）PostProcessing/shader/EffectComposer 屏幕渲染 之 简单dotScreen 屏幕点效果
开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （）中有各种材质，不同材质又有不同的效果，这里做简单的介绍，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。后期处理1、threejs 的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。2、EffectComposer 用于在three.js中实现后期处理效果。原创 2022-09-08 16:46:56 · 868 阅读 · 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 · 974 阅读 · 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 · 2626 阅读 · 0 评论 -
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换目录Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换一、简单介绍二、实现原理三、正投影和透视投影简单解释四、透视相机（PerspectiveCamera）五、正交相机（OrthographicCamera）六、threejs中透视投影相机转换正交投影相机基本原理与代码实现七、案例实现八、案例代码下载一、简单介绍T...原创 2022-05-02 19:43:51 · 10686 阅读 · 3 评论 -
Three 之 three.js （webgl）基础 第二个入门案例之汽车模型加载和简单模型展示
Three 之 three.js （webgl）基础 第二个入门案例之汽车模型加载和简单模型展示目录Three 之 three.js （webgl）基础 第二个入门案例之汽车模型加载和简单模型展示一、简单介绍二、实现原理三、GLTF加载器（GLTFLoader）四、材质(Material)五、轨道控制器（OrbitControls）六、注意事项七、第二个入门案例 之 汽车模型八、案例代码下载:第二个入门案例之汽车模型加载和简单模型展示一、简单介绍T...原创 2022-05-01 20:51:01 · 7473 阅读 · 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 · 2635 阅读 · 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 · 5039 阅读 · 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 · 10229 阅读 · 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 · 8004 阅读 · 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 · 5099 阅读 · 1 评论 -
Three 之 three.js （webgl）旋转属性函数的简单整理，以及基于此实现绕轴旋转的简单案例
Three 之 three.js （webgl）旋转函数的简单整理，以及实现绕轴旋转的简单案例目录Three 之 three.js （webgl）旋转函数的简单整理，以及实现绕轴旋转的简单案例一、简单介绍二、案例简单示意图三、案例旋转的实现原理四、注意事项五、该案例的大概实现步骤六、关键代码一、简单介绍Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl）中几个常用旋转函数的整理，并在此原创 2022-04-22 16:35:59 · 8096 阅读 · 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 · 19331 阅读 · 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 · 22319 阅读 · 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 · 10369 阅读 · 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 · 7602 阅读 · 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 · 4936 阅读 · 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 · 2066 阅读 · 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 · 9006 阅读 · 0 评论