Three.js
关注
分享
扫一扫
three.js
Jedi Hongbin
threedev.xyz
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Three.js 法线 shader
【代码】Three.js 法线 shader。原创 2025-11-17 16:08:43 · 112 阅读 · 0 评论 -
Three.js的阴影相关实现路径
以下 列出three.js实现阴影能力 的文件 基本按照实现过程 方便学习和修改。原创 2025-11-15 22:31:17 · 286 阅读 · 0 评论 -
Three.js NodeMaterial 节点材质系统文档
目前没有正式版本文档 可以clone源码然后执行dev命令 访问 `http://localhost:8080/docs_new/RangeNode.html` 访问`/docs_new` 目录即可访问节点材质的文档原创 2025-10-06 17:47:02 · 271 阅读 · 0 评论 -
Three.js shader内置矩阵注入
本文介绍了three.js中WebGL渲染器使用的公共矩阵和着色器变量。核心内容包括模型视图矩阵(modelViewMatrix)、法线矩阵(normalMatrix)、模型矩阵(modelMatrix)等uniform变量的定义和使用方式。同时列举了顶点着色器中的常用属性(attribute)，如position、normal、uv等，以及特殊功能相关的变量，包括变形目标(morphTargets)、蒙皮(skinning)和实例化(instancing)等。最后展示了顶点位置的两种等效计算方式，并说明了原创 2025-09-08 10:17:42 · 294 阅读 · 0 评论 -
three.js NodeMaterial(节点材质系统)的 onBeforeRender(updateBefore) onAfterRender(updateAfter)
NONE 更新方法不执行。FRAME 更新方法按帧执行。RENDER 每次渲染都会执行更新方法。一个帧可能由多个渲染调用生成，因此此值允许比frame更详细的更新。OBJECT 更新方法是按照使用节点进行渲染的｛@link Object3D｝执行的。原创 2025-03-06 09:37:16 · 390 阅读 · 0 评论 -
three.js使用cannon.js 进行不规则物体碰撞检测
优化 可将拆分的数据保存 缓存使用 拆包过程开销很大会卡顿阻塞 网页会卡顿数秒。使用形状类似 但点更少的物体进行拆解 如右侧模型。控制台可能会出现 警告和报错 但不影响使用。将负责的模型拆分成多个小模型。如此就添加了可用的形状。原创 2025-01-18 11:49:24 · 420 阅读 · 0 评论 -
纹理流动扭曲
小日子3D网页做的不错 复刻！原创 2025-01-09 09:32:30 · 247 阅读 · 0 评论 -
Three.js材质纹理扩散过渡
Three.js材质纹理扩散过渡。原创 2024-12-17 19:15:10 · 512 阅读 · 0 评论 -
模型切换动画 - 三角面
Three.js多个模型切换动画 - 三角面。原创 2024-12-12 13:09:36 · 241 阅读 · 0 评论 -
旋风解体效果
【代码】旋风解体效果。原创 2024-12-10 20:33:59 · 237 阅读 · 0 评论 -
三角形从下向上渐变出现
【代码】三角形从下向上渐变出现。原创 2024-12-10 20:18:16 · 292 阅读 · 0 评论 -
three.js透光率实现原理归纳
很薄的透明或者半透明的塑料、玻璃材质即便在几乎完全透明的情况下仍旧会保留反射的光线，透光性属性用于这种类型的材质。透光率（或者说透光性），范围从0.0到1.0。当透光率不为0的时候, opacity透明度应设置为1.会增加不少开销 额外渲染一次 单独渲染 作为。原创 2024-12-06 19:02:40 · 456 阅读 · 0 评论 -
关于频繁读取canvas数据- 使用three.js进行纹理绘制心得
如上图所示 在进行纹理绘制功能时 经常要同步读写canvas的数据 而canvas越大开销越大 尽可能在不损失效果质量的情况下使用更小的画布 但即便是512x512的大小 数据也有1048576项（512 x 512 x 4）在使用实例网格的时候的设置 即便设置动态instanceMatrix 也需要设置更新才会生效。测试环境为每帧遍历一万次 获取一万次1像素 开销颇大 改为后面的方式 则帧率无明显波动。原创 2024-12-03 19:18:14 · 423 阅读 · 0 评论 -
threejs 材质的内置矩阵uniform
【代码】threejs 材质的内置矩阵uniform。原创 2024-12-01 19:48:17 · 219 阅读 · 0 评论 -
web3D 闪电文字 闪电/电击效果 -three.js
【代码】web3D 闪电文字 闪电/电击效果 -three.js。原创 2024-11-26 17:58:48 · 717 阅读 · 0 评论 -
Three.js 闪电效果
【代码】Three.js 闪电效果。原创 2024-11-21 19:24:26 · 672 阅读 · 0 评论 -
glsl波纹扭曲纹理-threejs后处理画面扭曲
【代码】glsl波纹扭曲纹理。原创 2024-11-14 10:22:31 · 377 阅读 · 0 评论 -
glsl基于LTC的面光源渲染 - 圆盘光
【代码】glsl基于LTC的面光源渲染 - 圆盘光。原创 2024-11-05 18:17:00 · 303 阅读 · 0 评论 -
glsl基于LTC的面光源渲染 - 矩形光通过three.js
【代码】glsl基于LTC的面光源渲染 - 矩形光通过three.js。原创 2024-11-04 19:26:43 · 360 阅读 · 0 评论 -
three.js使用ShaderMaterial实现聚光灯光源demo
three.js使用ShaderMaterial实现聚光灯光源demo。原创 2024-10-29 18:09:16 · 500 阅读 · 0 评论 -
three.js使用ShaderMaterial实现平行光光源demo
这是仅次于环境光简单的光原创 2024-10-29 18:00:44 · 373 阅读 · 0 评论 -
Three.js遮罩多场景穿梭过渡
在靠近门时完全渲染一个场景 在穿过门的同时切换场景关系。渲染一个遮罩 亮的区域为需要显示另一个场景的区域。获取穿梭门的渲染范围在屏幕中的占比。判断是否穿过门和方向。原创 2024-10-25 16:38:19 · 700 阅读 · 1 评论 -
判断点与平面的前后关系-three.js
通过点积判断 物体到相机向量和法线向量 > 0 背面， < 0 正面。原创 2024-10-21 09:45:18 · 295 阅读 · 0 评论 -
WebGL读取画布任意像素颜色WebGLRenderingContext.readPixels
该方法是读取当前当前缓冲区(framebuffer)的不过three提供的方法可以传入指定的RednerTarget。three实现的思路是通过 先绑定传入的renderTarget 在最后再绑定回来。以下为threejs实现代码。原创 2024-10-17 18:02:06 · 673 阅读 · 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 · 924 阅读 · 0 评论 -
THREE.JS Blinn–Phong反射模型 高光shader
在threee.js中实现Blinn–Phong反射模型高光shader部分原创 2024-10-02 18:15:55 · 718 阅读 · 0 评论 -
灯光uniforms传递准备工作
【代码】灯光uniforms传递准备工作。原创 2024-10-02 14:55:15 · 320 阅读 · 0 评论 -
THREE.JS法线Shader
threejs会自动将normalMatrix传递至uniform 这一计算放在CPU中更好原创 2024-09-27 17:03:44 · 422 阅读 · 0 评论 -
ReflectedLight.directSpecular 直接高光反射计算shader
【代码】ReflectedLight.directSpecular 直接反射计算shader。原创 2024-09-26 08:55:28 · 177 阅读 · 0 评论 -
three.js 让阴影更黑更暗
r166 可以通过设置intensity属性来配置每个光源的阴影强度。或者 修改shader。原创 2024-09-23 10:07:50 · 447 阅读 · 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 · 1283 阅读 · 0 评论 -
THREE.JS像素风格渲染
【代码】THREE.JS像素风格渲染。原创 2024-09-04 13:37:43 · 533 阅读 · 0 评论 -
threejs替换全部物体材质
在渲染物体时会优先使用这个属性覆盖其他材质。原创 2024-09-03 10:51:32 · 424 阅读 · 0 评论 -
Threejs&WebGPU运动残影demo
使用新的节点材质系统和wenGPU渲染器原创 2024-08-12 22:22:13 · 510 阅读 · 0 评论 -
three.js 动漫风格 卡通渲染 边缘采样 边缘光
计算光线和法线的余弦值原创 2024-08-09 22:01:49 · 1099 阅读 · 0 评论 -
threejs 节点材质系统 绑定attribute
新的 节点材质系统 绑定属性及使用 非常方便 不必重复声明。包装后就可以在shader中直接使用。顶点着色器 声明 varying。片元着色器 使用 varying。以instances为例。原创 2024-08-05 19:09:50 · 544 阅读 · 0 评论 -
Three.js & WebGPU 节点材质系统 控制instances的某个实例单独的透明度，颜色等属性
实现思路：1. 声明一个实例必要的属性`instanceMatrix2. 在设置位置矩阵的时候填充这个数组3. 在shader中获取当前的索引修改的源码的函数就是当前着色的实例索引5. 对比当前着色的实例是否是选中的实例6. 如果是选中的实例加入一个变量影响选中的实例的透明度（也可以影响其他材质参数 这里以透明度为例）7. 影响片元着色器透明度参数在对象的方法中将透明度乘以的值或者直接设置为的值如此便可通过更改uniform来决定某个实例的透明度了以此思路其他材质属性也均可单独指原创 2024-08-02 13:16:00 · 1273 阅读 · 0 评论 -
Threejs将场景生成全景图导出
创建全景相机CubeCamera（六个方位的透视相机）并渲染场景。即可按照常规的canvas导出图片了。读取六个面的纹理数据。填充进canvas中。原创 2024-07-07 15:23:02 · 495 阅读 · 0 评论 -
Three.js鼠标拖动设置骨骼姿态
拖拽鼠标设置骨骼旋转角度（使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发控件对应的方法 模拟拖拽控件的过程 ）更改TransformControls源码 屏蔽原本行为 生成的Mesh需要使用新的类 这个类继承THREE.Mesh 覆盖其raycast方法 优化射线检测需要更新boundingBox和boundingSphere所需的开销 跳过boundingShere检测过程原创 2024-06-27 21:49:28 · 645 阅读 · 0 评论 -
three.js各向异性shader实现记录
将RE_Direct_Physical 方法 定义成 RE_Direct 使用。点光源，聚光灯，方向光 这三种 进行每个类型灯光遍历执行大致如下 点光源例。原创 2024-02-11 09:54:37 · 658 阅读 · 0 评论