threejs
文章平均质量分 51
蓝莓味柯基
这个作者很懒,什么都没留下…
展开
-
Threejs——辅助视图的旋转轴
【代码】Threejs——辅助视图的旋转轴。原创 2024-07-23 15:00:29 · 325 阅读 · 0 评论 -
Threejs--Layers
在 Three.js 中,Layers 是用来控制场景中对象的可见性的机制。它允许你将场景中的不同对象分组到不同的图层(Layer),并通过设置相机的可见图层来控制哪些图层的对象会被渲染到屏幕上。原创 2024-06-25 11:23:05 · 370 阅读 · 0 评论 -
threejs-- add()和attach()的区别(不受父对象影响)
add()用于构建层级关系,子对象会继承父对象的变换。attach()用于管理物体之间的关系,添加的物体不会直接继承父对象的变换。选择使用哪个方法取决于你的需求:如果希望子对象能够受到父对象的变换影响,使用add();如果希望在不受父对象变换影响的情况下管理层级关系,使用attach()。原创 2024-06-21 17:41:59 · 365 阅读 · 0 评论 -
在实现物体测距,使用射线时自己导致的bug。。
我是想相交的到点以后,直接塞入对应交到的物体里用一个SphereGeometry显示(不测量的时候,寻找其父元素移除)。进行一番操作以后,发现显示的位置始终不对。经过一段时间的思考,发现使用intersects[0].object.worldToLocal()反而正确了。原创 2024-06-20 11:51:54 · 451 阅读 · 0 评论 -
Raycaster--当物体放在容器中并做了转换,交点坐标不对的问题。
当子对象位于一个做了变换(如旋转、缩放、平移)的容器中时,从 Raycaster 获取的相交点是相对于世界坐标系的。为了将相交点转换到子对象的本地坐标系中,需要使用 worldToLocal 方法。这种转换可以帮助你正确地在子对象的本地坐标系中处理相交点。原创 2024-06-20 11:42:19 · 332 阅读 · 0 评论 -
本地坐标和世界坐标---- geometry和mesh
BufferGeometry 的坐标数据是相对于其所属的 Mesh 对象的原点(局部坐标系中的原点)来定义的。这意味着几何体顶点的位置是以属性作为参考点的。这里的关键是 Mesh 的 position 属性本身定义了该对象在世界坐标系中的位置。然而,当我们谈论时,我们,即Mesh 的原点。举个例子,如果你创建一个立方体 geometry,它的中心会默认位于局部坐标系的原点 (0, 0, 0)。原创 2024-06-04 14:37:38 · 923 阅读 · 0 评论 -
给物体添加LineSegments,导致Raycaster不准确(拾取范围扩大)的问题
检测所有在射线与这些物体之间,包括或不包括后代的相交部分。返回结果时,相交部分将按距离进行排序,最近的位于第一个),相交部分和.intersectObject所返回的格式是相同的。降低射线投射器的阙值,这样边界就不会在射线视野中占据太多空间。Raycaster()主要有两个方法。其实两个很像,区别只是第一个参数。可以将想要求交的物体放入其中。什么是射线投射器的阙值。原创 2024-05-24 19:01:48 · 325 阅读 · 0 评论 -
threejs利用dat.gui选取颜色
其次添加方法用的是addColor。首先得传入的是十六进制。原创 2024-05-23 18:59:02 · 106 阅读 · 0 评论 -
应用transform control 调节物体y轴时,紧贴地面的效果
在控制物体改变的的时候,检测鼠标抬起,然后检测当前控制模式是否为scale,如果是,检测当前捕捉物体是否是期望的物体。0.01是为了预防深度冲突的问题。原创 2024-05-22 15:14:38 · 472 阅读 · 0 评论 -
.displacementMap 用贴图贴出3D效果
看到群友的调参群友的贴图效果。原创 2024-05-22 14:44:06 · 218 阅读 · 0 评论 -
threejs --本地坐标和世界坐标 --欧拉角和四元数
Three.js 的 TransformControls 是一种用于在场景中交互式地变换对象的工具。它可以用来控制物体的位置(平移)、旋转和缩放。当使用 TransformControls 来旋转一个物体时,它实际上是通过修改物体的四元数 (quaternion) 来进行的。四元数是一种避免万向节锁并能够表示任何 3D 方向的数学结构。由于它们不受旋转顺序的限制且可以提供平滑的连续旋转,因此它们非常适合用来实现交互式旋转控件。原创 2024-05-16 10:32:10 · 866 阅读 · 0 评论 -
threejs---tween补间动画插件--前端接收物体位置信息进行顺滑动画
【代码】threejs---tween补间动画插件--前端接收物体位置信息进行顺滑动画。原创 2024-05-11 14:09:33 · 307 阅读 · 0 评论 -
BufferGeometry--持续更新
在Three.js中,BufferGeometry 对象的 .center() 方法是用于将几何体的原点(0, 0, 0)移到其包围盒的中心。这通常在你想要旋转、缩放或者对齐几何体时非常有用,因为它确保了这些操作是相对于几何体的中心进行的。通过 .center() 方法,模型的几何中心和原点重合,自然旋转也就是围绕几何中心进行的。一旦调用,原始的顶点位置将不再保持,除非你有备份。总之,.center() 提供了一种便捷方式来重新定位几何体,以便后续任何变换都相对于几何体的视觉中心。找到该包围盒的中心点。原创 2024-05-09 20:12:29 · 541 阅读 · 0 评论 -
场景2D/3D模式
此章比较简短提供一个思路后续有想法会继续更新。原创 2024-04-25 09:53:44 · 131 阅读 · 0 评论 -
ExtrudeGeometry+Shape实现由二维平面变为立体模型
使用路径以及可选的孔洞来定义一个二维形状平面。方法一方法二你可以简单理解为这个类定义了二维多边形的边界。原创 2024-04-22 16:41:50 · 348 阅读 · 0 评论 -
深度冲突--threejs(webgl)
很多时候一个物体会具有点、线、面三种模式。如果需要同时绘制多种模式,比如以面和线模式绘制两遍模型,可能会看到线不连续,当镜头推远推近时会出现闪烁现象。直线和多边形的光栅化方式并不完全相同,在线上和多边形边缘上产生的像素的深度值通常并不相同。但是深度是有精度限制的,距离视点越远,精度越低,由于舍入误差会造成判断错误,进而导致渲染上问题。在深度检测之前,可以对zbuffer值进行一个偏移,即多边形偏移。原创 2024-04-22 14:49:04 · 738 阅读 · 0 评论 -
GLTF加载器(GLTFLoader)
glTF(gl传输格式)是一种开放格式的规范 (open format specification), 用于更高效地传输、加载3D内容。该类文件以JSON(.gltf)格式或二进制(.glb)格式提供, 外部文件存储贴图(.jpg、.png)和额外的二进制数据(.bin)。一个glTF组件可传输一个或多个场景, 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。原创 2024-04-16 12:05:06 · 542 阅读 · 0 评论