当前位置: 首页 > news >正文

学习threejs,导入CTM格式的模型

👨‍⚕️ 主页: gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏:threejs gis工程师


文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.ColladaLoader DAE模型加载器
  • 二、🍀导入CTM格式的模型
    • 1. ☘️实现思路
    • 2. ☘️代码样例


一、🍀前言

本文详细介绍如何基于threejs在三维场景中导入CTM格式的模型,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️THREE.ColladaLoader DAE模型加载器

THREE.ColladaLoader用于加载和处理Collada(.dae)格式3D模型文件的扩展。
CTM三维文件:

  • CTM是由openCTM创建的一种文件格式,可以用来以压缩格式存储三维网格的三角形面片。
  • OpenCTM 本质上是一种文件格式,用于以紧凑而通用的格式存储 3D
    三角形网格。同时为了方便软件开发人员和3D设计人员支持该格式,提供了一个易于使用的软件库,可以读写OpenCTM格式文件。

CTM三维文件特点:

  • 开放的数据格式。
  • 支持存储每个顶点的法线、UV 坐标和自定义顶点属性。
  • 可以存储非常大的几何图形(数十亿个三角形和顶点)。
  • 非常紧凑的3D 三角形几何存储,使用高效的熵减少技术,结合最先进的熵编码 (LZMA)。
  • 用户可控精度的无损压缩:真正的无损压缩(IEEE 754 32 位浮点),适用于需要
    1:1表示数据的情况。需要出色的压缩比时,具有用户可控精度的固定点表示。

二、🍀导入CTM格式的模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene
  • 3、初始化camera相机,定义相机位置 camera.position.set,设置相机方向camera.lookAt。
  • 4、初始化THREE.SpotLight聚光灯光源spotLight,设置spotLight的位置信息,场景scene中添加spotLight。
  • 5、加载几何模型:创建THREE.CTMLoader加载器loader,loader调用load方法加载‘auditt_wheel.ctm’轮胎模型。在load回调函数中,创建THREE.MeshLambertMaterial漫反射材质mat,传入回调函数获取的几何体对象geometry和mat参数创建THREE.Mesh网格对象group,设置group的大小,scene中添加group。具体代码参考代码样例。
  • 6、加入stats监控器,监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>导入CTM格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/CTMLoader.js"></script><script type="text/javascript" src="../libs/ctm.js"></script><script type="text/javascript" src="../libs/CTMWorker.js"></script><script type="text/javascript" src="../libs/lzma.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {var stats = initStats();// 创建场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;// 设置相机位置和方向camera.position.x = 10;camera.position.y = 10;camera.position.z = 10;camera.lookAt(new THREE.Vector3(0, 0, 0));// 添加聚焦光源var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(20, 20, 20);scene.add(spotLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);// call the render functionvar step = 0;var group;var gui = new dat.GUI();var loader = new THREE.CTMLoader();var group = new THREE.Object3D();loader.load("../assets/models/auditt_wheel.ctm", function (geometry) {var mat = new THREE.MeshLambertMaterial({color: 0xff8888});group = new THREE.Mesh(geometry, mat);group.scale.set(20, 20, 20);scene.add(group);}, {});render();function render() {stats.update();if (group) {group.rotation.y += 0.006;group.rotation.x += 0.009;// group.rotation.x+=0.006;}requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: msstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init;
</script>
</body>
</html>

效果如下:
在这里插入图片描述

相关文章:

学习threejs,导入CTM格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.ColladaLoader DAE模…...

Lua元表

哈喽&#xff0c;好久没有做记录了&#xff0c;最近刚好有时间打算整理一些基础常用内容&#xff0c;先做一期关于Lua相关的内容热热身。如果内容有误&#xff0c;欢迎大家指出我会积极做出响应。 在Lua中&#xff0c;元表&#xff08;metatable&#xff09; 和 元方法&#xf…...

pyqt和pycharm环境搭建

安装 python安装&#xff1a; https://www.python.org/downloads/release/python-3913/ python3.9.13 64位(记得勾选Path环境变量) pycharm安装&#xff1a; https://www.jetbrains.com/pycharm/download/?sectionwindows community免费版 换源&#xff1a; pip config se…...

overleaf中的includegraphics设置图片缩放,居中显示

overleaf中的includegraphics设置图片缩放,居中显示 \includegraphics[width=0.5\textwidth]{example.jpg} \centering 在使用 \includegraphics 命令插入图片时,可以通过设置其参数来缩小图片的显示尺寸,以下是几种常见的方法: 设置宽度或高度 按比例缩小宽度:可以使用…...

USB免驱IC读写器QT小程序开发

USB免驱全协议IC卡读写器QT小程序开发&#xff0c;读取15693卡。 QT小程序UI开发界面&#xff1a; QT程序代码mainWindow.cpp代码如下&#xff1a; MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow) {ui->setupUi(this); }MainWind…...

Wend看源码-Java-集合学习(List)

摘要 本篇文章深入探讨了基于JDK 21版本的Java.util包中提供的多样化集合类型。在Java中集合共分类为三种数据结构&#xff1a;List、Set和Queue。本文将详细阐述这些数据类型的各自实现&#xff0c;并按照线程安全性进行分类&#xff0c;分别介绍非线程安全与线程安全的实现方…...

只谈C++11新特性 - 删除函数

删除函数 背景 在 C11 之前&#xff0c;C 的类默认会生成拷贝构造函数和赋值运算符。这在某些情况下会引发问题&#xff0c;尤其是在我们希望明确禁止某些操作时。假设我们有一个类&#xff0c;它不希望被拷贝&#xff0c;但未明确声明拷贝构造函数和赋值运算符&#xff0c;这…...

uniapp 文本转语音

uniapp 文本转语音 基于 Minimax API 的 UniApp 文本转语音工具&#xff0c;支持文本分段、队列播放、暂停恢复等功能。目前只内置了 Minimax文本转语音Minimax 的语音生成技术以其自然、情感丰富和实时性强而著称 API_KEY、GroupId 获取方法 https://platform.minimaxi.com…...

1.RPC基本原理

文章目录 RPC1.定义2.概念3.优缺点4.RPC结构5.RPC消息协议5.1 消息边界5.2 内容5.3 压缩 6.RPC的实现6.1 divide_protocol.py6.2 server.py6.3 client.py RPC 1.定义 远程过程调用(remote procedure call) 2.概念 广义:所有通过网络进行通讯,的调用统称为RPC调用 狭义:不采…...

如何从 0 到 1 ,打造全新一代分布式数据架构

导读&#xff1a;本文从 DIKW&#xff08;数据、信息、知识、智慧&#xff09; 模型视角出发&#xff0c;探讨数字世界中数据的重要性问题。接着站在业务视角&#xff0c;讨论了在不断满足业务诉求&#xff08;特别是 AI 需求&#xff09;的过程中&#xff0c;数据系统是如何一…...

PyPika:Python SQL 查询构建器

什么是 PyPika&#xff1f; Pypika 是一个 Python 库&#xff0c;用于构建 SQL 查询。它提供了一种简洁、直观的方式来生成 SQL 语句&#xff0c;而无需手动编写复杂的 SQL 代码。Pypika 的设计哲学是尽可能地接近 SQL 的自然语法&#xff0c;同时利用 Python 的强大功能来简化…...

剑指Offer|LCR 014. 字符串的排列

LCR 014. 字符串的排列 给定两个字符串 s1 和 s2&#xff0c;写一个函数来判断 s2 是否包含 s1 的某个变位词。 换句话说&#xff0c;第一个字符串的排列之一是第二个字符串的 子串 。 示例 1&#xff1a; 输入: s1 "ab" s2 "eidbaooo" 输出: True 解…...

通过百度api处理交通数据

通过百度api处理交通数据 1、读取excel获取道路数据 //道路名称Data EqualsAndHashCode public class RoadName {ExcelProperty("Name")private String name; }/*** 获取excel中的道路名称*/private static List<String> getRoadName() {// 定义文件路径&…...

使用亚马逊针对 PyTorch 和 MinIO 的 S3 连接器实现可迭代式数据集

2023 年 11 月&#xff0c;Amazon 宣布推出适用于 PyTorch 的 S3 连接器。适用于 PyTorch 的 Amazon S3 连接器提供了专为 S3 对象存储构建的 PyTorch 数据集基元&#xff08;数据集和数据加载器&#xff09;的实现。它支持用于随机数据访问模式的地图样式数据集和用于流式处理…...

c++编译过程初识

编译过程 预处理&#xff1a;主要是执行一些预处理指令&#xff0c;主要是#开头的代码&#xff0c;如#include 的头文件、#define 定义的宏常量、#ifdef #ifndef #endif等条件编译的代码&#xff0c;具体包括查找头文件、进行宏替换、根据条件编译等操作。 g -E example.cpp -…...

Java旅程(五)Spring 框架与微服务架构 了解 JVM 内部原理和调优

在现代企业级应用中&#xff0c;Spring 框架和微服务架构已经成为主流技术&#xff0c;而 Java 虚拟机&#xff08;JVM&#xff09;的理解和调优对于保证应用的高性能和稳定性也至关重要。本篇博客将深入讲解 Spring 框架与微服务架构&#xff0c;并进一步探讨 JVM 内部原理和调…...

SWAT-MODFLOW地表水-地下水耦合模型建模;QSWATMOD实现SWAT-MODFLOW联合

SWAT-MODFLOW地表水-地下水耦合建模的应用重要性&#xff1a; 1.全面性&#xff1a;耦合模型能够同时考虑地表水和地下水的相互作用&#xff0c;提供了一个更全面的水文循环模拟框架。2.准确性&#xff1a;通过耦合地表水和地下水模型&#xff0c;可以提高水文模拟的准确性&…...

Azure Function 解决跨域问题

这边前端call本地部署的azure function出现了跨域问题&#xff0c;搜索一下解决方案 直接修改local.setting.json&#xff0c;在其中添加CORS配置为通配符”*”&#xff0c;就行了 local.settings.json {"IsEncrypted": false,"Values": {"PYTHON_E…...

金融租赁系统的创新发展与市场竞争力提升探讨

内容概要 随着经济的快速发展&#xff0c;金融租赁系统逐渐成为金融市场中不可或缺的一环。它不仅提供了灵活的资金解决方案&#xff0c;还促进了企业的资本结构优化与资源配置效率。因此&#xff0c;了解该系统的市场背景与发展现状至关重要。 在现今环境下&#xff0c;新兴…...

Rust: offset祼指针操作

offset是偏移元素个数&#xff0c;不是字节数&#xff01; fn main(){let student_a Student{id:20240001,name:"张三娃".into(),class_id:3,age:14,grade:1};let student_b Student{id:20240002,name:"李四牛".into(),class_id:3,age:15,grade:1};let …...

【C#】WPF设置Separator为垂直方向

1. 方法1 <Separator BorderBrush"Gray"><Separator.LayoutTransform><RotateTransform Angle"90" /></Separator.LayoutTransform> </Separator>2. 方法2 <Separator Style"{StaticResource {x:Static ToolBar.S…...

常见的限流算法

常见的限流算法 限流的定义固定窗口算法滑动窗口算法漏桶算法&#xff08;推荐&#xff09;令牌桶算法(推荐)限流粒度本地限流&#xff08;单机限流&#xff09;分布式限流&#xff08;多机限流&#xff09;分布式限流的实现 限流的定义 限流&#xff0c;也称流量控制。是指系统…...

图文教程:使用PowerDesigner导出数据库表结构为Word/Html文档

1、第一种情况-无数据库表&#xff0c;但有数据模型 1.1 使用PowerDesigner已完成数据建模 您已经使用PowerDesigner完成数据库建模&#xff0c;如下图&#xff1a; 1.2 Report配置和导出 1、点击&#xff1a;Report->Reports&#xff0c;如下图&#xff1a; 2、点击&…...

7-7 旅行售货员

目录 题目描述 输入格式: 输出格式: 输入样例: 输出样例: 解题思路&#xff1a; 详细代码&#xff1a; 题目描述 某售货员要到若干城市去推销商品&#xff0c;已知各城市之间的路程(或旅费)。他要选定一条从驻地出发&#xff0c;经过每个城市一遍&#xff0c;最后回到驻地的路…...

QT写的动态正弦曲线图显示并打印

创建一个显示正弦曲线的 QChartView&#xff0c;并通过定时器不断更新图表数据&#xff0c;模拟动态数据。此外&#xff0c;还包含了一个在特定时间自动将图表导出为 PDF 文件的功能。 代码分析和注释 #include <QApplication> #include <QMainWindow> #include &…...

AI开发:决策树模型概述与实现:从训练到评估和可视化 - Python

通过前面的一些练习&#xff0c;我们已经学习了支持向量机、 回归、 鸢尾花模型 、卷积、 知识图谱、 生成式对抗网络、 K近邻、 等AI算法的基本概念&#xff0c;熟悉了一些常用的AI库&#xff0c;并且使用PYTHON大法进行了一些实战练习。接下来&#xff0c;我们向更深一层的概…...

MySQL 性能瓶颈,为什么 MySQL 表的数据量不能太大?

MySQL的性能瓶颈(为什么MySQL有几万的qps,怎么来的?性能分析 为什么 MySQL 表不能太大网上大部分人的说法:问题的关键: B树层数对查询性能的影响到底有多大? 是什么导致的 MySQL 查询缓慢?如何解决: MySQL的性能瓶颈(为什么MySQL有几万的qps,怎么来的? 一个全表扫描的查询…...

Vue中接入萤石等直播视频(更新中ing)

一、萤石&#xff1a; 1. 萤石云开发文档&#xff1a; https://open.ys7.com/help/31 2、安装&#xff1a; npm install ezuikit-js --save 3、在文件中引用&#xff1a;import EZUIKit from ezuikit-js 4、具体代码&#xff1a; 获取accessToken&#xff1a;https://open.…...

25 go语言(golang) - 内存分配机制原理

Go 语言的内存分配机制是一个复杂且高效的系统&#xff0c;旨在为程序提供快速和安全的内存管理。理解 Go 的内存分配有助于编写更高效的代码&#xff0c;并优化程序性能。 一、内存区域 栈&#xff08;Stack&#xff09; 栈用于函数调用时的临时变量分配。栈上的内存在函数返…...

【Linux命令】ps -a 和 ps -ef 的区别

ps -a 和 ps -ef 是 ps&#xff08;process status&#xff09;命令的不同选项&#xff0c;它们用于显示不同的进程信息。以下是这两个选项的主要区别&#xff1a; ps -a -a 选项表示显示所有拥有终端的进程&#xff0c;但不包括守护进程&#xff08;daemon processes&#x…...

几个支持用户名密码的代理链工具: glider, gost, proxychains+microsocks

几个支持用户名密码的代理链工具: glider, gost, proxychainsmicrosocks gost -L:7777 -Fsocks5://192.168.2.20:7575 -Fsocks5://user:passwd1.1.1.1:10086 -Dgost&#xff1a;(https://github.com/ginuerzh/gost) 参考 https://www.quakemachinex.com/blog/279.html...

编译安装教程

编译教程 下面是一个完整的从源码编译安装软件的教程&#xff0c;涵盖了从环境准备到配置、编译、安装的所有可能会用到的步骤和细节&#xff0c;适用于各种类型的软件包。 一、环境准备 在开始编译源码之前&#xff0c;确保系统满足以下条件&#xff1a; 1. 安装必要工具 …...

计算机网络-物理层

1.1传输媒体&#xff1a; 导引型传输媒体&#xff1a;双绞线&#xff0c;同轴电缆&#xff0c;光纤 非导引型传输媒体&#xff1a;微波通信&#xff08;2&#xff5e;40GHz&#xff09; 1.2传输方式: 串行传输&#xff1a;一个接一个的依次传输 并行传输&#xff1a;一次发送n…...

缓存管理自动化:JuiceFS 企业版 Cache Group Operator 新特性发布

近期&#xff0c;JuiceFS 企业版推出了 Cache Group Operator&#xff0c;用于自动化创建和管理缓存组集群。Operator 是一种简化 Kubernetes 应用管理的工具&#xff0c;它能够自动化应用程序的生命周期管理任务&#xff0c;使部署、扩展和运维更加高效。 在推出 Operator 之前…...

Linux应用软件编程-多任务处理(线程)

线程&#xff1a;轻量级的进程&#xff0c;线程的栈区独立&#xff08;8M&#xff09;&#xff0c;与同一进程中的其他线程共用进程的堆区&#xff0c;数据区&#xff0c;文本区。 进程是操作系统资源分配的最小单位&#xff1b;线程是cpu任务调度的最小单位。 1. 线程的创建…...

MySql索引(基础篇)

后面也会持续更新&#xff0c;学到新东西会在其中补充。 建议按顺序食用&#xff0c;欢迎批评或者交流&#xff01; 缺什么东西欢迎评论&#xff01;我都会及时修改的&#xff01; 感谢各位大佬写的文章让我学到很多东西&#xff01;只是在各位大佬的基础加了我自己的思路&a…...

手机发烫怎么解决?

在当今这个智能手机不离手的时代&#xff0c;手机发烫成了不少人头疼的问题。手机发烫不仅影响使用手感&#xff0c;长期过热还可能损害手机硬件、缩短电池寿命&#xff0c;甚至引发安全隐患。不过别担心&#xff0c;下面这些方法能帮你有效给手机 “降温”。 一、使用习惯方面…...

Java实现观察者模式

一、前言 观察者模式&#xff0c;又称为发布订阅模式&#xff0c;是一种行为设置模式&#xff0c;允许对象之间建立一对多的依赖关系&#xff0c;这样当一个对象状态改变时&#xff0c;它的所有依赖者&#xff08;观察者&#xff09;都会收到通知并自动更新。 二、具体实现 …...

OpenResty开发环境搭建

简介 OpenResty 是一个基于 Nginx的高性能 Web 平台&#xff0c;用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。官方地址&#xff1a;http://openresty.org/cn/ 具备下列特点&#xff1a; 具备Nginx的完整功能基于Lua语言进行扩展&#…...

鸿蒙系统文件管理基础服务的设计背景和设计目标

有一定经验的开发者通常对文件管理相关的api应用或者底层逻辑都比较熟悉&#xff0c;但是关于文件管理服务的设计背景和设计目标可能了解得不那么清楚&#xff0c;本文旨在分享文件管理服务的设计背景及目标&#xff0c;方便广大开发者更好地理解鸿蒙系统文件管理服务。 1 鸿蒙…...

Elasticsearch-脚本查询

脚本查询 概念 Scripting是Elasticsearch支持的一种专门用于复杂场景下支持自定义编程的强大的脚本功能&#xff0c;ES支持多种脚本语言&#xff0c;如painless&#xff0c;其语法类似于Java,也有注释、关键字、类型、变量、函数等&#xff0c;其就要相对于其他脚本高出几倍的性…...

【蓝桥杯——物联网设计与开发】拓展模块4 - 脉冲模块

目录 一、脉冲模块 &#xff08;1&#xff09;资源介绍 &#x1f505;原理图 &#x1f505;采集原理 &#xff08;2&#xff09;STM32CubeMX 软件配置 &#xff08;3&#xff09;代码编写 &#xff08;4&#xff09;实验现象 二、脉冲模块接口函数封装 三、踩坑日记 &a…...

devops和ICCID简介

Devops DevOps&#xff08;Development 和 Operations 的组合&#xff09;是一种软件开发和 IT 运维的哲学&#xff0c;旨在促进开发、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。它强调自动化流程&#xff0c;持续集成&#xff08;CI&#xf…...

uniapp使用live-pusher实现模拟人脸识别效果

需求&#xff1a; 1、前端实现模拟用户人脸识别&#xff0c;识别成功后抓取视频流或认证的一张静态图给服务端。 2、服务端调用第三方活体认证接口&#xff0c;验证前端传递的人脸是否存在&#xff0c;把认证结果反馈给前端。 3、前端根据服务端返回的状态&#xff0c;显示在…...

OSI 网络 7 层模型

问: 请你介绍一下OSI七层网络模型物理层解决什么问题?功能原理问题 数据链路层解决什么问题功能原理 网络层解决的问题功能原理 传输层解决什么问题功能原理会话层解决什么问题功能原理: 表示层解决什么问题 应用层解决什么问题如何展示? 问: 请你介绍一下OSI七层网络模型 物…...

RK356x bsp 7 - PCF8563 RTC调试记录

文章目录 1、环境介绍2、目标3、PCF85634、dts配置5、内核配置6、测试验证 1、环境介绍 硬件&#xff1a;飞凌ok3568-c开发板 软件&#xff1a;原厂rk356x sdk 2、目标 开发板断电后仍正常计时。 3、PCF8563 PCF8563 是由 NXP Semiconductors 公司生产的低功耗 CMOS 实时…...

Vue.js组件开发-如何实现vueFLow流程

在Vue.js组件中实现vueFlow流程实例 确保已经安装了vueFlow库。如果还没有安装&#xff0c;可以使用npm或yarn进行安装&#xff1a; npm install braks/vue-flow # 或者 yarn add braks/vue-flow步骤&#xff1a; ‌引入vueFlow组件‌&#xff1a; 在Vue组件文件中&#xff…...

upload-labs关卡记录15

图片马&#xff0c;这里就可以看到任务和注意事项&#xff1a; 使用一个正常图片&#xff0c;然后拼接一个一句话木马即可实现。这里就用命令窗口进行实现&#xff1a; copy 111.png/b shell.php/a shell.png 注意这里的命令窗口要在存在图片和一句话木马的目录下打开&#…...

面试题总结

一、mysql中的乐观锁、悲观锁、共享锁、排它锁、行锁、表锁 1、乐观锁 通过sql实现的&#xff0c;更新sql语句时加上where version #{version}乐观锁不是数据库自带的锁&#xff0c;需要我们自己去实现。乐观锁是指操作数据库时(更新操作)&#xff0c;想法很乐观&#xff0c;认…...

Linux | 零基础Ubuntu解压RaR等压缩包文件

目录 介绍 案例分析 安装工具 解压实践 介绍 RAR是一种专利文件格式&#xff0c;用于数据压缩与归档打包&#xff0c;开发者为尤金罗谢尔&#xff08;俄语&#xff1a;Евгений Лазаревич Рошал&#xff0c;拉丁转写&#xff1a;Yevgeny Lazarevich R…...