![](https://img-blog.csdnimg.cn/20190927151117521.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Threejs
文章平均质量分 59
threejs 开发
优惠券已抵扣
余额抵扣
还需支付
¥129.90
¥299.90
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
seelingzheng
这个作者很懒,什么都没留下…
展开
-
THREEJS 音频口型同步
以上获取的文件只带了部分的表情动画,需要在在下载链接中添加参数来设定需要加载那些表情文件动画 链接地址如下,上一步链接后面加上参数。在音频文件处理出的JSON文件中的value值,有一个默认的对应关系,需要将此映射关系更新到我们的模型中去。网站提供的在线文本转音频文件的功能,输入你想播放的文字,然后点击开始转换即可得到一个mp3格式的文件。因为音频文件转成程序能用的json文件需要用到ogg格式的数据,所有这里还需要进行一步转换。文件可以得知模型含有如下的mesh。通过在线网站转成ogg格式的文件。原创 2024-07-26 16:02:51 · 90 阅读 · 0 评论 -
【Vue3+Tres 三维开发】02-Debug
Debug这里主要是讲在三维中的调试,同以前threejs中使用的lil-gui类似,TRESJS也提供了一套可视化参数调试的插件。使用方式和之前的组件相似。原创 2024-04-26 09:26:47 · 213 阅读 · 0 评论 -
【Vue3+Tres 三维开发】01-HelloWord
简单的说,就是基于THREEJS封装的能在vue3中使用的一个组件,可以像使用组件的方式去创建场景和模型。优势就是可以快速创建场景和要素的添加,并且能很明确知道创景中的要素构成和结构。原创 2024-04-26 09:25:37 · 1182 阅读 · 0 评论 -
【R3F】14. Clipping
threejs 版本 可以参考:https://blog.csdn.net/seelingzheng/article/details/128909769。原生裁切一样需要设置Material的。原创 2024-03-18 18:11:23 · 72 阅读 · 0 评论 -
【R3F】13. 碰撞反馈 impulse
不同的质量,下落时的速度是一样的,当在点击某个物体的时候,质量越大的物体,越不容易被点动。,可以根据实际的接触面设置具体的摩擦系数值,默认值是。控制某一个物体重力加速度大小。值越大,弹跳越力度越大。原创 2024-03-18 16:07:04 · 224 阅读 · 0 评论 -
【R3F】12. 物理效果
所有需要物理效果的mesh都需要放在。用于显示 wireframe。每个 mesh 都需要用。多包围碰撞包围盒组合。原创 2024-03-13 11:42:30 · 188 阅读 · 0 评论 -
【R3F】11.模型加载
通过这样的方式来加载模型,可以知道模型的构造和名称。命令直接将模型文件生成 jsx文件,可以直接使用。原创 2024-03-13 11:30:44 · 61 阅读 · 0 评论 -
【R3F】0.9添加 shadow
可以有两种方式,第一种方式直接设置属性,第二种方式是根据节点设置。类似烘培,设置好阴影之后,就不再做更新,直接加入节点就可以了。累计的阴影,对所有的灯光进行阴影管理渲染。在对应的 mesh 中设置 产生阴影。设置完成之后,即可实现阴影。即可设置好全局的阴影。不需要设置 产生阴影。原创 2023-07-27 14:37:39 · 383 阅读 · 0 评论 -
【R3F】0.8drei使用
方式很简单直接添加上对应的节点就可以可以了。标签 这里是会把文本转成 3d 对象,同。是用来设置标签想气球一样的漂浮状态。使用的方式有两种,其他属性设置同。设置如果被物体遮挡时,是否隐藏。css 的 class 名,控制缩放时,是否跟随变化,中的 font,其中。原创 2023-07-27 14:36:20 · 436 阅读 · 0 评论 -
【R3F】07. 场景设置
属性值是按照threejs的属性值设置,r3f中,直接在canvas 节点设置 camera属性即可。设置方式同camera类似,需要设置gl属性值,可以直接使用three对象中的值。设置分辨率可以直接设置 dpr 属性值 ,设置为数组,表示设置了最大最小值。返回的对象集,获取camera对象,然后修改对应的属性值。修改相机position可以通过。原创 2023-07-21 15:51:17 · 121 阅读 · 0 评论 -
【R3F】06.自定义Geometry
创建vertex,同在threejs中方式一样,这里是随机生成一些点位信息,创建10个三角面使用useMemo,因为创位置信息只需要有一次就可以了i++) {}, [])设置attribute/>计算法线,需要geometry初始化完成之后,才能调用属性的方法,所以这里使用了useEffect}, [])完整代码i++) {}, [])}, [])/>原创 2023-07-21 15:49:52 · 73 阅读 · 0 评论 -
【R3F】0.5使用OrbitControls
使用OrbitControls原创 2023-07-20 11:13:01 · 86 阅读 · 0 评论 -
【R3F】0.4使用动画
使用动画原创 2023-07-20 11:12:18 · 61 阅读 · 0 评论 -
【R3F】0.3新建组件
新建组件。原创 2023-07-20 11:11:31 · 57 阅读 · 0 评论 -
【R3F】02.Helloword
修改mesh的位置在 mesh上新增了。属性即可,也可以单独修改某个方向位移。原创 2023-07-20 11:10:42 · 44 阅读 · 0 评论 -
【R3F】01.项目初始化
react-three-fiber原创 2023-07-20 11:08:03 · 43 阅读 · 0 评论 -
Electron+Vue+Vite: 开发实践—初始化项目
运行系统:Apple M1 ,16 GB开发工具:VSCode参考:https://github.com/electron-vite/electron-vite-vue.git。原创 2023-05-31 11:47:12 · 530 阅读 · 0 评论 -
shaderMaterial裁切
在简单裁切中,我们使用的是,所以我们可以从这个文件入手,文件路径通过搜索clipping可以看到.........} `;原创 2023-02-13 14:19:15 · 410 阅读 · 0 评论 -
简单裁切面板
通过Plane平面对场景中的物体进行裁切, 这个平面就是裁剪平面, 裁剪平面分为全局的裁剪和局部裁剪;全局裁剪指的有一个平面裁剪了整个场景的物体, 通过对``renderer中clippingPlanes`属性的设置;局部裁剪指的有一个平面裁剪裁剪指定物体, 这需要对指定物体通过设置material中进行设置被裁剪的物体的是否需要渲染阴影多个平面裁剪时, 保留并集还是交集。原创 2023-02-06 22:57:39 · 250 阅读 · 1 评论 -
obj 与 fbx 三维模型文件对比
fbx2020 …fbx 格式(wiki)是 Autodesk 公司出品的支持动画的三维模型交换格式(详见:FileFormat-fbx)。obj 格式(wiki chs)是由 Wavefront 公司出品的三维模型文本交换格式(详见:FileFormat-obj)。示例模型下载:https://wiki.unrealengine.com/File:ThirdPerson_FBX.zip。可使用 QuickTime、FBX Review、visual studio 可视化该模型格式。原创 2023-02-05 20:54:56 · 1773 阅读 · 0 评论 -
ThreeJS中 3dtiles实现裁切功能
因为threejs 裁切只两种模式,一种是全局模式,就是设置renderer的clippingPlanes,然后场景中的所有模型都进行了裁切,另外一种是指定模型的裁切,同时需要开启。因为在使用的过程中,点云数据是使用的ShaderMaterial的方式来加载的,但是她的VS和TS文件默认是没有支持裁剪的,所有这里需要对两个文件做修改,具体如下。来完成,由于插件本身是不支持对模型裁切的,所以这里我们需要对源文件进行一改动,主要是修改shader这块。来写的,所有改动的过程中,还需要把一些定义约束加上。原创 2023-02-02 22:02:09 · 1157 阅读 · 0 评论 -
THREEJS 数据加载和裁切目录
THREEJS 数据加载和裁切目录原创 2023-02-02 21:57:11 · 117 阅读 · 0 评论 -
ThreeJS-加载3dtiles数据
使用方法参考 https://loaders.gl/examples/3d-tiles。目前加载3dtiles数据的方式有三种,均是借助第三方插件的方式。原创 2023-02-02 21:54:02 · 2970 阅读 · 0 评论 -
通过 threejs 加载 3dtiles模型数据,实现面板和包围盒采裁切功能
通过 threejs 加载 3dtiles模型数据,实现面板和包围盒采裁切功能原创 2023-01-02 19:13:52 · 1063 阅读 · 0 评论