WebGL
文章平均质量分 72
subsistent
历经磨难
展开
-
threejs 入门基础(万字总结)(建议收藏!!!)
当我们考虑使用分组意味着我们的场景当中放置的模型会越来越多,所以如果通过js代码来找到我们要的指定的模型就会成为一个常见的需求,如图原生js的dom的操作一样,threejs也提供了方法来方便我们获取指定的模型,getObjectByName() 方法通过通过传入一个模型的name属性的值就可以快速的得到指定的模型对象。我们每次修改代码再去看效果其实对于3d的控件放置来说是不方便的,所以three提供了一个相机控件,允许我们通过鼠标的操作就能调整我们的相机的位置,所以快速观察3d模型的不同角度的效果。原创 2023-09-09 16:24:07 · 1084 阅读 · 2 评论 -
react-three-fiber入门
要说Three.js要先提一下WebGl:WebGl是openGl的前端实现,Three.js是WebGl的进一步封装,react-three-fiber是Three.js进一步封装用于react.js前端架构。WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。转载 2023-03-26 20:57:16 · 303 阅读 · 0 评论 -
three.js简单实用
透视投影跟人眼看到的世界是一样的,近大远小;正交投影则远近都是一样的大小,三维空间中平行的线,投影到二维空间也一定是平行的。示景体是一个长方体,由6个参数确定:THREE.OrthographicCamera(left, right, top, bottom, near, far),这6个参数规定了相机示景体的左、右、上、下、前、后六个面的位置。Threejs提供了几种比较有代表性的材质,常用的有基础材质、镜面高光材质,除了Threejs提供的材质外还可以引入外部图片,贴到物体表面,称为纹理贴图。转载 2023-03-24 21:30:51 · 73 阅读 · 0 评论 -
如何用React three fiber在React中使用three.js
react three-fiber(通常缩写为R3F)允许您在react应用程序中使用three.js为web浏览器创建和显示3D计算机图形。如果你熟悉使用React,并且你想创建一个three.js的体验,那么标准的方法可能很难扩展。react three-fiber通过提供在react生态系统中工作的三个.js约定来解决这个痛点。一些使用react三纤维创建的项目包括Let Girls Dream、Gucci 1955年的Horse Bit Bag和Gucci的24 Hour Ace。翻译 2023-03-25 15:51:42 · 433 阅读 · 0 评论 -
Web 3D捏脸
针对第一点,相对于常规需求,3D需求因为需要游戏研发侧的支持,也就等于多了一个需求环节,在排期上会多占用一些时间,而且和游戏研发侧的沟通很多时候需要一对多,你不仅需要跟美术同学沟通需要的3D模型素材,还需要和开发同学沟通3D模型的一些捏脸参数和毛发等颜色的色卡搭配。Three.js的 3D场景、模型均通过WebGL渲染在Canvas之上,引入Three.js后,首先需要把场景、摄像机、灯光、渲染器运行起来,基础代码每一项就几行,使用不同的对象方法可以达到不同的效果,具体更多的使用方法可以参照。转载 2023-03-24 21:03:51 · 446 阅读 · 0 评论 -
开始three.js
Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。开发3D类的H5小游戏或者微信小游戏,Three.js引擎是非常好的选择噢 无需下载,方便传播,目前的生态非常和小游戏开发。随着WebGL技术的持续推广,5G技术的持续推广,各种产品在线3D展示将会变得越来越普及。一方面是海量超大数据的可视化,另一方面是与3D相关的数据可视化。感幸福的小伙伴可以到Three.js的官网案例看一看噢。转载 2023-03-24 20:56:01 · 124 阅读 · 0 评论 -
three.js导入glb/gltf模型
【代码】three.js导入glb/gltf模型。原创 2023-03-24 19:25:43 · 933 阅读 · 0 评论 -
Three.js 学习路线
Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。WebGLRenderer - 渲染器。VideoTexture - 视频纹理。DepthTexture - 深度纹理。CubeTexture - 立方纹理。5 threejs 全景学习曲线。Geometry - 几何体。Texture - 纹理贴图。Animation - 动画。Skeleton - 骨架。Material - 材质。Camera - 相机。原创 2023-02-15 15:52:36 · 296 阅读 · 0 评论 -
Three.js删除模型对象
通过Threejs开发Web3D应用的时候,可能需要删除场景中的模型对象,如果想从一个场景Scene或组对象Group删除一个三维模型对象,可以通过.remove()和.dispose()方法来实现。删除场景对象中Scene一个子对象Group,并释放组对象Group中所有网格模型几何体的顶点缓冲区占用内存.add()方法通过.add()方法可以把一个模型或光源对象添加到场景Scene或组对象Group中,Three.js渲染器场景的时候,一个模型只有插入场景中才会被渲染出来显示在Canvas画布上。转载 2023-02-06 21:30:52 · 1199 阅读 · 0 评论 -
Three.js之dat.gui的使用
【代码】Three.js之dat.gui的使用。原创 2023-02-12 15:00:47 · 69 阅读 · 0 评论 -
three.js性能优化
three.js是JavaScript编写的第三方库。提供了非常多的3D显示功能。在使用的时候,虽然three.js 做了优化,但是在使用不恰当的代码,也会产生性能损耗。帧率越低,给人感觉就越卡。这是我在开发中自己百度总结的,有不对的可以联系我啊在加载页面之前可以给个加载页面的缓冲,因为场景模型没有加载的时候会黑屏,加载一瞬间可能会出现闪屏等性能问题,十分影响用户体验的。BufferGeometry 会缓存网格模型,性能要高效点。网格模型生成原理。原创 2023-02-05 16:19:07 · 546 阅读 · 0 评论