threejs
文章平均质量分 76
叶子yes
前端学习之旅,期待你的加入
展开
-
【Three.js】Layers图层的使用
Layers 对象为Object3D对象分配了1-32个图层,编号为0-31。在内部实现上,每个图层对象被存储为一个bit mask,默认所有 Object3D 对象都存储在第 0 个图层上。图层对象可以用于控制对象的显示,和相机处于同一个图层的物体才可以被显示出来。每个继承自 Object3D 的对象都有一个 Object3D.layers 对象。Mesh、Camera、Group等都继承自基类 Object3D,所以它们都有一个 layers 属性。原创 2024-01-30 18:00:33 · 933 阅读 · 0 评论 -
【Three.js】轨道控制器(OrbitControls)的使用
轨道控制器可以使得相机围绕目标进行轨道运动。轨道控制器功能不可以通过three模块来直接访问,需要从 example/jsm 子目录下导入。原创 2024-01-26 17:25:58 · 4586 阅读 · 5 评论 -
【Three.js】创建一个三维场景
Three.js是一个用于创建WebGL渲染的JavaScript库。WebGL(Web Graphics Library)是一种用于在Web浏览器中进行硬件加速的图形渲染的JavaScript API。它允许开发者利用计算机的GPU(图形处理单元)来执行图形渲染,从而实现高性能的3D图形和图形效果。它本身是一个相对底层的API,需要处理许多繁琐的任务,如着色器编写、缓冲区管理等。Three.js封装了底层的WebGL功能,用于简化和抽象WebGL的使用。原创 2024-01-24 08:00:00 · 634 阅读 · 6 评论 -
【Three.js】画布自适应大小与全屏
在Three.js中,要使画布能够自适应窗口大小的变化,需要在窗口大小变化时更新相关的渲染器、摄像机等参数。①②更新摄像机的宽高比,以确保画面不会变形。③通过更新摄像机的投影矩阵,确保透视投影的正确显示。④更新渲染器的大小,使其与新的窗口大小相匹配。⑤设置渲染器的像素比,以适应高分辨率屏幕,提高渲染效果。原创 2024-01-25 14:20:01 · 1170 阅读 · 0 评论 -
【Three.js】使用精灵图Sprite创建面朝相机的文本标注
在Three.js中精灵Sprite是一个总是面朝摄像机的平面,它通常和纹理贴图结合使用,贴图可以是一张图片,也可以是我们使用canvas绘制出来的任何东西。所以我们可以先使用canvas绘制文字,然后将它作为纹理贴图贴到精灵平面上,就可以创建面朝相机的文本标注了。原创 2024-03-19 14:41:17 · 1150 阅读 · 0 评论 -
【Three.js】创建CAD标注线
CAD标注线在工程和制造领域中被广泛用于标记零部件、装配体和机械系统的尺寸、距离、角度等信息。它们帮助工程师和设计师更好地理解设计要求,并确保制造的准确性。在三维场景中添加标注线使得设计更加直观。人们可以在一个真实的三维环境中看到物体的形状、大小和相互关系,相比于传统的二维图纸,更容易理解和把握设计意图。下面是一个简单的效果图:要创建上图所示的标注线,我们可以把标注线拆分成三个部分:箭头线、箭头两端的线段 、文本信息。原创 2023-12-04 08:00:00 · 1585 阅读 · 3 评论