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

学习threejs，导入VTK格式的模型

news 2026/4/18 2:10:18

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

文章目录

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

一、🍀前言

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

1.1 ☘️THREE.VTKLoader VTK模型加载器

THREE.VTKLoader用于加载和处理VTK格式3D模型文件的扩展。
VTK三维文件：
VTK是一种便捷、开源、多平台的三维可视化文件格式。它是由Kitware公司创建的,可以用于用于处理三维图像数据。Vtk模型是一种以文本方式表示的3D模型文件，其能够表示点面信息，而且能够以人类易读易懂的方式以文本的形式存储下来。

二、🍀导入VTK格式的模型

1. ☘️实现思路

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

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head><title>导入VTK格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/VTKLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */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">// 初始化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);// html添加渲染器document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {};var group;var gui = new dat.GUI();var loader = new THREE.VTKLoader();var group = new THREE.Object3D();loader.load("../assets/models/moai_fixed.vtk", function (geometry) {var mat = new THREE.MeshLambertMaterial({color: 0xaaffaa});group = new THREE.Mesh(geometry, mat);group.scale.set(9, 9, 9);scene.add(group);});render();function render() {stats.update();if (group) {group.rotation.y += 0.006;}requestAnimationFrame(render);webGLRenderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); stats.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，导入VTK格式的模型

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

编程日记 2025/1/6 21:07:42

大麦抢票科技狠活

仅供学习参考&#xff0c;切勿再令您所爱的人耗费高昂的价格去购置黄牛票 ⚠️核心内容参考: 据悉&#xff0c;于购票环节&#xff0c;大麦凭借恶意流量清洗技术&#xff0c;于网络层实时甄别并阻拦凭借自动化手段发起下单请求的流量&#xff0c;强化对刷票脚本、刷票软件以及…...

编程日记 2025/1/6 21:03:36

PostgreSQL 表达式

PostgreSQL中的表达式是一种强大的工具&#xff0c;用于在数据库查询中处理和计算数据。它们由一个或多个值、运算符和PostgreSQL函数组合而成&#xff0c;类似于公式&#xff0c;并用于求值【1†source】。 在PostgreSQL中&#xff0c;表达式可以分为不同类型&#xff0c;如布…...

编程日记 2025/1/6 21:01:34

WPF区域导航+导航参数使用+路由守卫+导航日志

背景&#xff1a;使用ContentControl控件实现区域导航是有Mvvm框架的WPF都能使用的&#xff0c;不限于Prism 主要是将ContenControl控件的Content内容在ViewModel中切换成不同的用户控件 下面是MainViewModel&#xff1a; private object body;public object Body {get { retu…...

编程日记 2025/1/6 20:59:30

Springboot启动报错：Failed to start bean ‘documentationPluginsBootstrapper‘

在使用SpringBoot2.7时&#xff0c;由于与Swagger2的版本不兼容引发的ApplicationContextException&#xff0c;解决方法是在application.yml中配置spring.mvc.pathmatch.matching-strategy:ant_path_matcher。 org.springframework.context.ApplicationContextException: Fai…...

编程日记 2025/1/6 20:53:25

qt-C++笔记之动画框架(Qt Animation Framework)入门

qt-C笔记之动画框架(Qt Animation Framework)入门 code review! 在 Linux 平台上&#xff0c;使用 C 和 Qt 框架实现动画是一个非常好的选择。Qt 提供了强大的动画框架&#xff08;Qt Animation Framework&#xff09;&#xff0c;使得动画的实现变得简单高效。下面将介绍 Qt …...

编程日记 2025/1/6 20:51:22

C++26 函数契约(Contract)概览

文章目录 1. 什么是契约编程?契约编程的三大核心: 2. C26 契约编程的语法语法示例 3. 契约检查模式3.1. default 模式3.2. audit 模式3.3. axiom 模式检查模式的设置 4. 契约编程与传统 assert 的区别示例对比 5. 契约编程的应用场景6. 注意事项7. 示例: 带契约的矩形面积计算…...

编程日记 2025/1/6 20:49:21

Flink CDC 自定义函数处理 SQLServer XML类型数据 映射 doris json字段方案

Flink CDC 自定义函数处理 SQLServer XML类型数据方案 1. 背景 因业务使用SQLServer数据库&#xff0c;CDC同步到doris 数仓。对于SQLServer xml类型&#xff0c;doris没有相应的字段对应&#xff0c; 可以使用json来存储xml数据。需要进行一步转换。从 flink 自定义函数入手…...

编程日记 2025/1/6 20:46:18

F.interpolate函数

F.interpolate 是 PyTorch 中用于对张量&#xff08;通常是图像数据&#xff09;进行插值操作的函数&#xff0c;常用于调整张量的大小&#xff0c;例如改变图像的分辨率。它支持多种插值方法&#xff0c;包括最近邻插值、双线性插值和三次插值等。 语法 torch.nn.functional…...

编程日记 2025/1/6 20:45:17

华为交换机---自动备份配置到指定ftp/sftp服务器

华为交换机—自动备份配置到指定ftp服务器 需求 交换机配置修改后及时备份相关配置，每次配置变化后需要在1分钟后自动进行保存，并且将配置上传至FTP服务器；每隔30分钟，交换机自动把配置上传到FTP服务器。 1、定时保存新配置的时间间隔为*分钟（1天=1440），默认为30分钟（…...

编程日记 2025/1/6 20:44:16

nginx学习之路-nginx配置https服务器

文章目录 1. 生成证书2. 配置证书1. 拷贝证书文件2. 修改conf/nginx.conf文件内容 3. 查看效果1. 重载配置2. 访问 1. 生成证书 在linux系统下执行&#xff0c;使用openssl命令。&#xff08;windows环境也可以使用cmder&#xff09; # 1. 生成私钥 server2025.key(无密码保护…...

编程日记 2025/1/6 20:41:12

UCAS 24秋网络认证技术 CH10 SSL 复习

TLS字段、参数含义要了解每个消息是什么意思 基本方式只验证服务端&#xff0c;服务端有证书&#xff0c;变形方式加上验证客户端TLS1.3区别 协商过程 背景 Record层使用的各种加密算法参数&#xff0c;均由Handshake协议协商获得。 具体过程 随机数交换 Client/Server相互…...

编程日记 2025/1/6 20:39:01

【linux内核分析-存储】EXT4源码分析之“文件删除”原理【七万字超长合并版】（源码+关键细节分析）

EXT4源码分析之“文件删除”原理【七万字超长合并版】&#xff08;源码关键细节分析&#xff09;&#xff0c;详细的跟踪了ext4文件删除的核心调用链&#xff0c;分析关键函数的细节&#xff0c;解答了开篇中提出的三个核心疑问。 文章目录 提示前言全文重点索引1.源码解析1.1 …...

编程日记 2025/1/6 20:35:55

代码随想录 day62 第十一章 图论part11

第十一章&#xff1a;图论part11 Floyd 算法精讲 Floyd 算法代码很简单&#xff0c;但真正理解起原理 还是需要花点功夫&#xff0c;大家在看代码的时候&#xff0c;会发现 Floyd 的代码很简单&#xff0c;甚至看一眼就背下来了&#xff0c;但我为了讲清楚原理&#xff0c;本…...

编程日记 2025/1/6 20:33:53

springboot571基于协同过滤算法的私人诊所管理系统(论文+源码)_kaic

摘 要 随着时代的发展&#xff0c;人们的生活方式得到巨大的改变&#xff0c;从而慢慢地出现了大量私人诊所信息&#xff0c;私人诊所信息管理需要一个现代化的管理系统&#xff0c;进行私人诊所的管理。 私人诊所管理系统的开发就是为了解决私人诊所信息管理的问题&#xff0…...

编程日记 2025/1/6 20:32:52

Uniapp Android 本地离线打包（详细流程）

一、简介 App 离线 SDK 暂时不支持 Kotlin&#xff0c;未来不清楚。 uniapp 提供了 云打包 与 本地打包 两种方案&#xff0c;云打包 需要排队且还有次数限制&#xff0c;本地打包 则就没有这些限制&#xff0c;而且会 本地打包 对开发 原生插件 有很大的帮助。 细节&#x…...

编程日记 2025/1/6 20:31:51

vite+vue3动态引入资源文件（问题已解决但离了个大谱）

教程很详细&#xff0c;直接上代码 解决方法&#xff08;赶时间的小友理解下这函数就能解决问题了&#xff0c;就是处理了下路径&#xff0c;运气不好遇到问题再回来也不迟&#x1f923;&#x1f923;&#x1f923;&#xff09; const getSvgUrl (name) > {// name: svg_1…...

编程日记 2025/1/6 20:29:49

通过 4 种方式快速将音乐从 iPod 传输到 Android

概括 在 iPod 上听音乐很酷&#xff0c;但是当您拥有最新的 Android 手机时&#xff0c;也许您想在新手机上欣赏 iPod 音乐。那么&#xff0c;你的计划是什么&#xff1f;如何将音乐从 iPod 传输到 Android&#xff1f; 如果您担心这个问题&#xff0c;请看看下面的方法。他们…...

编程日记 2025/1/6 20:28:46

ArcGIS中怎么把数据提取到指定范围(裁剪、掩膜提取)

最近&#xff0c;经常能收到怎么把数据提取到指定范围、栅格数据怎么裁剪、矢量数据怎么裁剪、栅格数据怎么掩膜提取的咨询。 下面是我对这个问题的解决思路&#xff1a; 对于矢量数据&#xff1a; ①首先把数据加载进来 ②软件界面上面的工具栏找到→地理处理→裁剪&#x…...

编程日记 2025/1/6 20:24:42

【Vaadin flow 实战】第3讲-快速上手构建VaadinFlow+Springboot的全栈web项目

快速构建VaadinFlowSpringboot的全栈web项目 温馨提示&#xff0c;本文讲解比较精炼&#xff0c;主要以快速上手开发为主。 官方提供了与本文类似的教程讲解&#xff0c;地址https://vaadin.com/docs/latest/getting-started 1访问vaadin官方提供的start网站(类似于 spring i…...

编程日记 2025/1/6 20:21:38

【Android 进阶】深度解密 Kotlin 协程：从状态机到底层调度机制

一、 重新认识协程&#xff1a;它到底是什么&#xff1f;1. 概念定义协程&#xff08;Coroutines&#xff09; 并不是操作系统层面的概念&#xff0c;而是由编译器和运行时库在用户态实现的一套“轻量级线程”框架。对比进程、线程与协程&#xff1a;进程&#xff08;Process&a…...

编程新知 2026/4/18 1:33:28

Claude Opus 4.7 正式发布：Anthropic 在推理模型上的又一次突破

Anthropic CEO Dario Amodei 本周谈到 Project Glasswing&#xff0c;这是 Anthropic 联合 AWS、Apple、Google、Microsoft、NVIDIA 等公司发起的软件安全倡议。背景过去一周&#xff08;4.10-4.17&#xff09;&#xff0c;AI 编程领域迎来了一波密集更新。Anthropic 发布 Clau…...

编程新知 2026/4/18 0:48:12

避坑指南：osg与osgEarth版本搭配那些事儿，从编译失败到成功显示地球

三维地理可视化开发实战&#xff1a;OSG与osgEarth版本适配深度解析 引言&#xff1a;版本兼容性问题的普遍困境 在三维地理信息系统开发领域&#xff0c;OpenSceneGraph(OSG)和osgEarth的组合堪称黄金搭档&#xff0c;但许多开发者在环境搭建的第一步——编译环节就遭遇了滑铁…...

编程新知 2026/4/18 0:40:08

golang如何实现任务灰度发布执行_golang任务灰度发布执行实现要点

灰度任务执行与否的关键在于“谁来执行”而非“怎么执行”&#xff0c;需基于上下文中的灰度标识&#xff08;如zone、canary_tag&#xff09;配合动态规则匹配判断&#xff0c;规则应从配置中心读取、预编译缓存&#xff0c;并在任务函数内通过守卫逻辑拦截。灰度任务怎么判断…...

编程新知 2026/4/18 0:34:05

一站式IT运维管理平台：NeatLogic ITOM 15分钟快速上手终极指南

一站式IT运维管理平台&#xff1a;NeatLogic ITOM 15分钟快速上手终极指南 【免费下载链接】neatlogic-itom-all NeatLogic is a progressive ITOM platform offering ITOM solutions for users of various types and sizes. It includes features like ITSM, CMDB, continuous…...

编程新知 2026/4/17 23:34:11

Python脚本驱动：AutoCAD Plant 3D中槽式垂直三通参数化建模实战

1. 为什么需要参数化建模槽式垂直三通&#xff1f; 在管道工程设计领域&#xff0c;槽式垂直三通是最常见的管件之一。传统手动建模方式需要反复绘制草图、拉伸实体、布尔运算&#xff0c;一个简单的三通模型可能要花费设计师半小时。当遇到非标尺寸或批量修改时&#xff0c;这…...

编程新知 2026/4/17 23:06:23

告别pip依赖解析漫长等待：精准约束keras-preprocessing等包的版本兼容性

1. 为什么pip安装keras-preprocessing会卡住&#xff1f; 最近在配置TensorFlow开发环境时&#xff0c;很多朋友都遇到了一个让人抓狂的问题&#xff1a;当运行pip install tensorflow时&#xff0c;命令行突然卡在"INFO: pip is looking at multiple versions of keras-p…...

编程新知 2026/4/17 22:20:34

基于STM32与光敏传感器的智能窗帘Proteus仿真及Keil实现

1. 项目背景与核心功能 清晨阳光透过窗户照进房间时&#xff0c;你是否希望窗帘能自动打开&#xff1f;傍晚室内光线变暗时&#xff0c;是否期待窗帘能自行关闭&#xff1f;这个基于STM32与光敏传感器的智能窗帘系统&#xff0c;正是为解决这些日常需求而设计。我在实际测试中发…...

编程新知 2026/4/17 21:42:06

PLC西门子杯比赛：三部十层电梯博图v15.1程序设计与WinCC界面展示

PLC西门子杯比赛&#xff0c;三部十层电梯博图v15.1程序&#xff0c;带wincc画面。凌晨三点的实验室里&#xff0c;咖啡杯在工控机旁边堆成了防御工事。我盯着博图V15.1里那三台虚拟电梯的运行轨迹&#xff0c;突然发现它们像极了三个不愿加班的打工人——总想着偷懒却又要假装…...

编程新知 2026/4/17 21:23:41

儿童护眼大路灯哪个牌子好用？全网高赞的护眼大路灯十大品牌排行

护眼大路灯通过上下发光能够呈现出舒适且接近太阳光的光线&#xff0c;这样也伴随着护眼落地灯迅速得到众多人的认可火爆市场&#xff0c;护眼灯品牌越来越多&#xff0c;质量参差不齐&#xff0c;存在着一些可能会造成刺眼、眩光以及频闪的劣质护眼灯&#xff0c;所以我们不能…...

编程新知 2026/4/17 19:53:43