Three.js
关注
分享
扫一扫
three.js
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
glsl基于LTC的面光源渲染 - 圆盘光
【代码】glsl基于LTC的面光源渲染 - 圆盘光。原创 2024-11-05 18:17:00 · 125 阅读 · 0 评论 -
glsl基于LTC的面光源渲染 - 矩形光通过three.js
【代码】glsl基于LTC的面光源渲染 - 矩形光通过three.js。原创 2024-11-04 19:26:43 · 196 阅读 · 0 评论 -
three.js使用ShaderMaterial实现聚光灯光源demo
three.js使用ShaderMaterial实现聚光灯光源demo。原创 2024-10-29 18:09:16 · 252 阅读 · 0 评论 -
three.js使用ShaderMaterial实现平行光光源demo
这是仅次于环境光简单的光原创 2024-10-29 18:00:44 · 139 阅读 · 0 评论 -
Three.js遮罩多场景穿梭过渡
在靠近门时完全渲染一个场景 在穿过门的同时切换场景关系。渲染一个遮罩 亮的区域为需要显示另一个场景的区域。获取穿梭门的渲染范围在屏幕中的占比。判断是否穿过门和方向。原创 2024-10-25 16:38:19 · 388 阅读 · 1 评论 -
判断点与平面的前后关系-three.js
通过点积判断 物体到相机向量和法线向量 > 0 背面， < 0 正面。原创 2024-10-21 09:45:18 · 104 阅读 · 0 评论 -
WebGL读取画布任意像素颜色WebGLRenderingContext.readPixels
该方法是读取当前当前缓冲区(framebuffer)的不过three提供的方法可以传入指定的RednerTarget。three实现的思路是通过 先绑定传入的renderTarget 在最后再绑定回来。以下为threejs实现代码。原创 2024-10-17 18:02:06 · 382 阅读 · 0 评论 -
Cook-Torrance 直接高光反射模型
<html> <head> <title>Cook-Torrance BRDF computed by shader</title> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px原创 2024-10-04 14:25:42 · 695 阅读 · 0 评论 -
THREE.JS Blinn–Phong反射模型 高光shader
在threee.js中实现Blinn–Phong反射模型高光shader部分原创 2024-10-02 18:15:55 · 452 阅读 · 0 评论 -
灯光uniforms传递准备工作
【代码】灯光uniforms传递准备工作。原创 2024-10-02 14:55:15 · 234 阅读 · 0 评论 -
THREE.JS法线Shader
threejs会自动将normalMatrix传递至uniform 这一计算放在CPU中更好原创 2024-09-27 17:03:44 · 286 阅读 · 0 评论 -
ReflectedLight.directSpecular 直接高光反射计算shader
【代码】ReflectedLight.directSpecular 直接反射计算shader。原创 2024-09-26 08:55:28 · 85 阅读 · 0 评论 -
three.js 让阴影更黑更暗
r166 可以通过设置intensity属性来配置每个光源的阴影强度。或者 修改shader。原创 2024-09-23 10:07:50 · 265 阅读 · 0 评论 -
THREE.JS网格边缘像素化后处理
不加处理如下⬇️<!-- * @Author: hongbin * @Date: 2024-09-04 11:06:55 * @LastEditors: hongbin * @LastEditTime: 2024-09-04 13:24:24 * @Description: --><!DOCTYPE html><html lang="en"> <head> <title>Grid Effect</原创 2024-09-04 13:45:56 · 1078 阅读 · 0 评论 -
THREE.JS像素风格渲染
【代码】THREE.JS像素风格渲染。原创 2024-09-04 13:37:43 · 357 阅读 · 0 评论 -
threejs替换全部物体材质
在渲染物体时会优先使用这个属性覆盖其他材质。原创 2024-09-03 10:51:32 · 158 阅读 · 0 评论 -
Threejs&WebGPU运动残影demo
使用新的节点材质系统和wenGPU渲染器原创 2024-08-12 22:22:13 · 391 阅读 · 0 评论 -
three.js 动漫风格 卡通渲染 边缘采样 边缘光
计算光线和法线的余弦值原创 2024-08-09 22:01:49 · 906 阅读 · 0 评论 -
threejs 节点材质系统 绑定attribute
新的 节点材质系统 绑定属性及使用 非常方便 不必重复声明。包装后就可以在shader中直接使用。顶点着色器 声明 varying。片元着色器 使用 varying。以instances为例。原创 2024-08-05 19:09:50 · 368 阅读 · 0 评论 -
Three.js & WebGPU 节点材质系统 控制instances的某个实例单独的透明度，颜色等属性
实现思路：1. 声明一个实例必要的属性`instanceMatrix2. 在设置位置矩阵的时候填充这个数组3. 在shader中获取当前的索引修改的源码的函数就是当前着色的实例索引5. 对比当前着色的实例是否是选中的实例6. 如果是选中的实例加入一个变量影响选中的实例的透明度（也可以影响其他材质参数 这里以透明度为例）7. 影响片元着色器透明度参数在对象的方法中将透明度乘以的值或者直接设置为的值如此便可通过更改uniform来决定某个实例的透明度了以此思路其他材质属性也均可单独指原创 2024-08-02 13:16:00 · 1052 阅读 · 0 评论 -
Threejs将场景生成全景图导出
创建全景相机CubeCamera（六个方位的透视相机）并渲染场景。即可按照常规的canvas导出图片了。读取六个面的纹理数据。填充进canvas中。原创 2024-07-07 15:23:02 · 277 阅读 · 0 评论 -
Three.js鼠标拖动设置骨骼姿态
拖拽鼠标设置骨骼旋转角度（使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发控件对应的方法 模拟拖拽控件的过程 ）更改TransformControls源码 屏蔽原本行为 生成的Mesh需要使用新的类 这个类继承THREE.Mesh 覆盖其raycast方法 优化射线检测需要更新boundingBox和boundingSphere所需的开销 跳过boundingShere检测过程原创 2024-06-27 21:49:28 · 427 阅读 · 0 评论 -
three.js各向异性shader实现记录
将RE_Direct_Physical 方法 定义成 RE_Direct 使用。点光源，聚光灯，方向光 这三种 进行每个类型灯光遍历执行大致如下 点光源例。原创 2024-02-11 09:54:37 · 522 阅读 · 0 评论 -
Three.js蒙皮骨骼变化原理 | 逆推蒙皮网格的世界位置
每次更新更新boneMatrices数据，也就是boneTexture的数据，shader中通过这张纹理获取每个点的变化，然后应用到transformed上，也是因此 点的位置CPU获取不到无法获取box3模型以及射线检测等工作。不过使用本章的代码可以获取当前的世界位置，只不过应该会很卡顿，因为便利了模型的所有点，这也是为什么蒙皮骨骼要在GPU中工作。蒙皮骨骼的变化是在GPU中进行的 ， 所以像获取静态物体一样获取geometry.position是不行的。实现效果，右侧为生成的mesh。原创 2024-02-06 22:05:11 · 609 阅读 · 0 评论 -
Three.js Tri-panner (三面贴图/世界UV贴图) 材质 两种实现方式
Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial下面展示两种实现方式/*** @description: 替换三角面贴图 https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/triPlanarMat*/原创 2024-01-17 14:53:15 · 985 阅读 · 0 评论 -
three.js制作简单的虚影
如图 利用光线折射做一个虚影。原创 2024-01-15 14:29:14 · 495 阅读 · 0 评论 -
Three.js 镜面反射Reflector 为MeshStandardMaterial增加Reflector能力
根据源码进行修改为 MeshStandardMaterial实现反射。区别：官方的案例更像一个镜子 没有纹理等属性 也没有透明度修改。原创 2024-01-15 13:30:55 · 1372 阅读 · 0 评论 -
Three.js图案溶解shader
上面一排是根据现实的图案红色通道也就是r值进行溶解。可以通过简单更改呈现多种溶解图案。下面一排提供额外的溶解纹理。上图提供两种方式溶解显示。原创 2023-10-17 17:09:41 · 349 阅读 · 0 评论 -
Three.js柏林噪音 流动球体
代码：https://gitee.com/honbingitee/three-template-next.js/tree/shader/参考油管视频：https://www.youtube.com/watch?原创 2023-10-17 14:23:35 · 343 阅读 · 0 评论 -
three分裂格子shader可模拟骨骼动画粒子
Three.js-shader有趣的动画效果、模拟粒子骨骼动画。原创 2023-10-06 08:09:43 · 182 阅读 · 0 评论 -
Three.js-矩形块shader
多种配置 绘制炫酷的矩形块原创 2023-09-12 11:26:48 · 242 阅读 · 0 评论 -
Three.js-绘制矩形shader
封装自定义shader。绘制图中的嵌套矩形框。原创 2023-09-12 11:13:20 · 490 阅读 · 0 评论 -
Three.js后处理后物体表面出现条纹
初始化 WebGLRenderer 时简单启用 logarithmicDepthBuffer: true 解决了问题。后处理对于深度精度非常敏感。大视锥体很快就会使此类 AO 通道变得无法使用。根据文档，启用可能会导致性能下降，因此请根据您的性能预算考虑使用它。缩小相机的near和far。原创 2023-08-31 22:08:24 · 450 阅读 · 0 评论 -
解决Three.js辉光背景不透明
使用此pass canvas元素的background都能看到 不过相应的辉光颜色和背景颜色不相容的地方看起来颜色会怪一些。不过如果是纯色就没什么问题了。原创 2023-08-29 18:27:24 · 505 阅读 · 0 评论 -
Three.js加载drc文件
使用`FileLoader`和`DracoLoader`加载原创 2023-08-05 14:39:17 · 623 阅读 · 0 评论 -
THREE.JS镜头随鼠标晃动效果
在three中y轴 上面是1下面是-1 而我们窗口上面是-1 下面是1 所以取y轴剩余的高度让两者行为统一，也就是实现向着鼠标方向。那么当前鼠标所在相机的位置，应当是原始位置加上鼠标移动的增量。如此 我们获取了鼠标移动的增量，将这一向量加在camera的x和y轴即可，这里不能使用。接下来可以扩充一下功能， 加入鼠标按下时可以拖拽旋转，鼠标松开后回到原来的位置。首先要监听鼠标移动，并且将移动的值转换到 -1 和 1 之间 方便处理。ok 上述代码将支持轨道控制器 旋转回来能力。原创 2023-07-09 21:42:35 · 2243 阅读 · 0 评论 -
three.js&gsap滚动交互网页实现 2-创建文字并添加离开动画
在线条的入场动画完成后将其加入，以免两次设置z轴在进入页面时滚动条有高度的情况下z轴位置冲突。这样下滑一个屏幕高度聚光灯的角度会增加到0.7 ，并且上滑会降到0.3。使用scrollTrigger的onUpdate回调函数设置值。设置线条group的z轴到170 超出屏幕 不可见。让聚光灯的角度随着下滑增大，展示完整的场景。最后将这个group向左移动到适当的位置。将创建的两组文字opacity设置为0。接下来设置文字和背景线条的动画。在聚光灯扩大角度是时候显示文本。文字的创建可参考之前的博客。原创 2023-07-08 21:41:17 · 450 阅读 · 0 评论 -
three.js&gsap滚动交互网页实现 1-模糊背景线条
要实现圆形排列一周可以自己计算sin和cos实现，更简单的可以使用vector3的。将其添加到相机 然后将相机添加到scene中，这样相机更灵活随着视角移动。设置光影衰减属性默认为0不衰减 取值范围0-1 将其设置为1。模型只有其中的一根线条 加载完模型后 将其圆形排列一周。并在循环中使用clone方法创建实例 然后设置点的位置。该方法计算返回圆柱上的点，圆柱上的点由参数决定。调整缩放和一点点位置的偏移让其产生错乱的感觉。因为模型是横着的 所有将其旋转90度。设置聚光灯的角度，将其照射范围缩小。原创 2023-07-07 21:17:24 · 438 阅读 · 0 评论 -
three.js数据生成模型代码片段
使用ConvexGeometry填充。原创 2023-07-04 19:41:20 · 215 阅读 · 0 评论 -
gsap鼠标跟随不断修改终点值使用 gsap.quickTo()
如果您发现自己gsap.to()多次调用同一目标的同一数字属性，例如在“mousemove”事件中，您可以通过创建 quickTo() 函数来提高性能。可选地定义一个开始值默认情况下，它将从当前进度中tween内部的CURRENT值开始（它实际上不会检查当前值的目标……这里的想法是最大限度地提高性能）。由于它接受单个值，因此您可以在 a 的末尾添加一个 quickTo pipe()，在其他实用函数之后对您输入的数字执行有用的操作，例如夹紧或捕捉或以某种方式清理值。它返回（重用的）Tween 实例。转载 2023-06-19 22:03:01 · 289 阅读 · 0 评论