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

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/67266.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

nginx 配置域名前缀访问 react 项目

nginx 配置域名前缀访问 react 项目

说明一下&#xff1a;我是使用域名转发访问的&#xff0c;访问流程如下&#xff1a; 浏览器 》 服务器1 》 服务器2 由于服务器1已经为 https 的访问方式做了 ssl 证书等相关配置&#xff0c;然后转发到服务器2&#xff0c; 所以在服务器2中不需要再配置 ssl 证书相关的东西了&…
阅读更多...
thinkphp8.0 likeadmin 框架添加API 文档自动生成工具 apidoc支持

thinkphp8.0 likeadmin 框架添加API 文档自动生成工具 apidoc支持

Apidoc 是一个便捷的 API 文档自动生成工具&#xff0c;它能帮助开发者快速生成和管理 API 文档。以下是 Apidoc 的主要特点和功能&#xff1a; 主要特点 开箱即用 安装后&#xff0c;无需繁杂配置&#xff0c;直接按照文档编写注释&#xff0c;即可自动生成 API 文档。 轻松编…
阅读更多...
leetcode 面试经典 150 题：快乐数

leetcode 面试经典 150 题：快乐数

链接快乐数题序号202题型数组解题方法哈希表难度简单熟练度✅✅✅✅ 题目 编写一个算法来判断一个数 n 是不是快乐数。 [快乐数] 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。 然后重复这个过程直到这个数变为 1&#xff0…
阅读更多...
每天一篇逻辑漏洞

每天一篇逻辑漏洞

前言&#xff1a; 不赶进度了&#xff0c;学习并运用吧 内容&#xff1a; 该文章有bili赞助发布摆烂哥如何从0开始到年入20w 到多家SRC TOP10白帽的心路历程分享_哔哩哔哩_bilibili 逻辑漏洞 验证码回显 //一般站没有&#xff0c;边缘资产有 用户名枚举 …
阅读更多...
Ruby语言的数据结构

Ruby语言的数据结构

Ruby语言的数据结构详解 Ruby是一种动态、面向对象的编程语言&#xff0c;因其简洁优雅的语法而受到开发者的喜爱。在Ruby中&#xff0c;数据结构是构建和管理数据的一种方式&#xff0c;不同的数据结构适用于不同的场景。本文将详细探讨Ruby中的几种主要数据结构&#xff0c;…
阅读更多...
【向量数据库 Milvus】linux 源码安装 Milvus 2.5.3

【向量数据库 Milvus】linux 源码安装 Milvus 2.5.3

在 Linux 系统&#xff08;如 ai 5.10.134-16.2.an8.x86_64&#xff09;上通过源码安装 Milvus 2.5.3 的步骤如下。该指南适用于 x86_64 架构的系统。 1. 环境准备 确保系统满足以下要求&#xff1a; 操作系统: Linux&#xff08;x86_64 架构&#xff09;Go: 1.21 或更高版本…
阅读更多...
imbinarize函数用法详解与示例

imbinarize函数用法详解与示例

一、函数概述 众所周知&#xff0c;im2bw函数可以将灰度图像转换为二值图像。但MATLAB中还有一个imbinarize函数可以将灰度图像转换为二值图像。imbinarize函数是MATLAB图像处理工具箱中用于将灰度图像或体数据二值化的工具。它可以通过全局或自适应阈值方法将灰度图像转换为二…
阅读更多...
centos使用dpdk库

centos使用dpdk库

yum -y install dpdk dpdk-devel 在 C 中使用 DPDK&#xff08;Data Plane Development Kit&#xff09;库通常涉及到以下几个步骤&#xff1a;安装 DPDK、配置编译环境、编写 C 代码并链接 DPDK 库。以下是如何在 C 中引用和使用 DPDK 的详细步骤。 1. 安装 DPDK 首先&#…
阅读更多...
数仓建模（三）建模三步走：需求分析、模型设计与数据加载

数仓建模（三）建模三步走：需求分析、模型设计与数据加载

本文包含&#xff1a; 数据仓库的背景与重要性数据仓库建模的核心目标本文结构概览&#xff1a;需求分析、模型设计与数据加载 目录 第一部分&#xff1a;需求分析 1.1 需求分析的定义与目标 1.2 需求分析的步骤 1.2.1 业务需求收集 1.2.2 技术需求分析 1.2.3 成果输出…
阅读更多...
【postgres】sqlite格式如何导入postgres数据库

【postgres】sqlite格式如何导入postgres数据库

step1 在ubuntu系统安装pgloader&#xff08;centos系统难以直接通过yum安装&#xff0c;如果源码安装的话&#xff0c;会比较费劲&#xff09; step2&#xff0c;执行如下python脚本 from pathlib import Path import subprocess dataset_dir Path(/app/sqlite_to_pg/chas…
阅读更多...
【C++指南】类和对象（八）：匿名对象

【C++指南】类和对象（八）：匿名对象

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 引言 在C编程中&#xff0c;匿名对象是一种特殊的对象&#xff0c;它在创建时没有被命名。 这种对象通常用…
阅读更多...
编译pytorch——cuda-toolkit-nvcc

编译pytorch——cuda-toolkit-nvcc

链接 https://blog.csdn.net/wjinjie/article/details/108997692https://docs.nvidia.com/cuda/cuda-installation-guide-linux/#switching-between-driver-module-flavorshttps://forums.developer.nvidia.com/t/can-not-load-nvidia-drivers-on-ubuntu-22-10/239750https://…
阅读更多...
智汇云舟参编《城市轨道交通安全防范系统技术要求》国标正式发布

智汇云舟参编《城市轨道交通安全防范系统技术要求》国标正式发布

近日&#xff0c;根据国家标准化管理委员会官网&#xff0c;全国标准信息公共服务平台发布的公告&#xff0c;国家标准《城市轨道交通安全防范系统技术要求》&#xff08;GB/T 26718-2024&#xff09;已由全国城市轨道交通标准化技术委员会上报国家标准化管理委员会&#xff0c…
阅读更多...
45_Lua模块与包

45_Lua模块与包

Lua中的模块系统是该语言的一个重要特性，它允许开发者将代码分割成更小、更易于管理的部分。通过使用模块，你可以创建可重用的代码片段，并且可以降低代码间的耦合度。下面我将详细介绍Lua模块的基本概念、语法以及一些实际案例。 1.Lua模块 1.1 模块的基本概念 从Lua 5.1…
阅读更多...
学习华为熵减：激发组织活力（系列之三）

学习华为熵减：激发组织活力（系列之三）

目录 为什么学习华为&#xff1f; 学习华为什么&#xff1f; 一、势&#xff1a;顺势而为&#xff0c;在风口上猪都会飞起来。 二、道&#xff1a;就是认识和利用规律层面&#xff0c;文化和制度创新就是企业经营之道。 三、法&#xff1a;就是一套价值管理的变革方法论。…
阅读更多...
Unity解决滑动条的value值的滑动条消失问题

Unity解决滑动条的value值的滑动条消失问题

在这里我们看到原本的value的滑动条消失了 解决办法 把编辑器的边框往外面拉一下就可以了&#xff08;之前遇到这个问题还重启了几次unity没想到居然是这个问题&#xff09;
阅读更多...
HarmonyOS应用开发者初级认证最新版– 2025/1/13号题库新版

HarmonyOS应用开发者初级认证最新版– 2025/1/13号题库新版

1.欢迎各位读者&#xff0c;本文档来自鸿蒙开发学员亲测&#xff0c;最新版。&#xff08;考试时直接Ctrlf进行搜索&#xff0c;一定要认真比对答案&#xff0c;有的答案相似度很高&#xff09;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 欢迎…
阅读更多...
kubernetes v1.29.XX版本HPA、KPA、VPA并压力测试

kubernetes v1.29.XX版本HPA、KPA、VPA并压力测试

序言&#xff1a; 在大型电商、购物、直播活动期间&#xff0c;对于火爆流量的激增&#xff0c;如何保障业务稳定并且做到资源不浪费&#xff0c;自动回收。 场景&#xff1a;kubernetes 原生容器化承载业务流量&#xff08;非云环境&#xff09; 方案&#xff1a;kubernetes自…
阅读更多...
HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (五、电影详情页的设计实现)

HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (五、电影详情页的设计实现)

在上一篇文章中&#xff0c;完成了电影列表页的开发。接下来&#xff0c;将进入电影详情页的设计实现阶段。这个页面将展示电影的详细信息&#xff0c;包括电影海报、评分、简介以及相关影人等。将使用 HarmonyOS 提供的常用组件&#xff0c;并结合第三方库 nutpi/axios 来实现…
阅读更多...
亲测解决CUDA error: device-side assert triggered

亲测解决CUDA error: device-side assert triggered

这个问题小虎今天刚刚遇到&#xff0c;问题原因有很多。但是由于使用了cuda运行&#xff0c;报错看不出来。解决方法是用cpu运行来看错误出在哪里。 环境 Python version is: 3.10.13 | packaged by Anaconda, Inc. | (main, Sep 11 2023, 13:24:38) [MSC v.1916 64 bit (AMD…
阅读更多...
最新文章

Copyright @ 2022~2023