- 博客(51)
- 收藏
- 关注
RSS订阅原创 threejs（七）PBR材质
PBR就是，基于物理的渲染(physically-based rendering)，可以通过光照模型模拟物理表面的光照。Three.js提供了两个PBR材质相关的API和，MeshPhysicalMaterial 是 MeshStandardMaterial 扩展的子类，提供了更多功能属性。
2025-10-21 10:11:07
1114
原创 threejs（六）加载外部模型 .gltf
GLTF格式是三维模型格式.gltf格式文件几乎可以包含所有的三维模型相关信息的数据，比如模型层级关系、PBR材质、纹理贴图、骨骼动画、变形动画GLTF文件就是通过JSON的键值对方式来表示模型信息，比如meshes表示网格模型信息，materials表示材质信息…"asset": {},...// 模型材质信息"pbrMetallicRoughness": {//PBR材质"metallicFactor": 0.5,//金属度"roughnessFactor": 1//粗糙度],
2025-10-17 17:30:19
1242
原创 threejs（五）纹理贴图、顶点UV坐标
从纹理贴图上，提取像素，映射到网格模型 Mesh 的几何体表面上。顶点UV坐标geometry.attributes.uv和顶点位置坐标geometry.attributes.position是一一对应的，UV顶点坐标你可以根据需要在0~1之间任意设置，具体怎么设置，要看你想把图片的哪部分映射到Mesh的几何体表面上。/**纹理坐标0~1之间随意定义*/0, 0, //图片左下角1, 0, //图片右下角1, 1, //图片右上角0, 1, //图片左上角]);
2025-10-15 16:33:15
688
原创 threejs（三）模型对象、材质
点模型Point、线模型Line、网格模型Mesh等模型对象的父类都是Object3d，一些模型的基本属性、操作可以去中去找。
2025-09-17 14:16:14
787
原创 three.js（二）几何体 BufferGeometry
Three.js中法线和数学中法线概念相似，只是定义的时候更灵活，会根据需要进行调整，作为初学者，只要先有顶点法线的概念就行，下面会举一个简单小例子。先来理解一下数学上的法线概念，比如一个平面，法线的就是该平面的垂线，如果是光滑曲面，一点的法线就是该点切面的法线。Three.js中法线是通过顶点定义，默认情况下，每个顶点都有一个法线数据，就像每一个顶点都有一个位置数据。非连续的线条，（1，2）（3，4）（5，6）这样连在一起的。（1）正面可见 ---- FrontSidet。关键代码（设置顶点位置）
2025-09-10 11:46:05
702
原创 three.js（一） 快速入门
从WebGL的角度来看，three.js提供的构造函数基本是对原生WebGL的封装，如果你有了WebGL的基础，在学习three.js的很多对象、方法和属性是很容易理解的。场景、相机、渲染器设置完成后，设置代码renderer.render(scene,camera)把场景、相机对象作为渲染器对象方法render()的参数，这句代码的意义相当于告诉浏览器根据相机的放置方式拍摄已经创建好的三维场景对象。相机对象和渲染对象相对简单，最复杂的是场景对象，然后通过总对象的子对象、方法和属性进行设置，
2024-10-14 10:07:54
639
原创 SvelteKit - 2.基础知识
假设如果你不想在second/a 中用 second/layout.svelte 的布局文件，那么我们就可以在 a/page.svelte 中添加 @about 符号，定位到 about/layout.svelte 布局文件。模块 layout：如果你想在特定的子文件里面进行添加，比如 /about 路由，那么我们可以添加在 /about/layout.svelte ，那么这个 layout 文件只作用在 /about 路由下面。在src/routes下面创建；承接单个页面的内容。
2024-07-29 09:14:26
392
原创 svelte - 2. 数据绑定 / 基本组件
每个块级标签都可以对 clientWidth、clientHeight、offsetWidth 以及 offsetHeight 属性进行绑定（只读）感觉是跟 vue 差不多的，官网的示例是在 onMount 生命周期设置 canvas 的。：勾选复选框（xxx是boolean类型）、按 shift + 鼠标选择多个内容。: 绑定值（xxx是数字）可以让一个div可输入。感觉跟原生的区别不大。
2024-07-23 09:12:56
403
原创 svelte - 1. 基础知识
由于 Svelte 的反应性是由赋值语句触发的，使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新。：调用event.preventDefault() ，在运行处理程序之前调用。： 优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)。：调用 event.stopPropagation(), 防止事件影响到下一个元素。直接类似这样，在行内写 on.click=“{() => {}}”（2）子组件 nested.svelte。
2024-07-22 16:21:27
1274
原创 element-ui 源码 - 0. 项目启动
因为 package.json 中 node-sass 用的 4.11.0，查看yarn.lock 用的 4.14.1。如果 clone 太慢 就加上 --depth=1。官方建议用 yarn install。
2024-06-20 17:58:06
392
1原创 vue3 nuxt3子组件使用emit报warningExtraneous non-emits event listeners were passed to compont but could...
Extraneous non-emits event listeners (chooseRadio) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare i
2023-11-22 14:18:02
665
转载 git checkout 提示 “error: The following untracked working tree files would be overwritten by checkout”
git
2022-07-04 16:15:24
2200
原创 webpack基础(10).拆分环境变量和生产环境配置
一、公共路径可以看到根据前几掌的学习，dist/app.html 引用的资源都是通过相对路径来引用的。如果想要使用 CDN 的路径或者当前服务器的路径，来作为link上面的路径前缀，就可以使用publicPath。publicPath：可以用来指定应用程序中所有资源的基础路径。webpack.config.jsexport default {// ... output: { // ... publicPath: 'http://localhost:8080/' }}打
2022-05-11 21:54:53
731
原创 webpack基础(9).缓存
webpack打包后，会生成一个 dist 目录，打包后的内容就会放置在这个目录下。只要 dist 目录中的内容部署到了 server 上，client （通常指浏览器）就能够访问这个server 的网站及其资源。然鹅获取资源这一步是比较耗费时间的，因此浏览器使用了缓存技术，降低网络流量，让页面加载更快。但是，如果我们部署的时候不更新文件名，浏览器就可能会认为这个文件没有修改，就会使用这个文件的缓存版本。这样就没有用到我们的新代码。因此，本章通过必要的配置，确保 webpack 编译生成的文件既能够
2022-05-10 21:20:54
577
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人