[threejs]让导入的gltf模型显示边框

news2025/4/19 13:33:35

边框1效果图如下:

代码如下:

const gltfLoader1 = new GLTFLoader();
  gltfLoader1.load( "/assets/box/1/scene.gltf" ,function(gltf){
    let model = gltf.scene;
    model.scale.set(3,3,3)
    // scene1.add(model);
    // renderer1.render(scene1, camera1);

    model.traverse( function ( child ) {
      console.log(child)
      if ( child instanceof THREE.Mesh ) {
          let geometry = child.geometry;
          let material = child.material;
          let mesh = new THREE.Mesh(geometry, material);

          scene1.add(mesh);
          mesh.scale.set(0.03,0.03,0.03)
          const wireframeGeometry = new THREE.WireframeGeometry( geometry );
          const wireframeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff } );
          const wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
          mesh.add( wireframe );
      }
  });

解析:

上述代码是对组成mesh的最小单元(mesh是由多个三角形组成)进行显示边框,所以会看到最终效果是三角形进行了描边

边框2效果图如下:

代码

const gltfLoader1 = new GLTFLoader();
gltfLoader1.load( "/assets/box/1/scene.gltf" ,function(gltf){
    let model = gltf.scene;
    model.scale.set(3,3,3)
    // 显示盒子的边框
    model.traverse( function ( child ) {
      console.log(child)
      if ( child instanceof THREE.Mesh ) {
          let geometry = child.geometry;
          let material = child.material;
          let mesh = new THREE.Mesh(geometry, material);

          scene1.add(mesh);

          const edges = new THREE.EdgesGeometry( geometry ); 
          const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) ); 
          mesh.add(line)
      }
  });

解析:

这种边框方式也成为了outline around,就是对模型的边进行描边,显示一个特殊颜色,看效果就看出来了。两种方式用法。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1156340.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SaaS 出海,如何搭建国际化服务体系?(一)

防噎指南:这可能是你看到的干货含量最高的 SaaS 出海经验分享,请准备好水杯,放肆食用(XD。 当越来越多中国 SaaS 企业选择开启「国际化」副本,出海便俨然成为国内 SaaS 的新角斗场。 LigaAI 观察到,出海浪…

CSS3表格和表单样式

在传统网页中,表格主要用于网页布局,因此也成为网页编辑的主要工具;在标准化网页设计中,表格的主要功能是显示数据,也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果,如表格和表单的…

在ffmpeg中,如何把h264转换为rgb格式

在ffmpeg中,网络视频流h264为什么默认的转为YUV而不是其他格式 文章中介绍了,h264解码的时候是直接解码为yuv的,如果在使用的过程中 需要用到rgb的格式,我们该如何来转换这种格式呢? 在上面的文章中,我们已…

基于YOLOv8模型暗夜下人脸目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要:基于YOLOv8模型暗夜下人脸目标检测系统可用于日常生活中检测与定位黑夜下人脸目标,利用深度学习算法可实现图片、视频、摄像头等方式的目标检测,另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法…

塞尔帕替尼的靶点以及疗效【医游记】

(图片来源于网络) 塞尔帕替尼(Selpercatinib)是一种高选择性和抑制活性的小分子RET(受体酪氨酸激酶)抑制剂。它是全球首个获批的高选择性RET抑制剂,用于治疗RET融合阳性的转移性非小细胞肺癌的…

GNSS卫星姿态解算

GNSS卫星姿态影响太阳光压辐射力的建模与卫星天线改正,正确解算卫星姿态是GNSS数据解算中的关键步骤。 卫星的姿态指卫星的星体坐标轴XYZ在惯性系下的指向,其中Z轴始终指向地球地心,Y轴为卫星太阳能帆板的旋转轴,它始终与太阳-卫星…

CCF_A 计算机视觉顶会CVPR2024投稿指南以及论文模板

目录 CVPR2024官网: CVPR2024投稿链接: CVPR2024 重要时间节点: CVPR2024投稿模板: WORD: LATEX : CVPR2024_AuthorGuidelines CVPR2024投稿Topics: CVPR2024官网: https://cvpr.thecvf.com/Conferences/2024CV…

YouTrack 在创建问题的时候如何切换项目

最近在准备从 JIRA 中转换到 YouTrack 上。 在创建问题的时候,JIRA 是通过选择项目,然后单击创建,这个创建就会直接在项目中进行创建了。 但是 YouTrack 不是这样的,感觉就是 YouTrack 的创建问题就是一个入口。 其实我并不知道…

C/C++药房管理 2021年3月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C药房管理 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C药房管理 2021年3月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 随着信息技术的蓬勃发展,医疗信息化已经成为…

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.11 小案例-无边框窗口

本节对应的视频讲解:B_站_链_接 【QT开发笔记-基础篇】 第4章 事件 4.11 小案例-无边框窗口 本章要实现的整体效果如下: 本节课,来实现一个非常精简的无边框窗口,支持拖动4个边和4个角来缩放窗口 整体效果如下: 整体效…

电脑实用增效工具

1、腾讯电脑管家 强力卸载特别有用。本来挺排斥这类软件,但真正用一段时间后发现,已经能做到无骚扰,只需在关键时刻排上用场 2、Snipaste 桌面贴图软件,高效好用 3、DeskPins 置顶工具,可自定义快捷键 4、向日葵远程…

【红蓝攻防鸿篇巨著】ATTCK视角下的红蓝对抗实战指南

【文末送书】今天推荐一本网安领域优质书籍《ATT&CK视角下的红蓝对抗实战指南》,本文将从其亮点与内容出发,详细阐发其对于网安从业人员的重要性与益处。 文章目录 背景简介内容文末送书 背景 根据中国互联网络信息中心(CNNIC&#xff0…

“2024杭州智慧城市展“汇集全球领先的智慧城市解决方案和前沿技术

2024杭州智慧城市展览会,将于2024年4月份在杭州国际博览中心盛大召开。此次展览会以智慧城市为主题,涵盖了智慧城市、信息安全、数据中心与通信、人工智能、公共安全、会议广播视讯、智慧社区与智能家居、智慧停车等八个模块,旨在推动互联网、…

基于英伟达NVIDIA Jetson Xavier nx的Ubuntu系统安装nginx,mysql, java8

记录一下基于英伟达NVIDIA Jetson Xavier nx的Ubuntu系统安装nginx,mysql, java8(非docker方式) nx系统主要用于开发ai边缘人工智能视觉计算,人脸识别,车辆识别等,同样的也可以部署一些常见的程序应用 nx系统界面 …

x3daudio1 7.dll丢失怎么修复?多种x3daudio1 7.dll修复方法对比

x3daudio1_7.dll是Windows操作系统中的一个动态链接库文件,它主要负责处理音频相关的功能。当这个文件缺失或损坏时,可能会导致一些音频播放问题,如无声、杂音等。那么,x3daudio1_7.dll缺失的原因是什么呢?又该如何修复…

JavaScript从入门到精通系列第二十六篇:详解JavaScript中的Math对象

大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。 孙哥连接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员 本专栏简介:话不多说,让我们一起干翻J…

sitespeedio.io 前端页面监控安装部署接入influxdb 到grafana

1.docker部署influxdb,部署1.8一下,不然语法有变化后面用不了grafana模板 docker run -d -p 8086:8086 --name influxdb -v $PWD/influxdb-data:/var/lib/influxdb influxdb:1.7.11-alpine docker exec -it influxdb_id bash #influx create user admin with pass…

基于供需算法的无人机航迹规划-附代码

基于供需算法的无人机航迹规划 文章目录 基于供需算法的无人机航迹规划1.供需搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要:本文主要介绍利用供需算法来优化无人机航迹规划。 1.供需搜索算法 …

kubernetes实验挑战三(| Vote App | Redis | Postgresql DB | Deployment | service)

Deploy the given architecture to vote namespace. 1、Create a new namespace: name ‘vote’ kubectl create ns vote2、 Create new deployment. name: ‘worker’image: ‘kodekloud/examplevotingapp_worker’status: ‘Running’ kubectl create deployment worker…

感觉嵌入式嵌入式单片机太难了,该不该放弃?

今日话题,感觉嵌入式单片机太难了,该不该放弃?嵌入式和单片机开发可能是一项具有挑战性但也非常有前景的领域。虽然它的学习曲线可能陡峭,但只要你克服了一开始的难度,你可能会发现它非常有趣且有价值。不要轻易放弃&a…