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

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

news 2026/1/2 8:01:05

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

文章目录

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

一、🍀前言

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

1.1 ☘️THREE.VRMLLoader wrl模型加载器

THREE.VRMLLoader用于加载和处理wrl格式3D模型文件的扩展。

wrl：
WRL是一种三维模型的格式，全称为Virtual Reality Modeling Language（虚拟现实建模语言）的标准格式，用于描述三维场景和物体。

特性：

  • WRL文件是一种细分的表面网格，这意味着它可以通过描述物体表面的细节来创建高度逼真的三维模型‌。
  • 大型三维软件通常都支持WRL格式，这使得它在三维建模领域具有广泛的兼容性‌

编辑与查看：

  • 可以使用VrmlPad等编辑器来编辑WRL文件‌3。
  • Solidworks等大型三维设计软件也可以打开和编辑WRL文件，但需要注意的是，在Solidworks中打开WRL文件后，可能不会以3D形式直接显示模型‌。
  • KiCad的自带3D查看器也支持WRL格式，用于在电子设计领域中的三维查看‌

应用场景‌：
除了在虚拟现实和渲染图中广泛应用外，WRL格式还可以用于三维建模、地形生成（如通过3Dmax导入WRL生成地形）‌等领域.

二、🍀导入wrl格式的模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、创建三个THREE.DirectionalLight平行光源dir1、dir2、dir3，设置平行光源的位置，scene中添加dir1、dir2、dir3。创建THREE.SpotLight聚光灯光源spotLight，设置spotLight的位置信息，场景scene中添加spotLight。
  • 5、加载几何模型：创建THREE.VRMLLoader加载器loader，loader调用load方法加载‘tree.wrl’模型。在load回调函数中，回调函数获取网格对象model，设置model的范围大小，场景scene中添加model。具体代码参考代码样例。
  • 6、加入THREE.OrbitControls鼠标交互控件，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html><html><head><title>导入wrl格式的模型</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/VRMLLoader.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><script type="text/javascript" src="../libs/OrbitControls.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<div id="WebGL-output">
</div><!-- Js代码 -->
<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 = 30;camera.position.y = 30;camera.position.z = 30;camera.lookAt(new THREE.Vector3(0, 0, 0));var orbit = new THREE.OrbitControls(camera);var dir1 = new THREE.DirectionalLight(0.4);dir1.position.set(-30, 30, -30);scene.add(dir1);var dir2 = new THREE.DirectionalLight(0.4);dir2.position.set(-30, 30, 30);scene.add(dir2);var dir3 = new THREE.DirectionalLight(0.4);dir3.position.set(30, 30, -30);scene.add(dir3);// 添加聚光灯光源，设置光源位置var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(30, 30, 30);scene.add(spotLight);// 渲染器绑定页面元素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.VRMLLoader();var group = new THREE.Object3D();loader.load("../assets/models/vrml/tree.wrl", function (model) {model.traverse(function (child) {if (child instanceof THREE.Mesh) {console.log(child.geometry);}});model.scale.set(10, 10, 10);scene.add(model);});render();function render() {stats.update();orbit.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，导入wrl格式的模型

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

编程日记 2025/1/9 12:59:43

使用GitLab+Jenkins搭建CICD执行环境

使用GitLabJenkins搭建CI\CD执行环境 前言什么是DevOps&#xff1f;什么是CI/CD&#xff1f;使用GitLabJenkins搭建CI\CD执行环境GitLab安装1. 安装和配置所需的依赖2. 下载并安装极狐GitLab3. 登录极狐GitLab 实例4.常用gitlab指令5.修改密码 Jenkins安装1.Jenkins 的主要特点…...

编程日记 2025/1/9 12:58:42

使用vue-pdf预览pdf和解决pdf电子签章显示问题

使用vue-pdf预览pdf和解决pdf电子签章显示问题 第一步&#xff1a;npm install vue-pdf 第二步页面使用vue-pdf <template><div class"pdf1"><Pdf v-for"i in numPages" :key"i" :src"src" :page"i" />…...

编程日记 2025/1/9 12:54:35

【Rust自学】11.3. 自定义错误信息

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.3.1. 添加错误信息 在 11.2. 断言(Assert) 中我们学习了assert!、assert_eq!和assert_ne!这三个宏&#xff0c;而这篇文章讲的就是它…...

编程日记 2025/1/9 12:52:32

05、Docker学习，常用安装：Mysql、Redis、Nginx、Nacos

Docker学习&#xff0c;常用安装&#xff1a;Mysql、Redis、Nginx、Nacos 一、Docker安装Mysql 1、docker search mysql ##查找mysql版本都有哪些 2、docker pull mysql:5.6 ##下载5.6版本的mysql镜像 3、docker run -p 13306:3306 --name mysql ##运行…...

编程日记 2025/1/9 12:48:28

RabbitMQ高级篇之MQ可靠性 数据持久化

文章目录 消息丢失的原因分析内存存储的缺陷如何确保 RabbitMQ 的消息可靠性&#xff1f;数据持久化的三个方面持久化对性能的影响持久化实验验证性能对比Spring AMQP 默认持久化总结 消息丢失的原因分析 RabbitMQ 默认使用内存存储消息&#xff0c;但这种方式带来了两个主要问…...

编程日记 2025/1/9 12:45:25

leetcode 2274. 不含特殊楼层的最大连续楼层数 中等

Alice 管理着一家公司&#xff0c;并租用大楼的部分楼层作为办公空间。Alice 决定将一些楼层作为 特殊楼层 &#xff0c;仅用于放松。 给你两个整数 bottom 和 top &#xff0c;表示 Alice 租用了从 bottom 到 top&#xff08;含 bottom 和 top 在内&#xff09;的所有楼层。另…...

编程日记 2025/1/9 12:42:20

Tauri教程-基础篇-第二节 Tauri的核心概念上篇

“如果结果不如你所愿&#xff0c;就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持&#xff0c;而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 Tauri 技术教程 * 第四章 Tauri的基础教程 第二节…...

编程日记 2025/1/9 12:40:17

大风车excel：怎么把题库导入excel？题库导入excel

高效管理试题库&#xff1a;如何批量导入试题到 Excel&#xff1f; 在教育培训、学校管理以及在线学习平台中&#xff0c;试题库的管理是核心工作之一。如何快速、准确地将试题导入到 Excel 表格中&#xff0c;成为许多教育工作者和开发者的迫切需求。本文将围绕“题库导入 Ex…...

编程日记 2025/1/9 12:28:05

Java 兼容读取WPS和Office图片，结合EasyExcel读取单元格信息

在Java开发中&#xff0c;处理Excel文件中的图片&#xff08;包括浮动图片和嵌入图片&#xff09;是一个常见的需求。本文将介绍如何使用EasyExcel和Apache POI库来读取Excel文件中的图片&#xff0c;并将其与数据进行关联。 1. 引言 在许多应用场景中&#xff0c;Excel文件不…...

编程日记 2025/1/9 12:26:02

电脑硬盘系统迁移及问题处理

一、系统迁移准备 1、确认你的电脑主板是否支持安装两块硬盘，如电脑主板有多个M2硬盘接口，我们将新硬盘安装到主板上，原来的老硬盘安装在第二个接口上，主板只有一个M2接口的话可以使用移动硬盘盒。 2、新硬盘安装好后，我们进入原来的系统，在 此电脑–右键–管理–磁盘管…...

编程日记 2025/1/9 12:24:00

网关 + Nacos配置管理

网关 网关&#xff1a;就是网络的关口&#xff0c;负责请求的路由、转发、身份校验。 网关路由 新建网关模块gateway引入相关依赖 <!--网关--> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter…...

编程日记 2025/1/9 12:21:59

《Spring Framework实战》6：核心技术 4.1.IoC 容器

欢迎观看《Spring Framework实战》视频教程 本章介绍 Spring 的控制反转 &#xff08;IoC&#xff09; 容器。 本部分摘要 Spring IoC 容器和 Bean 简介 容器概述 Bean 概述 依赖 Bean 作用域 自定义 Bean 的性质 Bean 定义继承 容器扩展点 基于注解的容器配置 Clas…...

编程日记 2025/1/9 12:20:57

ModuleNotFoundError: No module named ‘audioop‘

问题 ModuleNotFoundError: No module named pyaudioop ModuleNotFoundError: No module named audioop解决方案 安装库 pip3 install audioop-lts...

编程日记 2025/1/9 12:19:56

STM32-笔记38-I2C-oled实验

一、什么是I2C&#xff1f; I2C总线&#xff0c;全称Inter-Integrated Circuit&#xff08;互连集成电路&#xff09;&#xff0c;是一种由Philips&#xff08;现NXP半导体&#xff09;公司在1980年代初开发的同步 串行 半双工通信总线。 二、有了串口通信为什么要使用I2C&…...

编程日记 2025/1/9 12:18:53

人大金仓实现主键自增.

使用数据库中自带的参数类型 serial 类型(相当于创建一个INT列), 或者bigserial(相当于创建一个BIGINT列. 示例sql: CREATE TABLE ord(id SERIAL,ord_no INT NOT NULL,ord_name VARCHAR(32),CONSTRAINT "ord_PKEY" PRIMARY KEY ("id"));插入时指定自增值…...

编程日记 2025/1/9 12:16:50

h264之多视点mvc编码及解码过程(JMVC平台举例）

h264标准参考平台JMVC是针对MVC标准的&#xff0c;JMVC支持多视点编码、合流、多视点解码操作。可以利用JMVC生成h264 mvc码流和解码。 JMVC的下载地址是&#xff1a;jvet / JMVC GitLabH.264/AVC multi-view coding (MVC) extension JMVC reference softwarehttps://vcgit.hh…...

编程日记 2025/1/9 12:13:47

小程序学习08—— 系统参数获取和navBar组件样式动态设置

一 系统信息的概念 uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。 success 返回参数说明&#xff1a; 参数分类说明statusBarHeight手机状态栏的高度system操作系统名称及版本。。。 二 自定义navbar 2.1 获取系统参数 代码展示…...

编程日记 2025/1/9 12:12:45

数据库环境安装（day1）

网址&#xff1a;MySQL 下载&#xff08;环境准备&#xff09;&#xff1a; &#xff08;2-5点击此处&#xff0c;然后选择合适的版本&#xff09; 1.linux在线YUM仓库 下载/安装: wget https://repo.mysql.com//mysql84-community-release-el9-1.noarch.rpm rpm -i https://r…...

编程日记 2025/1/9 12:11:43

网络安全-web渗透环境搭建-BWAPP（基础篇）

01--所需系统环境&#xff1a; 虚拟主机系统部署&#xff08;vmware&#xff0c;虚拟主机创建、虚拟主机网络配置&#xff08;桥接&#xff0c;便于网络中多个主机都能访问虚拟主机&#xff09;、虚拟软件功能&#xff0c;快照、克隆、镜像文件加载&#xff0c;ova文件制作&am…...

编程日记 2025/1/9 12:09:40

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/1/1 15:23:21

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/12/27 15:22:46

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

编程新知 2025/10/8 8:04:56

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2025/12/30 17:11:08

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤：1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现：客户端实现：4. Axi…...

编程新知 2025/10/29 4:33:36

简约商务通用宣传年终总结12套PPT模版分享

IOS风格企业宣传PPT模版&#xff0c;年终工作总结PPT模版&#xff0c;简约精致扁平化商务通用动画PPT模版&#xff0c;素雅商务PPT模版 简约商务通用宣传年终总结12套PPT模版分享:商务通用年终总结类PPT模版https://pan.quark.cn/s/ece1e252d7df...

编程新知 2025/12/27 2:09:45

【threejs】每天一个小案例讲解：创建基本的3D场景

代码仓 GitHub - TiffanyHoo/three_practices: Learning three.js together! 可自行clone&#xff0c;无需安装依赖&#xff0c;直接liver-server运行/直接打开chapter01中的html文件 运行效果图 知识要点 核心三要素 场景&#xff08;Scene&#xff09; 使用 THREE.Scene(…...

编程新知 2025/12/28 11:07:38