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

学习threejs，使用JSON格式保存和加载模型

news 文章来源：https://blog.csdn.net/qq_28419035/article/details/143588097 2025/5/25 3:56:43

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE toJSON()方法
  • 二、🍀使用JSON格式保存和加载模型
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

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

1.1 ☘️THREE toJSON()方法

通过调用Three.js各个对象的.toJSON()方法可以保存这些对象为json格式，比如你通过Threejs开发一个三维模型编辑系统，想保存Threejs中创建的立方体、球体、obj、glb等三维模型的顶点、材质等数据，就可以通过.toJSON()方法实现。

二、🍀使用JSON格式保存和加载模型

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，定义相机方向lookAt。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，scene场景加入THREE.AxesHelper坐标辅助工具。
  • 6、加入gui控制，定义重绘方法redraw、模型保存方法save、模型加载方法load，实现细节具体看代码样例。加入controls，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn40(使用JSON格式保存和加载模型)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()">
</body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setClearColor(new THREE.Color(0x000000))renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var scenevar initScene = () => {scene = new THREE.Scene()}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(-25, 40, 50)camera.lookAt(new THREE.Vector3(-25, 0, 0))}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x404040))light = new THREE.DirectionalLight(0xffffff)light.position.set(1, 1, 1)scene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)}var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controls, knot, loadedMeshvar initGui = () => {//声明一个保存需求修改的相关数据的对象controls = {"radius": 13,"tube": 1.7,"radialSegments": 156,"tubularSegments": 12,"p": 3,"q": 4,"heightScale": 3.5,"rotate": false,redraw: function () {// 删除掉原有的模型if (knot) scene.remove(knot)// 创建一个环形结构///<param name ="radius" type="float">环形结半径</param>///<param name ="tube" type="float">环形结弯管半径</param>///<param name ="radialSegments" type="int">环形结圆周上细分线段数</param>///<param name ="tubularSegments" type="int">环形结弯管圆周上的细分线段数</param>///<param name ="p" type="float">p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数,P决定垂直方向的参数.</param>///<param name ="q" type="float">p\Q:对knot(节)状方式有效,控制曲线路径缠绕的圈数,Q决定水平方向的参数.</param>///<param name ="heightScale" type="float">环形结高方向上的缩放.默认值是1</param>var geom = new THREE.TorusKnotGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), Math.round(controls.p), Math.round(controls.q), controls.heightScale)//判断绘制的模型knot = createMesh(geom)// 将新创建的模型添加进去scene.add(knot)},save: function () {console.log(knot)var result = knot.toJSON()localStorage.setItem("json", JSON.stringify(result))},load: function () {scene.remove(loadedMesh)var json = localStorage.getItem("json")if (json) {var loadedGeometry = JSON.parse(json)var loader = new THREE.ObjectLoader()loadedMesh = loader.parse(loadedGeometry)loadedMesh.position.x -= 50scene.add(loadedMesh)console.log(loadedMesh)}}};var gui = new dat.GUI()//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）gui.add(controls, 'size', 0, 10).onChange(controls.redraw);var loadFolder = gui.addFolder("保存/加载")loadFolder.add(controls, "save")loadFolder.add(controls, "load")var meshFolder = gui.addFolder("模型相关");meshFolder.add(controls, 'radius', 0, 40).onChange(controls.redraw)meshFolder.add(controls, 'tube', 0, 40).onChange(controls.redraw)meshFolder.add(controls, 'radialSegments', 0, 400).step(1).onChange(controls.redraw)meshFolder.add(controls, 'tubularSegments', 1, 20).step(1).onChange(controls.redraw)meshFolder.add(controls, 'p', 1, 10).step(1).onChange(controls.redraw)meshFolder.add(controls, 'q', 1, 15).step(1).onChange(controls.redraw)meshFolder.add(controls, 'heightScale', 0, 5).onChange(controls.redraw)meshFolder.add(controls, 'rotate')controls.redraw()}var step = 0var render = () => {if (controls.rotate) {knot.rotation.y = step += 0.01}renderer.render(scene, camera)}var generateSprite = () => {var canvas = document.createElement('canvas')canvas.width = 16canvas.height = 16var context = canvas.getContext('2d')var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2)gradient.addColorStop(0, 'rgba(255,255,255,1)')gradient.addColorStop(0.2, 'rgba(0,255,255,1)')gradient.addColorStop(0.4, 'rgba(0,0,64,1)')gradient.addColorStop(1, 'rgba(0,0,0,1)')context.fillStyle = gradientcontext.fillRect(0, 0, canvas.width, canvas.height)var texture = new THREE.Texture(canvas)texture.needsUpdate = truereturn texture}var createPointCloud = () => {var material = new THREE.PointCloudMaterial({color: 0xffffff,size: 3,transparent: true,blending: THREE.AdditiveBlending,map: generateSprite(),depthTest: false})var cloud = new THREE.Points(geom, material)cloud.sortParticles = truereturn cloud}var createMesh = (geom) => {// 创建两面都显示的纹理var meshMaterial = new THREE.MeshNormalMaterial({wireframe: true})meshMaterial.side = THREE.DoubleSide// 生成模型var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial])return mesh}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initModel()initGui()initStats()animate()window.onresize = onWindowResize}
</script>
</html>

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

相关文章：

学习threejs，使用JSON格式保存和加载模型

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

编程日记 2024/11/14 0:46:25

中国首部《能源法》正式问世，它的亮点有哪些呢？

2024年11月8日&#xff0c;《中华人民共和国能源法》经十四届全国人大常委会第十二次会议审议通过&#xff0c;正式出台&#xff0c;将于明年1月1日起施行。 中国首部《能源法》正式问世&#xff0c;它的亮点有哪些呢&#xff1f; 一、填补立法空白&#xff0c;完善能源法律体…...

编程日记 2024/11/14 0:44:22

【外包】软件行业的原始形态，项目外包与独立开发者

【外包】互联网软件行业的原始形态&#xff0c;项目外包与独立开发者 本科期间写的一些东西&#xff0c;最近整理东西看到了&#xff0c;大致整理一下放出来&#xff0c;部分内容来自其他文章&#xff0c;均已引用。 文章目录 1、互联网软件行业的原始形态2、项目订单&#xff…...

编程日记 2024/11/14 0:41:17

工程数学线性代数（同济第七版）附册课后习题答案PDF

《线性代数附册 学习辅导与习题全解》是与同济大学数学科学学院编《工程数学 线性代数》第七版教材配套的教学辅导书&#xff0c;由同济大学作者团队根据教材内容和要求编写而成。本书在《工程数学 线性代数》第六版附册&#xff08;即辅导书&#xff09;的基础上修改而成。全书…...

编程日记 2024/11/14 0:40:15

【Ubuntu24.04】部署服务（基础）

目录 0 背景1 设置静态IP2 连接服务器3 部署服务3.1 安装JDK3.2 下载并安装MySQL8.43.2.1 从官网下载 APT Repository 配置文件3.2.2 安装 MySQL8.43.2.3 配置远程连接 3.3 下载并配置Redis3.4 上传jar包并部署应用3.5 开放端口 4 总结 0 背景 在成功安装了Ubuntu24.04操作系统…...

编程日记 2024/11/14 0:39:08

Linux符号使用记录

~ 账户 home 目录&#xff0c;如果是 root 账户就是 /root . 当前目录 .. 上层目录 | 管道符 & 后台工作&#xff0c;放在完整指令列的最后端&#xff0c;表示将该指令列放入后台中工作。 > 输出重定向&#xff0c;重新…...

编程日记 2024/11/14 0:38:05

初阶C++之C++入门基础

大家好&#xff01;欢迎来到C篇学习&#xff0c;这篇文章的内容不会很难&#xff0c;为c的引入&#xff0c;c的重点内容将在第二篇的文章中讲解&#xff0c;届时难度会陡然上升&#xff0c;请做好准备&#xff01; 我们先看网络上的一个梗&#xff1a;21天内⾃学精通C 好了&am…...

编程日记 2024/11/14 0:37:04

ODOO学习笔记（7）：模块化架构（按需安装）

一、Odoo模块化架构概述 Odoo是一个功能强大的企业资源规划&#xff08;ERP&#xff09;系统&#xff0c;其模块化架构是它的核心优势之一。这种架构允许系统通过添加、移除或修改不同的模块来灵活地适应企业的各种业务需求。 核心模块与自定义模块&#xff1a; Odoo本身带有一…...

编程日记 2024/11/14 0:35:02

Java的dto,和多表的调用

1理论 需求是新增菜品eg&#xff1a;菜名:豆腐脑&#xff1b;口味&#xff1a;甜口&#xff0c;咸口&#xff0c; 菜单表&#xff1a;dish&#xff1b;口味表dish_flavor&#xff1b; 1dto:数据传输对象 新建一个dishDto对象有两个表里的属性 2用到两个表&#xff0c;dish,d…...

编程日记 2024/11/14 0:34:01

时序数据库TimescaleDB安装部署以及常见使用

文章目录 一、时序数据库二、TimescaleDB部署1、repository yum仓库配置2、yum在线安装3、插件配置4、TimescaleDB使用登录pg创建插件使用超表 一、时序数据库 什么是时序数据库&#xff1f;顾名思义&#xff0c;用于处理按照时间变化顺序的数据的数据库即为时序数据库&#x…...

编程日记 2024/11/14 0:33:00

MG算法（英文版）题解

翻译&#xff1a; 考虑一个加法流&#xff0c;其中一个特定项目出现 n^(1/2) 次&#xff0c;并且有 n - n^(1/2) - 1 个其他不同的项目&#xff0c;每个项目出现一次。在应用 Misra-Gries&#xff08;MG&#xff09;算法时&#xff0c;应该选择哪个 ε&#xff08;epsilon&…...

编程日记 2024/11/14 0:29:57

2-UML概念模型测试

1. (单选题, 1.0 分) UML中的关系不包括&#xff08;&#xff09;。 A. 抽象B. 实现C. 依赖D. 关联 我的答案:A正确答案: A 知识点&#xff1a; UML的构成 1.0分 2. (单选题, 1.0 分) 下列事物不属于UML结构事物的是&#xff08;&#xff09;。 A. 组件B. 类C. 节点D. 状…...

编程日记 2024/11/14 0:26:54

人工智能（AI）对于电商行业的变革和意义

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/402a907e12694df5a34f8f266385f3d2.png#pic_center> &#x1f393;作者简介&#xff1a;全栈领域优质创作者 &#x1f310;个人主页&#xff1a;百锦再新空间代码工作室 &#x1f4de;工作室&#xff1a;新空间代…...

编程日记 2024/11/14 0:24:52

智能病历xml提取

select * from (SELECT m.病人Id, m.主页Id, x.title, x.content.getclobval() 参考, x.content content --EXTRACTVALUE(x.Content, //zlxml//document//subdoc[antetypeid"3C38A8DAB01C473A9074A8EDD0B8553"]//utext) 主治医师, --EXTRACTVALUE(x.…...

编程日记 2024/11/14 0:22:50

RK3568平台开发系列讲解（GPIO篇）GPIO的sysfs调试手段

🚀返回专栏总目录 文章目录 一、内核配置二、GPIO sysfs节点介绍三、命令行控制GPIO3.1、sd导出GPIO3.2、设置GPIO方向3.3、GPIO输入电平读取3.4、GPIO输出电平设置四、Linux 应用控制GPIO4.1、控制输出4.2、输入检测4.3、使用 GPIO 中断沉淀、分享、成长，让自己和他人都能有…...

编程日记 2024/11/14 0:20:49

使用 Web Search 插件扩展 GitHub Copilot 问答

GitHub Copilot 是一个由 GitHub 和 OpenAI 合作开发的人工智能代码提示工具。它可以根据上下文提示代码&#xff0c;还可以回答各种技术相关的问题。但是 Copilot 本身不能回答非技术类型的问题。为了扩展 Copilot 的功能&#xff0c;微软发布了一个名为 Web Search 的插件&am…...

编程日记 2024/11/14 0:18:47

workerman的安装与使用

webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构&#xff0c;提供超高性能可扩展的HTTP服务。你可以用webman开发网站&#xff0c;也可以开发HTTP接口或者微服务。 除此之外&#xff0c;webman还支持自定义进程&#xff0c;可以做worker…...

编程日记 2024/11/14 0:15:43

QtQuick.Controls 控件介绍（都有哪些type）

这里写目录标题 主要控件 官方示例1. quickcontrols示例示例1 控制controlsSliders滑块bottom与tab 示例2 系统对话框 systemdialogs示例3 仪表盘示例4 uiforms 表格-客户通讯录 2. quickcontrols2示例1 gallery 展示2 flat Style 扁平化 帮助文档 主要控件 Button&#xff1a…...

编程日记 2024/11/14 0:13:41

Unity导出APK加速与导出失败总结（不定时更新）

APK导出加速 1、修改配置文件&#xff1a; 需要修改的文件位置&#xff1a;编辑器安装路径/Editor/Data/PlaybackEngines/AndroidPlayer/Tools/GradleTemplates 1.1 settingsTemplate.gradle文件修改 直接附上最终效果&#xff1a; pluginManagement {repositories {**ART…...

编程日记 2024/11/14 0:12:40

域名绑定服务器小白教程

域名绑定与 Docker 容器部署指南 1. 获取云服务器公网 IP 登录云服务提供商控制台记录服务器公网 IP&#xff08;例&#xff1a;123.456.78.90&#xff09; 2. 配置域名 DNS 解析 登录域名注册商控制台添加 A 记录&#xff1a; 主机记录&#xff1a;类型&#xff1a;A值&am…...

编程日记 2024/11/14 0:11:38

用 Collections.synchronizedSet 创建线程安全的 HashSet

在 Java 中&#xff0c;HashSet 本身并不是线程安全的。如果在多线程环境下使用 HashSet&#xff0c;你需要采取额外的同步措施来保证线程安全。Collections 工具类提供了一种简便的方法来创建线程安全的集合——synchronizedSet 方法。这种方法通过在所有公共方法上添加同步块…...

编程日记 2024/11/14 0:10:37

【深度学习】模型参数冻结：原理、应用与实践

在深度学习领域&#xff0c;模型参数冻结是一种重要的技术手段&#xff0c;它在模型训练和优化过程中有着广泛的应用。本文将详细介绍模型参数冻结的相关概念、应用场景、在代码中的实现方式以及一些实际的案例分析。 一、模型参数冻结的概念 在深度学习模型的训练过程中&…...

编程日记 2024/11/14 0:09:36

数字后端教程之Innovus report_property和get_property使用方法及应用案例

数字IC后端实现Innovus中使用report_property可以报告出各种各样object的属性&#xff0c;主要有cell&#xff0c;net&#xff0c;PG Net&#xff0c;Pin&#xff0c;时钟clock&#xff0c;时序库lib属性&#xff0c;Design属性&#xff0c;timing path&#xff0c;timin arc等…...

编程日记 2024/11/14 0:07:35

JS中console对象内部提供调试方法

console.log() console.log() 是最常用的输出方法&#xff0c;用于将信息输出到浏览器控制台&#xff0c;通常用于普通的调试信息。 用途: 打印普通的消息、变量、对象等。 let user { name: "Alice", age: 25 }; console.log(user); // 输出对象 console.log(&…...

编程日记 2024/11/14 0:06:34

python设计模式

一、单例模式 学习目标&#xff1a;掌握单例模式的作用和写法 可以明显的看出他两是独立的对象&#xff0c;而且是两个完全不同的id 当我们希望是s1和s2是同一个对象&#xff0c;这就是我们所说的单例模式。 最后获得的都是同一个对象&#xff0c;这样就可以避免去重复的创建…...

编程日记 2024/11/14 0:04:32

机器学习 笔记

特征值提取 字典 from sklearn.extaction import DictVectorizer mDictVectorizer(sparseFalse)#sparse是否转换成三元组形式 data[], #传入字典数据 data1model.fit_transform(data) #使用API 英文特征值提取 from sklearn.feature_extraction.text import CountVe…...

编程日记 2024/11/14 0:02:29

江协科技之STM32驱动1.3寸/0.96寸/0.91寸OLED显示屏介绍

目录 编码介绍 ASCII码 汉字编码 取模软件 江协科技OLED库适用器件 SSD1306简介 模块引脚更改 0.91寸OLED适配 模块驱动必备知识 驱动代码 OLED_Font.h OLED.h OLED.c 编码介绍 ASCII码 ASCII码是一套数字到字符的映射标准&#xff0c;它规定了用什么数字表示…...

编程日记 2024/11/14 0:00:28

Spring Security 认证流程，长话简说

一、代码先行 1、设计模式 SpringSecurity 采用的是 责任链 的设计模式&#xff0c;是一堆过滤器链的组合&#xff0c;它有一条很长的过滤器链。 不过我们不需要去仔细了解每一个过滤器的含义和用法,只需要搞定以下几个问题即可&#xff1a;怎么登录、怎么校验账户、认证失败…...

编程日记 2024/11/13 23:58:26

74HC245

74HC245&#xff1a;典型的CMOS型缓冲门电路 在这里用于增加电压...

编程日记 2024/11/13 23:57:25

Java的static关键字和静态代码块

一、当static关键字用来修饰属性时&#xff0c;所修饰的属性就是类属性&#xff0c;而不是对象属性&#xff0c;所以可以做到全类共享。 不能用对象名去调用&#xff0c;只能用类名调用。 二、静态方法只能调用同为静态的方法和属性&#xff0c;非静态方法什么都可以调用。 三…...

编程日记 2024/11/13 23:56:24