threejs源码学习
说明对很多知识点只有模糊的概念，除了日常写写demo，就来看看源码培养些感觉；
从BoxGeometry入手;
现阶段的大纲图：
BoxGeometry标了阅读思路，主要是理解buildPlane函数的参数是怎么设定的、顶点是怎么计算的、坐标系是怎么放的、UV是怎么算的，还有就是怎么利用索引来减少存储。
主要是懒，而且写个完整思路和笔记博客太费时间了。。。。
高清版在GitHub自取
快捷键记录
Adobe Illustrator重复上一步：ctrl+d将选中物体隐藏：ctrl+3将选中物体锁定：ctrl+2
Sticky Notes新建笔记：alt+n从剪切板新建：alt+v展示所有笔记：alt+s隐藏所有笔记：alt+h去往下一个笔记：alt+g探索：alt+x重命名：f2设置提醒：alt+a
Unitycopy+paste: ctrl+d物体操作面板：q,w,e,r
Visual Studio类似vscode, 试试看应该也能通用文本对齐：ctrl+k, ctrl+d注释所选代码：ctrl /取消注释：ctrl /代码折叠：# region# endregion显示命令面板：ctrl+shift+p, F1显示/隐藏侧边栏：ctrl+b创建多个编辑器：ctrl+\，方便抄代码ctrl+1,ctrl+2:快速聚焦到第？个编辑器放缩工作区：ctrl +/-重新开一个软件的窗口：ctrl+shift+N关闭软件的当前窗口：ctrl+shift+W新建文件：ctrl+N关闭当前文件：ctrl+Wctrl+pagedown/page ...
three案例实操|赛博风大屏坑①
问题(第一批)球体的陆地和海洋并没有区分出来尝试1：看看texture是否正确加载
let earthTexture = new Three.TextureLoader().load(earthImg, function (texture) { console.log('texture loaded successfully'); }, undefined, function (err) { console.log('texture load failed', err); });
问题是对UV的计算错了：错处1： let uv = [(sph + Math.PI) / (2 * Math.PI), 1 - (sph.theta / Math.PI)];
需要使用new Three.Vector2(),而不是直接构建数组；如果是直接构建数组，那下面就访问不到.x和.y，需要使用[0]和[1]来访问对应的内容。
错处2：let uv = new Three.Vector2(sph + Math. ...
three案例实操|赛博风大屏Ⅲ
前言参考案例：https://dragonir.github.io/3d/#/earthDigital
机甲风head和card新建constant.js，存放一些固定的内容文本数组；
export const weekMap ={...};export const tips = [...];
设置state存放显示的内容；在 React 中，组件可以是类组件或函数式组件。在函数式组件中，传统的类组件中的 state 和生命周期方法被 React Hooks 提供的功能所替代。最常用的 Hook 是 useState，它用于在函数式组件中添加状态管理功能。
const [week, setWeek] = useState(weekMap[new Date().getDay()]);const [time, setTime] = useState(new Date().toLocaleTimeString());const [showModal, setShowModal] = useState(false);const [modelText, setModelTe ...
three案例实操|赛博风大屏Ⅱ
前言参考案例：https://dragonir.github.io/3d/#/earthDigital
调试工具🔁 后话2-callback 🍵
unforms统一存shader里uniform的初始值
🔁 后话1-callback 🍵
构造位于半径为5的球面上的冲击点、冲击最大半径、冲击比例、之前的点位置、飞线的比例和长度
安装dat.gui的库：npm i dat.gui @types/dat.gui
添加进入gui；
gui设置隐藏，通过键盘H键唤起；
飞线🔁 后话1-callback 🍵
取消注释
制作飞线初始化100个点，得到一条路径；添加index属性，形成起止正确的路径，加入trails
function makeTrail (idx) { let pts = new Array(100*3).fill(0); let g = new Three.BufferGeometry(); g.setAttribute("position", new Three.Float32BufferAttribute(pts, ...
shader-学习记录Ⅴ
前言学习资料：The Book of Shaders: Shaping functions
记录-patternsfract(),取小数部分；
实现pattern的绘制：
#ifdef GL_ESprecision mediump float;#endifuniform vec2 u_resolution;uniform float u_time;float circle(in vec2 _st, in float _radius){ vec2 l = _st-vec2(0.5); return 1.-smoothstep(_radius-(_radius*0.01), _radius+(_radius*0.01), dot(l,l)*4.0);}vec3 pattern2d(in float x, in float y) { vec2 st = gl_FragCoord.xy/u_resolution; vec3 color = vec3 ...
three+react|加自己模型
添加自己的模型前言，在该项目中加自己的模型，及问题解决；
先sketchfab上下载模型，在unity里调整位置、贴图、材质、动画，形成prefab；
利用插件，导出为gltf；”E:\PersonalCV\models\v1.142.0-unity.unitypackage”
在vite.config.ts里加入assetsInclude: ['**/*.glb','**/*.gltf'],
import { useGLTF } from "@react-three/drei"import word2D from '../assets/3d/world_2d/world_2d.gltf'const Map2D = ({ ...props }) => { const gltf = useGLTF(word2D); const scene = gltf.scene; return ( <mesh {...props}> ...
shader-学习记录Ⅳ
前言学习资料：The Book of Shaders: Shaping functions
记录-2D Matrics平移利用u_time, sin, cos构造移动，加到st；通过cross把这种移动突出出来；
#ifdef GL_ESprecision mediump float;#endifuniform vec2 u_resolution;uniform float u_time;// _size=vec2(width,height)float box(in vec2 _st, in vec2 _size){ _size = vec2(0.5) - _size*0.5; vec2 uv = smoothstep(_size, _size+vec2(0.01), _st); uv *= smoothstep(_size, _size+vec2(0.001), vec2(1.0)-_st) ...
three案例实操|赛博风大屏Ⅰ
前言参考案例：https://dragonir.github.io/3d/#/earthDigital
基础环境react+vite+three.js+scss
目录：
EarthDigital
–images
—-earth.jpg
–index.jsx
–index.scss
代码框架先导入些基本的：
import { useEffect, useRef } from 'react';import * as Three from 'three';import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';import './index.scss';import earthImg fr ...
shader-学习记录Ⅲ
前言学习资料：The Book of Shaders: Shaping functions
记录-shapesstep(float edge, float x)类似于if
vec3(float * float) 相当于把两个进行and
uniform vec2 u_resolution;void main(){ vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); // Each result will return 1.0 (white) or 0.0 (black). float left = step(0.1,st.x); // Similar to ( X greater than 0.1 ) float bottom = step(0.1,st.y); // Similar to ( Y greater than 0.1 ) // The multiplication of left*bottom will be similar to the lo ...