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

ThreeJs功能演示——几何体操作导入导出

news 2025/11/12 11:50:56

1、内部创建几何体导出编辑能力

1）支持内部创建的面、正方体、球体

内部创建物体时，如果是三维物体，要创建集合形状geometry，和对应的材质material。再一起创建一个三维物体。

	// 存储创建的几何体列表const geometries = [];createPlane()createCube()createSphere()addGUIForGeometry(geometries)// 几何体创建函数function createPlane() {const geometry = new THREE.PlaneGeometry(1,1);const material = new THREE.MeshBasicMaterial({color:0xffff00, side:THREE.DoubleSide})const plane = new THREE.Mesh(geometry, material)plane.name = "Plane";plane.position.set(-1, -1, -1)scene.add(plane)geometries.push(plane)return plane;}// 创建正方体function createCube() {const geometry = new THREE.BoxGeometry(1, 1, 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const cube = new THREE.Mesh( geometry, material );cube.name = 'Cube';scene.add( cube );geometries.push(cube);return cube;}// 创建球体function createSphere() {const geometry = new THREE.SphereGeometry( 1, 32, 32 );const material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );const sphere = new THREE.Mesh( geometry, material );sphere.name = 'Sphere';sphere.position.set(2,2,2)scene.add( sphere );geometries.push(sphere);return sphere;}

2）支持几何体的位置、角度、比例调整

通过GUI控制器调整创建物体的位置、角度、放大比例信息。

	// GUI控制器function addGUIForGeometry(geometryArr) {const gui = new GUI();gui.add({x:0}, 'x', -10, 10).name('Position X').onChange((value)=>{for (let element of geometryArr) {console.log(element.position)element.position.set(value, element.position.y, element.position.z)}animate()});gui.add({scale:1}, 'scale', 0.1, 10).name('Scale').onChange((value)=>{for (let element of geometryArr) {element.scale.set(value, value, value)}animate()});gui.add({rotateX:0}, "rotateX",  -Math.PI, Math.PI).name("Rotate X").onChange((value)=>{for (let element of geometryArr) {element.rotation.set(value, element.rotation.y, element.rotation.z)}animate()})gui.open();}

3）支持几何体批量导出、重新导入

将3D物体的位置、形状、角度、放大序列化到json文件，支持导出。

导入时，根据物体的类型分别创建3D模型

	// 导入几何体function importGeometries() {const input = document.createElement('input');input.type = 'file';input.accept = '.json';input.addEventListener('change', (event) => {const file = event.target.files[0];if (file) {const reader = new FileReader();reader.onload = (e) => {const geometriesData = JSON.parse(e.target.result);geometriesData.forEach(data => {let geometry;let material;switch (data.type) {case 'Mesh':switch (data.name) {case 'Plane':geometry = new THREE.PlaneGeometry(data.geometryData.vertices, data.geometryData.indices);material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });break;case 'Cube':geometry = new THREE.BoxGeometry(data.geometryData.vertices, data.geometryData.indices);material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });break;case 'Sphere':geometry = new THREE.SphereGeometry(data.geometryData.vertices, data.geometryData.indices);material = new THREE.MeshBasicMaterial({ color: 0x0000ff });break;}const mesh = new THREE.Mesh(geometry, material);mesh.name = data.name;mesh.position.fromArray(data.position);mesh.rotation.fromArray(data.rotation);mesh.scale.fromArray(data.scale);scene.add(mesh);geometries.push(mesh);break;}});};reader.readAsText(file);}});input.click();}

2、整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js 几何体操作示例</title><style>body { margin: 0; overflow: hidden; }#camera-info {position: absolute;top: 10px;left: 10px;background-color: rgba(0, 0, 0, 0.5);color: white;padding: 10px;font-family: Arial, sans-serif;}</style>
</head>
<body>
<div id="camera-info"></div>
<script type="importmap">{"imports": {"three": "./three.js-master/build/three.module.js","three/addons/": "./three.js-master/examples/jsm/"}}
</script>
<script type="module">import * as THREE from "three"import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { GUI } from 'three/addons/libs/lil-gui.module.min.js';// 1) 创建画布const scene = new THREE.Scene();scene.background = new THREE.Color( 0xa0a0a0 );const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 2) 设置 camera 位置，朝向角度const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 0, 20); // 设置相机位置camera.lookAt(scene.position); // 让相机朝向场景中心// 设置控制轨道const controls = new OrbitControls( camera, renderer.domElement );controls.target.set( 0, 0.1, 0 );controls.update();controls.minDistance = 0.5;controls.maxDistance = 1000;controls.maxPolarAngle = 0.5 * Math.PI;// 5) 支持动态显示摄像头位置、角度、缩放信息const cameraInfo = document.getElementById('camera-info');function updateCameraInfo() {cameraInfo.innerHTML = `摄像头信息：<br>位置: (${camera.position.x.toFixed(2)}, ${camera.position.y.toFixed(2)}, ${camera.position.z.toFixed(2)})<br>角度: (${camera.rotation.x.toFixed(2)}, ${camera.rotation.y.toFixed(2)}, ${camera.rotation.z.toFixed(2)})<br>缩放: ${camera.zoom.toFixed(2)}`;}updateCameraInfo();// 渲染循环function animate() {requestAnimationFrame(animate);updateCameraInfo();renderer.render(scene, camera);}animate();// 存储创建的几何体列表const geometries = [];createPlane()createCube()createSphere()addGUIForGeometry(geometries)// 几何体创建函数function createPlane() {const geometry = new THREE.PlaneGeometry(1,1);const material = new THREE.MeshBasicMaterial({color:0xffff00, side:THREE.DoubleSide})const plane = new THREE.Mesh(geometry, material)plane.name = "Plane";plane.position.set(-1, -1, -1)scene.add(plane)geometries.push(plane)return plane;}// 创建正方体function createCube() {const geometry = new THREE.BoxGeometry(1, 1, 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const cube = new THREE.Mesh( geometry, material );cube.name = 'Cube';scene.add( cube );geometries.push(cube);return cube;}// 创建球体function createSphere() {const geometry = new THREE.SphereGeometry( 1, 32, 32 );const material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );const sphere = new THREE.Mesh( geometry, material );sphere.name = 'Sphere';sphere.position.set(2,2,2)scene.add( sphere );geometries.push(sphere);return sphere;}// GUI控制器function addGUIForGeometry(geometryArr) {const gui = new GUI();gui.add({x:0}, 'x', -10, 10).name('Position X').onChange((value)=>{for (let element of geometryArr) {console.log(element.position)element.position.set(value, element.position.y, element.position.z)}animate()});gui.add({scale:1}, 'scale', 0.1, 10).name('Scale').onChange((value)=>{for (let element of geometryArr) {element.scale.set(value, value, value)}animate()});gui.add({rotateX:0}, "rotateX",  -Math.PI, Math.PI).name("Rotate X").onChange((value)=>{for (let element of geometryArr) {element.rotation.set(value, element.rotation.y, element.rotation.z)}animate()})gui.open();}function handleKeyDown(event) {switch (event.key) {case 'e':exportToJSON(geometries)break;case 'r':clearGeometries(geometries)break;case 'i':importGeometries(geometries)break;}}document.addEventListener('keydown', handleKeyDown);function exportToJSON(geometryList) {const geometriesData = geometryList.map(geometry => {return {name: geometry.name,position: geometry.position.toArray(),rotation: geometry.rotation.toArray(),scale: geometry.scale.toArray(),// 根据几何体类型添加更多特定信息type: geometry.type,geometryData: geometry.geometry.toJSON()};});const blob = new Blob([JSON.stringify(geometriesData)], { type: 'application/json' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'geometries.json';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}// 清除几何体function clearGeometries(geoArr) {geometries.forEach(geometry => scene.remove(geometry));geometries.length = 0;}// 导入几何体function importGeometries() {const input = document.createElement('input');input.type = 'file';input.accept = '.json';input.addEventListener('change', (event) => {const file = event.target.files[0];if (file) {const reader = new FileReader();reader.onload = (e) => {const geometriesData = JSON.parse(e.target.result);geometriesData.forEach(data => {let geometry;let material;switch (data.type) {case 'Mesh':switch (data.name) {case 'Plane':geometry = new THREE.PlaneGeometry(data.geometryData.vertices, data.geometryData.indices);material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });break;case 'Cube':geometry = new THREE.BoxGeometry(data.geometryData.vertices, data.geometryData.indices);material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });break;case 'Sphere':geometry = new THREE.SphereGeometry(data.geometryData.vertices, data.geometryData.indices);material = new THREE.MeshBasicMaterial({ color: 0x0000ff });break;}const mesh = new THREE.Mesh(geometry, material);mesh.name = data.name;mesh.position.fromArray(data.position);mesh.rotation.fromArray(data.rotation);mesh.scale.fromArray(data.scale);scene.add(mesh);geometries.push(mesh);break;}});};reader.readAsText(file);}});input.click();}
</script>
</body>
</html>

ThreeJs功能演示——几何体操作导入导出

1、内部创建几何体导出编辑能力 1）支持内部创建的面、正方体、球体内部创建物体时，如果是三维物体，要创建集合形状geometry，和对应的材质material。再一起创建一个三维物体。 // 存储创建的几何体列表const geometries [];cre…...

编程日记 2025/1/17 9:02:16

LeetCode::2270. 分割数组的方案数

2270. 分割数组的方案数思路前缀和提示给你一个下标从 0 开始长度为 n 的整数数组 nums 。如果以下描述为真，那么 nums 在下标 i 处有一个合法的分割 ： 前 i 1 个元素的和大于等于剩下的 n - i - 1 个元素的和。下标 i 的右边至少有一个元…...

编程日记 2025/1/17 9:00:14

elementui表单验证，数据层级过深验证失效

先看示例代码，代码为模拟动态获取表单数据，然后动态添加rules验证规则，示例表单内输入框绑定form内第四层： <template><el-form :model"form" :rules"rules" ref"ruleForm" label-width&…...

编程日记 2025/1/17 8:57:05

【Java】LinkedHashMap （LRU）淘汰缓存的使用

文章目录 **1. initialCapacity（初始容量）****2. loadFactor（加载因子）****3. accessOrder（访问顺序）****完整参数解释示例****示例验证** LinkedHashMap 在 Java 中可维护元素插入或访问顺序，并…...

编程日记 2025/1/17 8:47:54

CancerGPT ：基于大语言模型的罕见癌症药物对协同作用少样本预测研究

今天我们一起来剖析一篇发表于《npj Digital Medicine》的论文——《CancerGPT for few shot drug pair synergy prediction using large pretrained language models》。该研究聚焦于一个极具挑战性的前沿领域：如何利用大语言模型（LLMs）在数…...

编程日记 2025/1/17 8:43:48

《汽车维护与修理》是什么级别的期刊？是正规期刊吗？能评职称吗？

问题解答： 问：《汽车维护与修理》是不是核心期刊？ 答：不是，是知网收录的正规学术期刊。问：《汽车维护与修理》级别？ 答：国家级。主管单位：中国汽车维修行业协会 …...

编程日记 2025/1/17 8:42:46

tomcat状态一直是Exited (1)

docker run -di -p 80:8080 --nametomcat001 你的仓库地址/tomcat:9执行此命令后tomcat一直是Exited(1)状态解决办法： 用以下命令创建运行 docker run -it --name tomcat001 -p 80:8080 -d 你的仓库地址/tomcat:9 /bin/bash最终结果 tomcat成功启动...

编程日记 2025/1/17 8:41:45

消息中间件的基础概念入门

目录一、什么是消息中间件 1.1、简介 1.2、消息中间件的主要作用解耦合异步通信负载均衡可靠性与持久性消息路由与调度削峰事务支持监控与审计跨平台和跨语言支持二、常用消息中间件对比 2.1、 RabbitMQ 2.1.1、特点 2.1.2、适用场景 2.2、Apache K…...

编程日记 2025/1/17 8:40:43

基于Web的宠物医院看诊系统设计与实现（源码+定制+开发）在线预约平台、宠物病历管理、医生诊疗记录、宠物健康数据分析宠物就诊预约、病历管理与健康分析

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/1/17 8:38:40

Excel数据叠加生成新DataFrame：操作指南与案例

目录一、准备工作二、读取Excel文件三、数据叠加四、处理重复数据（可选）五、保存新DataFrame到Excel文件六、案例演示七、注意事项八、总结在日常数据处理工作中，我们经常需要将不同Excel文档中的数据整合到一个新的DataFrame中，以便进行进一步的分析和处…...

编程日记 2025/1/17 8:35:37

Web 开发入门之旅：从静态页面到全栈应用的第一步

Web 开发入门之旅：从静态页面到全栈应用的第一步在当今互联网飞速发展的时代，掌握 Web 开发技能已成为众多技术爱好者和职场人士的必修课。然而，对于初学者而言，面对繁杂的技术栈和庞大的学习资源，往往感到无从下手。…...

编程日记 2025/1/17 8:32:34

WebSocket实现分布式的不同方案对比

引言随着实时通信需求的日益增长，WebSocket作为一种基于TCP的全双工通信协议，在实时聊天、在线游戏、数据推送等场景中得到了广泛应用。然而，在分布式环境下，如何实现WebSocket的连接管理和消息推送成为了一个挑战。本文将对比几…...

编程日记 2025/1/17 8:29:29

基于注意力机制的端到端合成语音检测

End-to-end Synthetic Speech Detection Based on Attention Mechanism 摘要： 五种轻量级注意力模块改为适用于语音序列的通道注意力机制和一维空间注意力机制 ASVspoof2019测试集的等错误率和最小串联检测代价函数都有所降低池化层之前嵌入CBAM、ECA的模型测试…...

编程日记 2025/1/17 8:26:26

MySQL NaviCat 安装及配置教程（Windows）【安装】

文章目录一、 MySQL 下载 1. 官网下载2. 其它渠道二、 MySQL 安装三、 MySQL 验证及配置四、 NaviCat 下载 1. 官网下载2. 其它渠道五、 NaviCat 安装六、 NaviCat 逆向工程软件 / 环境安装及配置目录一、 MySQL 下载 1. 官网下载安装地址：https://www.m…...

编程日记 2025/1/17 8:17:17

微信小程序：播放音频

在小程序开发中，音频播放是一个重要的功能。本文将详细介绍小程序音频播放的相关知识点，帮助开发者更好地掌握小程序音频播放的实现方法。一、小程序音频播放的基本流程在小程序中，音频播放的基本流程如下： 获取音频数据&#…...

编程日记 2025/1/17 8:04:00

Ubuntu安装K8S

第一步： 安装docker Install Docker #注意docker是早期的名称已经过时了，因此请使用如下命令，一步到位安装docker-ce。第二步：设置K8S源： （大陆使用aliyun源，大陆外使用google源）…...

编程日记 2025/1/17 8:02:59

独立同分布时,联合概率密度函数等于边缘概率密度函数乘积

在概率论中，独立同分布（i.i.d.）指的是多个随机变量既独立又服从相同的概率分布。对于一组随机变量 (X_1, X_2, \dots, X_n)，若它们是独立同分布的，那么它们的联合概率密度函数 (p(x_1, x_2, \dots, x_n)) 就可以表示为…...

编程日记 2025/1/17 8:00:57

半导体数据分析：玩转WM-811K Wafermap 数据集（三） AI 机器学习

前面我们已经通过两篇文章，一起熟悉了WM-811K Wafermap 数据集，并对其中的一些数据进行了调用，生成了一些统计信息和图片。今天我们接着继续往前走。半导体数据分析： 玩转WM-811K Wafermap 数据集（二） AI…...

编程日记 2025/1/17 7:59:56

【.net core】【sqlsugar】时间查询示例

1、时间包含查询示例 //model.TimeInterval为时间区间参数，参数格式为2024-01-01~2025-01-01 //query为当前查询的语句内容 //为当前查询语句增加创建时间模糊搜索查询条件 query query.Where(a > ((DateTime)a.F_CreatorTime).ToString("yyyy-MM-dd HH:m…...

编程日记 2025/1/17 7:54:49

Kotlin 协程基础十 —— 协作、互斥锁与共享变量

Kotlin 协程基础系列： Kotlin 协程基础一 —— 总体知识概述 Kotlin 协程基础二 —— 结构化并发（一） Kotlin 协程基础三 —— 结构化并发（二） Kotlin 协程基础四 —— CoroutineScope 与 CoroutineContext Kotlin 协程…...

编程日记 2025/1/17 7:53:48

XML Group端口详解

在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...

编程新知 2025/11/12 5:39:28

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2025/11/7 20:03:55

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...

编程新知 2025/11/8 7:47:48

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/11/8 10:14:31

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/11/12 5:14:55

C++ Visual Studio 2017厂商给的源码没有.sln文件易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj，再用Visual Studio 2022打开。再保侟就有.sln文件了。易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/11/12 6:42:12

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2025/11/12 9:58:10