- 博客(337)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Blender打包、解包文件
如果给人给你一个gltf模型文件，或者别的模型文件，你用Blender打开后，如果想查看模型文件里面的所有贴图，可以使用。Blender在建模过程中，有时候会设置贴图，这时候你保存Blender文件后能看到一个。文件一起发过去，否则可能就会出现找不到贴图的现象。打包后，注意最后Ctrl+S保存下，确保图像包含在。接着上节课Blender纹理贴图内容给大家讲解。格式的文件，如果你想发给别人，需要把。文件中，这样纹理图片就可以随着。打包资源，可以图像打包到。
2024-03-28 22:40:41
365
原创 three.js纹理贴图大小—性能优化
红绿灯贴图，500左右的像素和250左右的像素，收费站都可以正常渲染，这时候你就可以选择像素更小的图片作为纹理。jpg、png格式图片通过简单压缩后，文件缩小，这样三维场景gltf文件就会更小，可以提升三维模型加载速度。同样清晰情况下，对比收费站模型，天空盒背景图，红绿灯的贴图，你会发现像素宽高度差别很大。一般来说在网页上渲染范围越大，需要纹理图像像素越大，渲染范围越小，需要纹理图像越小。对于不需要背景透明的纹理，大部分情况下，选择jpg格式，要比png格式更小一些。，另一方面网页从服务器加载图片文件的。
2024-03-28 22:38:29
278
原创 threejs减少模型加载时间(Blender draco压缩)
前面几节课给大家说过，通过美术减面，可以把模型文件变小，不过除此外，还可以通过Draco压缩工具，把gltf模型里面的几何顶点数据进一步压缩。物联网、数字孪生、展厅等Web3D可视化项目，通常最大的文件是3D模型文件，再具体就是模型文件中的三角形面、顶点数据。模块，可以通过命令行压缩gltf模型文件，不过这比较麻烦，不采用这种方式，下面给大家演示Blender软件的压缩方式。，这时候你对比下，压缩前后导出的文件大小，理想的情况下，不考虑贴图占用空间，单纯顶点数据，压缩一个数量级也是可能的。
2024-03-28 22:33:41
469
原创 Stats查看threejs渲染性能
如果你的项目出现了卡顿问题，你可以继续学习本章节后面内容，了解更多优化技巧，同时也需要系统学习threejs各方面知识点，毕竟性能优化需要长期学习，不过本章节，会提供一些快捷简单有效的优化讲解，让新手能。如果你鼠标旋转缩放场景时候，能明显感觉到卡顿，这时候stats显示的渲染帧率一般远低于你电脑实际支持的屏幕刷新率。，**three/examples/jsm/libs/**目录,你可以找到一个文件。你也可以查看你电脑支持的刷新率，我以win11为例，电脑桌面，鼠标右键,选择。，掌握一些非常实用的优化技巧。
2024-03-28 22:31:39
428
原创 three.js物理网格材质(玻璃)
并不是所有的3D建模软件都支持设置物理材质，即便支持物理材质，也不意味着你导出的gltf模型，能包含该软件，设置的物理材质属性，比如金属度、粗糙度、透射度…除了物理材质，也有很多建模软件，自带的材质效果，是无法自动导出到threejs的。建议：能否导出美术建模软件设置的材质效果，一切以实际测试为准。不同软件，同一个软件不同版本，都会有差异。
2024-03-28 22:30:19
387
原创 three.js环境贴图hdr格式
**three/examples/jsm/loaders/**目录,你可以找到一个文件。下面给大家说下，怎么加载解析hdr格式的图像作为网格模型Mesh材质的环境贴图。有时候，美术也会提供hdr格式图片作为环境贴图使用。加载hdr图像,设置为环境贴图。
2024-03-28 22:28:48
308
原创 threejs纹理贴图大小
红绿灯贴图，500左右的像素和250左右的像素，收费站都可以正常渲染，这时候你就可以选择像素更小的图片作为纹理。jpg、png格式图片通过简单压缩后，文件缩小，这样三维场景gltf文件就会更小，可以提升三维模型加载速度。同样清晰情况下，对比收费站模型，天空盒背景图，红绿灯的贴图，你会发现像素宽高度差别很大。一般来说在网页上渲染范围越大，需要纹理图像像素越大，渲染范围越小，需要纹理图像越小。对于不需要背景透明的纹理，大部分情况下，选择jpg格式，要比png格式更小一些。，另一方面网页从服务器加载图片文件的。
2024-03-26 13:13:49
445
原创 three.js渲染性能(顶点数量、显卡GPU)
课程收费站案例场景比较小，不同人的电脑显卡性能也不同，下面可以用threejs代码控制生成不同顶点数量，来测试GPU渲染帧率，可以通过stats辅助观察。如果你电脑显卡性能比较好，可以在高细分的情况下，for循环增加多个矩形平面，逐渐增加数量，来测试你电脑极限。矩形平面默认顶点数据非常少，不明显，可以增加细分数测试，不同人显卡性能不同，以自己电脑为准逐渐增加。内部算法，生成球体表面顶点坐标，需要占用CPU计算资源。顶点相关属性，在显卡的内存(现存)上生成顶点数据,几何体顶点数据越多，需要的显卡内存越大。
2024-03-26 13:12:34
1350
原创 threejs三角形、顶点概念
一般来首次没有特殊需要，x和y方向细分数使用默认1就行，没必要创建这么多点或三角形，顶点或三角形数量越多，threejs渲染性能越低。一般曲面细分数，在满足光滑渲染效果情况下，尽量设置低的细分数，这样Geometry顶点数据，占用内存更低。下面给大家介绍下threejs网格模型Mesh涉及到三角形、顶点概念。网格模型Mesh其实就一个一个三角形(面)拼接构成。浏览器控制台查看几何体对象的数据结构。查看几何体geometry对象属性。查看网格模型的三角形结构。，可以看到是一个数组。细分数比较低，不够光滑。
2024-03-26 13:11:05
321
原创 光照、环境贴图
如果你想模拟太阳光照射效果，你可以设置平行光。实际生活，除了太阳光影响物体，物体与物体之间，其实相互反射光线，彼此产生影响。这种影响，可以用环境贴图来近似模拟。一般做Web3D可视化项目，通常要设置环境贴图，通过环境贴图模拟物体周围相互影响的光照。
2024-03-21 13:00:11
369
原创 模型材质共享问题
获取模型节点，然后修改颜色，这时候你发现，所有模型mesh的颜色都更改了，其实原因很简单，Blender创建模型时候共享了材质。修改网格模型mesh2的颜色，mesh1颜色跟着更改，原因很简单，本质上都是修改的同一个材质对象的。会返回一个新的材质对象，克隆的新材质和原来材质外观一样，但是互不影响。下面给大家谈谈，Blender、Three.js模型材质共享的问题。Blender创建一个模型对象，设置颜色，然后通过快捷键。如果你想取消材质共享，可以新建一个材质覆盖原来的。复制模型对象时候，材质是默认共享的。
2024-03-21 12:59:16
297
原创 建模软件blender与threejs坐标xyz对应问题
z和y对应，这时候你调整下Blender右上角坐标轴，z朝上情况下，让x轴朝向右侧，threejs，同时调整threejs场景，y向上，x朝向右侧，你观察下，同样方位情况下，Blender的-y对应threejs的+z。Blender沿着y平移模型-100，然后导出，threejs中加载查看，模型沿着z平移100，如果这时候z朝上，x朝右，Blender和threejs中模型都是朝向屏幕外移动。,这样的话，Blender中模型沿着z平移，相当于threejs沿着y向上平移，也就是都是朝上。
2024-03-21 12:17:53
370
原创 Blender导出gltf设置半透明材质
本节课继续上街内容讲解，通过Blender设置模型材质透明相关属性，threejs加载gltf，gltf模型默认实现如下材质的半透明效果。上面材质设置好以后，导出glb模型，使用上节课代码测试，你会发现Blender绘制的立方体和下面代码立方体一样具有透明效果。回顾：上节课给大家演示了Blender创建一个模型，设置材质颜色，并导出gltf，最后threejs加载。相当于threejs材质里面设置。提醒：不同版本Blender交互界面可能有差异，但是整体思路都一样。Blender材质设置。
2024-03-21 12:16:46
458
原创 Blender生成模型，threejs加载gltf
本节课做一个全流程演示，先用Blender绘制一个三维模型，接着导出gltf格式模型，最后threejs加载Blender导出的gltf模型。代码基础上给大家演示，咱们把threejs代码创建的长方体网格模型删除掉，然后加载Blender导出的gltf或glb格式模型代替。会返回一个gltf对象，作为参数2函数的参数gltf包含了模型的多种数据，其中。加载gltf格式的模型，需要借助threejs的扩展库gltf加载器。导出gltf格式模型的时候，除了后缀名。，也可以选择导出gltf的二进制格式。
2024-03-21 12:15:45
1001
原创 谈谈Three.js版本问题
如果你是初学者，有一点我是非常不建议的，就是你直接npm安装本月份最新版本的threejs学习，因为你无法保证，新版本课程，哪怕是几周前录制的，也可能某个api改变了，导致代码无法执行。threejs官网文档是最新版本，不一定和你们公司用的版本一致，所以一定要注意，查询公司用的threejs，对应版本文档。新手学习threejs，除了版本问题，往往也会有其他小问题，如果你想少走弯路，节约学习时间，有老师答疑，可以报名咱们的。最近一年threejs虽然升级变化，但是整体的结构，变化不大。
2024-03-13 17:31:59
869
原创 three.js模拟显示屏模型播放视频
使用三维软件建模的过程中，比如使用Blender时候，要把表示虚拟屏幕的Mesh，UV设置好，这样方便代码中添加纹理贴图。整个原理非常简单，就是视频在播放的过程中，threejs会获取视频当前时间对应的一帧图像作为纹理。比如咱们这节课中模型，创建显示屏模型的时候，单独一个矩形平面Mesh表示显示屏，用来添加视频纹理。video是html5的一个元素，可以用来加载播放视频，如果不熟悉，可以去补充下相关的前端知识点。还有颜色空间的问题，如果颜色空间设置不对，可能会出现纹理颜色与正常颜色不一致的问题。
2024-03-13 17:31:16
419
1
原创 3D模型gltf下载网站(threejs开发)
github上一个开源项目，提供的各种gltf格式3d模型，threejs examples里面很多模型都是用的这里面的。主要是因为下载的模型不一定就能刚好满足需求，另一方面，及时外观符合需要，但是模型面数很有可能太大，也需要美术后期。还有这些里面的模型，很多相对web3d可视化项目来说，往往需要减面，有很多多余顶点或说着三角形。国内网站资源，模型非常多，有很多建模师，上传3D模型，有免费简单模型，也有付费的精细模型。不过很多不是blender格式，或者gltf格式，你很多时候，需要自己处理下。
2024-03-13 17:30:11
1119
原创 Blender导出gltf(美术与程序员协作)-threejs方向
Blender课件中我也放了一个threejs加载gltf的代码，你可以用来测试你导出的gltf模型。实际开发的时候，美术也不一定就使用Blender软件，不同软件之间，就需要共同支持的格式来协作。提醒：不管你是美术还是程序员，以后开发，都可以用这个代码去验证你的gltf模型文件是否正常导出。3D模型文件和图片文件一样，也有多种格式，不同格式能包含的模型数据也不完全相同。你可以尝试用three.js引擎加载上面你导出的gltf格式模型文件。你可以把gltf格式模型，当做图片领域的jpg格式，非常常用。
2024-03-13 17:28:30
579
原创 1. Blender入门基础-threejs方向
这节课给大家谈谈，Web3D可视化项目三维建模(3D建模)的问题。对于大部分Web3D可视化项目，比如产品展示、物联网、数字孪生、元宇宙游戏,除了程序员写代码之外，还需要美术制作3D模型。智慧小区(园区)案例代码效果Blender软件绘制的小区(园区)模型。
2024-03-13 17:25:18
337
原创 three.js模拟波动水面Water.js
有些数字孪生场景周围的环境，需要模拟一个波动水面效果，自己写shader相对比较麻烦，采用threejs的扩展库更简单方便。(货轮物流)
2024-01-29 23:58:08
687
原创 three.js 物体3D模型——尺寸测量标注
在开发一些物联网、数字孪生Web3D可视化项目的时候，比如一个工厂、化工厂、变电站、园区等场景，有时候，需要进行一些尺寸测量，比如属于鼠标点击选择模型表面上两点，然后计算两点之间尺寸距离，然后使用箭头和数字进行标注。( 先用鼠标点击按钮进入测量状态，在通过鼠标点击拾取模型任意两点，然后会自动标注 )
2024-01-29 23:44:27
1435
原创 Three.js衣服logo文字定制
自定义文字和自定义logo基本思路一样，区别在于需要通过canvas画布生成文字。//canvas是带有文字的canvas画布对象const mesh = this.model.getObjectByName('文字')
2024-01-16 18:03:26
585
原创 Threejs文件包下载和目录简介
网易云付费系统课程b站免费入门视频在正式学习Three.js之前，先做一些必要的准备工作，具体说就是下载threejs官方文件包，threejs官方文件包提供了很多有用的学习资源。下载three.js文件包解压后，你可以看到如下目录(不同版本会略有差异)。对于开发者而言，大家经常接触的是文档docs和案例examples两个文件夹，平时查看文档，可以打开文档docs里面html文件，案例examples里面提供了海量threejs功能案例。three . js - 文件包。
2024-01-08 13:20:12
780
原创 threejs点到直线的距离
点p到AB直线的距离，就是三角形ApB在AB上的高度。直线上的两个点的坐标，和直线外的的一点坐标。向量ApB构建一个三角形，计算三角形面积。通过threejs叉乘方法。计算点到直线的距离。
2024-01-08 13:18:03
431
原创 three.js向量Vector3表示重力加速度
下面用three.js向量代码表示物理加速度的位移公式，如果你已经忘了高中物理知识，也没关系，也不用记忆，咱们的重点在于用threejs向量表达上面公式。本节课给大家讲解一个物体抛出去落在地面的动画效果，注意学习本节课内容之前，确保你已经掌握上节课关于匀速动画的讲解。重力加速度乘以每次渲染时间，与原来的速度累加，可以更新当前的速度。位移写法和上节课类似，就是当前速度乘以每次渲染时间，累加即可。物体接触地面后，停止运动，不在进行下落计算。你可以更改初速度，观察物体的运动轨迹效果。重力加速度是y轴的负方向。
2024-01-08 13:17:08
364
原创 three.js向量Vector3表示重力加速度
下面用three.js向量代码表示物理加速度的位移公式，如果你已经忘了高中物理知识，也没关系，也不用记忆，咱们的重点在于用threejs向量表达上面公式。本节课给大家讲解一个物体抛出去落在地面的动画效果，注意学习本节课内容之前，确保你已经掌握上节课关于匀速动画的讲解。重力加速度乘以每次渲染时间，与原来的速度累加，可以更新当前的速度。位移写法和上节课类似，就是当前速度乘以每次渲染时间，累加即可。物体接触地面后，停止运动，不在进行下落计算。你可以更改初速度，观察物体的运动轨迹效果。重力加速度是y轴的负方向。
2024-01-08 13:16:04
309
原创 threejs向量Vector3表示速度
下面给写一个物体匀速运动的动画案例，已知物体的初始位置、物体的速度，然后写一个物体的运动动画效果。类可以表示物体的位置，也可以表示物体速度、位移等有方向的量。前面几节课给大家介绍过threejs的。类计算渲染循环两帧渲染间隔时间。讲解过的知识点，通过。
2024-01-08 13:15:18
360
原创 three.js坐标系与三角函数
以后自己学习或探索threejs几何空间计算规律的时候，可以用threejs可视化方式表示出来你的计算结果，这样方便验证自己想法是否正确。比如正弦和余弦值区别，你记不清了，你可以代码测试下。你可以对比threejs代码中下面两种写法，小球的位置差异，就能判断那个是错误的。
2024-01-08 13:14:18
1409
原创 three.js计算物体网格模型的表面积
下面用一个立方体给大家进行测试验证，实际开发，你也可以从外部加载模型。几何体结构分为两种情况，一种有顶点索引index数据，一种没有，整体思路相同，只是注意获取顶点位置数据的语法细节不同。网格模型Mesh其实就一个一个三角形拼接构成，这意味着，我们可以通过计算Mesh所有三角形面积，然后累加，就可以获取模型的表面积。获取模型对象所有的三角形，分别计算某个三角形对应的面积，然后所有三角形面积累加，就可以获取模型的表面积。你可以尝试利用上节课的三角形面积公式，计算一个网格模型几何体Geometry的表面积。
2024-01-07 08:12:58
538
原创 threejs三维坐标系—THREE.AxesHelper()
的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。通过模型的位置、尺寸设置，加深3D坐标系的概念。轴，对于three.js的3D坐标系默认。测试：设置长方体xyz不同方向尺寸。three.js坐标轴颜色红。
2024-01-07 08:11:06
593
原创 threejs设备像素比.setPixelRatio(window.devicePixelRatio)
一般实际开发，threejs的WebGL渲染器需要进行一些通用的基础配置，本节课给大家简单介绍下,比如渲染模糊或锯齿问题。不会有明显差异，不过为了适应不同的硬件设备屏幕，通常需要执行该方法。的值可以直接在参数中设置，也可通过渲染器对象属性设置。是window对象的一个属性，该属性的值和你的硬件设备。如果你遇到你的canvas画布输出模糊问题，注意设置。的值可能不同，可能就是1、1.5、2.0等其它值。如果你有web前端基础，应该了解。注意：注意你的硬件设备设备像素比。相关，不同硬件设备的屏幕。
2024-01-07 08:09:22
568
原创 threejs查询案例examples和文档(辅助开发)
如果你通过案例examples、文档docs还不能更加清晰的了解某个属性或方法的含义，可以查看threejs封装的源码，当然对于threejs新手或编程基础不好的学员，不太推荐。有些时候你想了解threejs某个类(对象)的语法，或者某个对象属性和方法的语法，这时候你可以查询threejs官方文件包提供的案例examples、文档docs。进入threejs API页面，有的类属性或方法比较多，滚动页面查询比较麻烦的话，如果你想查询某个方法或属性，可以。文档左上角提供了一个输入框，可以快速查看某个。
2024-01-07 08:07:53
399
原创 gui.js库(可视化改变three.js三维场景参数)
three.js在调试场景渲染效果的时候，比如光照的强度，人大脑的CPU是没有能力通过光照参数算出来模型渲染效果的，一般来说你先大概给一个经验值，然后通过gui在这个大概值的基础上下浮动可视化调试。是如何改变JavaScript对象属性的，可以浏览器控制台不停地打印obj的值，这样通过gui界面拖动改变obj对象属性的的时候，便于观察obj的变化。创建的交互界面，会默认显示所改变属性的名字，为了通过交互界面更好理解你改变的某个对象属性，你可以通过。
2024-01-07 08:07:16
840
原创 stats性能监视器(计算threejs渲染帧率FPS)
通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。stats.js下载链接：https://github.com/mrdoob/stats.js。方法的参数mode的数值设置首次打开页面，测试结果的显示模式，鼠标单击可以更换不同的显示模式。方法就可以更新canvas画布内容，一般场景越复杂往往渲染性能越低，也就是每秒钟执行。
2024-01-07 08:06:04
470
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人