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 ...