学习threejs，使用多面体（IcosahedronGeometry、TetrahedronGeometry、OctahedronGeometry等）

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.PolyhedronGeometry 自定义多面体
      • 1.1.1 ☘️代码示例
      • 1.1.2 ☘️构造函数
      • 1.1.3 ☘️属性
      • 1.1.4 ☘️方法
    • 1.2 ☘️THREE.IcosahedronGeometry 二十面体
      • 1.2.1 ☘️构造函数
      • 1.2.2 ☘️属性
      • 1.2.3 ☘️方法
    • 1.3 ☘️THREE.TetrahedronGeometry 四面体
      • 1.3.1 ☘️构造函数
      • 1.3.2 ☘️属性
      • 1.3.3 ☘️方法
    • 1.4 ☘️THREE.OctahedronGeometry 八面体
      • 1.4.1 ☘️构造函数
      • 1.4.2 ☘️属性
      • 1.4.3 ☘️方法
    • 1.5 ☘️THREE.DodecahedronGeometry 八面体
      • 1.5.1 ☘️构造函数
      • 1.5.2 ☘️属性
      • 1.5.3 ☘️方法
  • 二、🍀使用多面体几何对象IcosahedronGeometry二十面体、TetrahedronGeometry四面体、OctahedronGeometry八面体、DodecahedronGeometry十二面体、PolyhedronGeometry自定义多面体
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用多面体几何对象IcosahedronGeometry二十面体、TetrahedronGeometry四面体、OctahedronGeometry八面体、DodecahedronGeometry十二面体、PolyhedronGeometry自定义多面体，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.PolyhedronGeometry 自定义多面体

THREE.PolyhedronGeometry多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。 这个类由DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry 所使用，以生成它们各自的几何结构。

1.1.1 ☘️代码示例

代码示例

const verticesOfCube = [-1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,-1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
];const indicesOfFaces = [2,1,0,    0,3,2,0,4,7,    7,3,0,0,1,5,    5,4,0,1,2,6,    6,5,1,2,3,7,    7,6,2,4,5,6,    6,7,4
];const geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 6, 2 );

1.1.2 ☘️构造函数

PolyhedronGeometry(vertices : Array, indices
vertices — 一个顶点Array（数组）：[1,1,1, -1,-1,-1, … ]。
indices — 一个构成面的索引Array（数组）， [0,1,2, 2,3,0, … ]。
radius — Float - 最终形状的半径。
detail — Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑。

1.1.3 ☘️属性

共有属性请参见其基类BufferGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.1.4 ☘️方法

共有方法请参见其基类BufferGeometry。

1.2 ☘️THREE.IcosahedronGeometry 二十面体

THREE.IcosahedronGeometry一个用于生成二十面体的类。

1.2.1 ☘️构造函数

IcosahedronGeometry(radius : Float, detail : Integer)
radius — 二十面体的半径，默认为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。

1.2.2 ☘️属性

共有属性请参见其基类PolyhedronGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.2.3 ☘️方法

共有方法请参见其基类PolyhedronGeometry。

1.3 ☘️THREE.TetrahedronGeometry 四面体

THREE.TetrahedronGeometry一个用于生成四面几何体的类。

1.3.1 ☘️构造函数

TetrahedronGeometry(radius : Float, detail : Integer)
radius — 四面体的半径，默认值为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。

1.3.2 ☘️属性

共有属性请参见其基类PolyhedronGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.3.3 ☘️方法

共有方法请参见其基类PolyhedronGeometry。

1.4 ☘️THREE.OctahedronGeometry 八面体

THREE.OctahedronGeometry一个用于创建八面体的类。

1.4.1 ☘️构造函数

OctahedronGeometry(radius : Float, detail : Integer)
radius — 八面体的半径，默认值为1。
detail — 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。

1.4.2 ☘️属性

共有属性请参见其基类PolyhedronGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.4.3 ☘️方法

共有方法请参见其基类PolyhedronGeometry。

1.5 ☘️THREE.DodecahedronGeometry 八面体

THREE.DodecahedronGeometry一个用于创建十二面几何体的类。

1.5.1 ☘️构造函数

DodecahedronGeometry(radius : Float, detail : Integer)
radius — 十二面体的半径，默认值为1。
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。

1.5.2 ☘️属性

共有属性请参见其基类PolyhedronGeometry。

.parameters : Object
一个包含着构造函数中每个参数的对象。在对象实例化之后，对该属性的任何修改都不会改变这个几何体。

1.5.3 ☘️方法

共有方法请参见其基类PolyhedronGeometry。

二、🍀使用多面体几何对象IcosahedronGeometry二十面体、TetrahedronGeometry四面体、OctahedronGeometry八面体、DodecahedronGeometry十二面体、PolyhedronGeometry自定义多面体

1. ☘️实现思路

  • 1、初始化renderer渲染器。
  • 2、初始化Scene三维场景scene。
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、加载几何模型：定义controls方法，初始化gui多面体控制项，根据type创建多面体对象。创建createMesh方法（参数为geom几何体对象），创建THREE.MeshNormalMaterial法向量材质meshMaterial，创建THREE.MeshBasicMaterial基础材质wireFrameMat，传入参数geom、meshMaterial、wireFrameMat调用createMultiMaterialObject创建网格对象mesh。调用createMesh(new THREE.IcosahedronGeometry(10, 0))创建二十面体网格对象polyhedron，scene场景添加polyhedron。定义render方法，实现polyhedron的旋转动画，调用render方法。具体代码参考下面代码样例。
  • 5、加入gui控制，控制多面体的了类型type、半径radius和顶点detail。加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html>
<head><title>学习threejs，使用多面体（IcosahedronGeometry、TetrahedronGeometry、OctahedronGeometry等）</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Js 代码块 -->
<script type="text/javascript">// 初始化function init() {var stats = initStats();// 创建三维场景scenevar scene = new THREE.Scene();// 创建相机cameravar camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建渲染器webGLRenderer，设置webGLRenderer的颜色和大小var webGLRenderer = new THREE.WebGLRenderer();webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;var polyhedron = createMesh(new THREE.IcosahedronGeometry(10, 0));// 添加二十面体网格对象scene.add(polyhedron);// 设置相机位置和方向camera.position.x = -30;camera.position.y = 40;camera.position.z = 50;camera.lookAt(new THREE.Vector3(10, 0, 0));// 渲染器webGLRenderer绑定html要素document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);var step = 0;var controls = new function () {// 初始化gui控制项，创建多面体对象this.radius = 10;this.detail = 0;this.type = 'Icosahedron';this.redraw = function () {// remove the old planescene.remove(polyhedron);// create a new oneswitch (controls.type) {case 'Icosahedron':polyhedron = createMesh(new THREE.IcosahedronGeometry(controls.radius, controls.detail));break;case 'Tetrahedron':polyhedron = createMesh(new THREE.TetrahedronGeometry(controls.radius, controls.detail));break;case 'Octahedron':polyhedron = createMesh(new THREE.OctahedronGeometry(controls.radius, controls.detail));break;case 'Dodecahedron':polyhedron = createMesh(new THREE.DodecahedronGeometry(controls.radius, controls.detail));break;case 'Custom':var vertices = [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1];var indices = [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1];polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, indices, controls.radius, controls.detail));break;}scene.add(polyhedron);};};var gui = new dat.GUI();gui.add(controls, 'radius', 0, 40).step(1).onChange(controls.redraw);gui.add(controls, 'detail', 0, 3).step(1).onChange(controls.redraw);gui.add(controls, 'type', ['Icosahedron', 'Tetrahedron', 'Octahedron', 'Dodecahedron', 'Custom']).onChange(controls.redraw);render();function createMesh(geom) {var meshMaterial = new THREE.MeshNormalMaterial();meshMaterial.side = THREE.DoubleSide;var wireFrameMat = new THREE.MeshBasicMaterial();wireFrameMat.wireframe = true;var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);return mesh;}function render() {stats.update();polyhedron.rotation.y = step += 0.01;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>

效果如下：
blog.csdnimg.cn/direct/82ef60de80ca4834a237dbad7eeb48cd.gif)

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

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

相关文章

DeepSeek详解：探索下一代语言模型

DeepSeek详解：探索下一代语言模型

文章目录 前言一、什么是DeepSeek二、DeepSeek核心技术2.1 Transformer架构2.1.1 自注意力机制 (Self-Attention Mechanism)(a) 核心思想(b) 计算过程(c) 代码实现 2.1.2 多头注意力 (Multi-Head Attention)(a) 核心思想(b) 工作原理(c) 数学描述(d) 代码实现 2.1.3 位置编码 (…
阅读更多...
【目标检测】【深度学习】【Pytorch版本】YOLOV1模型算法详解

【目标检测】【深度学习】【Pytorch版本】YOLOV1模型算法详解

【目标检测】【深度学习】【Pytorch版本】YOLOV1模型算法详解 文章目录 【目标检测】【深度学习】【Pytorch版本】YOLOV1模型算法详解前言YOLOV1的模型结构YOLOV1模型的基本执行流程YOLOV1模型的网络参数YOLOV1模型的训练方式 YOLOV1的核心思想前向传播阶段网格单元(grid cell)…
阅读更多...
网络运维学习笔记（DeepSeek优化版） 022 HCIP-Datacom路由概念、BFD协议详解与OSPF第一课

网络运维学习笔记（DeepSeek优化版） 022 HCIP-Datacom路由概念、BFD协议详解与OSPF第一课

文章目录 路由概念、BFD协议详解与OSPF第一课一、路由协议优先级与选路原则1.1 路由协议优先级对照表1.2 路由选路核心原则 二、BFD&#xff08;Bidirectional Forwarding Detection&#xff0c;双向转发检测&#xff09;的配置与应用2.1 双向心跳探测&#xff08;双端配置&…
阅读更多...
单应性矩阵（homography）

单应性矩阵（homography）

利用单应性矩阵计算内外参矩阵 利用单应性矩阵解决问题 问题描述&#xff1a;
阅读更多...
Scavenge算法的优缺点问题

Scavenge算法的优缺点问题

Scavenge 的缺点是只能使用堆内存中的一半&#xff0c;这是由划分空间和复制机制所决定的。但 Scavenge 由于只复制存活的对象&#xff0c;并且对于生命周期短的场景&#xff0c;存活对象只占少部分&#xff0c;所以它在时间效率上有优异的表现。 由于 Scavenge 是典型的牺牲空…
阅读更多...
丝杆支撑座间隙调整不当会带来哪些影响？

丝杆支撑座间隙调整不当会带来哪些影响？

丝杆支撑座是一种用于支撑滚珠丝杆的零件&#xff0c;通常用于机床、数控机床、自动化生产线等高精度机械设备中。支撑座间隙调整不当会对机械设备的运行产生多方面的影响&#xff0c;接下来一起了解一下&#xff1a; 1、降低加工精度&#xff1a;在机械加工设备中&#xff0c;…
阅读更多...
Unity：EasyRoad3D插件学习 二期

Unity：EasyRoad3D插件学习 二期

前言&#xff1a; 书接上回。 一、场景视图状态&#xff1a; 创建好道路以后&#xff0c;切换到第一个选项&#xff0c;场景视图状态&#xff0c;查看道路信息&#xff0c;Main Settings修改道路名称、类型&#xff0c;宽度&#xff0c;是否闭环。 RoadWidth改为15&#xff…
阅读更多...
内网渗透-DLL和C语言加载木马

内网渗透-DLL和C语言加载木马

免杀进阶技术 1、DLL的定义与使用 DLL:Dynamic Link library,动态链接库&#xff0c;是一个无法自己运行&#xff0c;需要额外的命令或程序来对其接口进行调用&#xff08;类方法、函数&#xff09;。 (1)在DevCpp中创建一个DLL项目 (2)在dllmain.c中定义源代码函数接口 #i…
阅读更多...
一洽让常见问题的快速咨询，触手可及

一洽让常见问题的快速咨询，触手可及

在客户服务场景中&#xff0c;重复性常见问题的处理效率直接影响用户体验与客服成本。针对重复性常见问题&#xff0c;如何以直观的方式呈现给用户&#xff0c;使其能够快速、精准地提出咨询&#xff0c;已成为提升客户满意度的关键因素。 一、传统客服模式的效率枷锁 用户咨…
阅读更多...
WEB攻防-Java安全SPEL表达式SSTI模版注入XXEJDBCMyBatis注入

WEB攻防-Java安全SPEL表达式SSTI模版注入XXEJDBCMyBatis注入

目录 靶场搭建 JavaSec ​编辑​编辑 Hello-Java-Sec(可看到代码对比) SQL注入-JDBC(Java语言连接数据库) 1、采用Statement方法拼接SQL语句 2.PrepareStatement会对SQL语句进行预编译&#xff0c;但如果直接采取拼接的方式构造SQL&#xff0c;此时进行预编译也无用。 3、…
阅读更多...
树莓集团南京园区启航：数字经济新地标！

树莓集团南京园区启航：数字经济新地标！

深耕数字产业&#xff0c;构筑生态闭环 树莓集团在数字产业领域拥有超过十年的深厚积累&#xff0c;专注于构建“数字产业”的融合生态链。其核心优势在于有效整合政府、产业、企业及高校资源&#xff0c;形成一个协同创新、价值共生的产业生态闭环系统。 赋能转型&#xff0c…
阅读更多...
Redis之bimap/hyperloglog/GEO

Redis之bimap/hyperloglog/GEO

bimap/hyperloglog/GEO的真实需求 这些需求的痛点&#xff1a;亿级数据的收集清洗统计展现。一句话&#xff1a;存的进取得快多维度 真正有价值的是统计。 统计的类型 亿级系统中常见的四种统计 聚合统计 统计多个集合元素的聚合结果&#xff0c;就是交差并等集合统计。 排…
阅读更多...
nara wpe去混响学习笔记

nara wpe去混响学习笔记

文章目录 1.WPE方法去混响的基本流程1.1.基本流程 2.离线迭代方法3.在线求法3.1.回顾卡尔曼方法3.2.在线去混响递推滤波器G方法 nara wpe git地址 博客中demo代码下载 参考论文 NARA - WPE: A Python Package for Weighted Prediction Error Dereverberation in Numpy and Ten…
阅读更多...
JavaScript函数、箭头函数、匿名函数

JavaScript函数、箭头函数、匿名函数

1.示例代码(包括用法和注意事项) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>JS-函数</title…
阅读更多...
练习：求平方根

练习：求平方根

需求&#xff1a;键盘录入一个大于等于2的整数x&#xff0c;计算并返回x的平方根。结果只保留整数部分&#xff0c;小数部分将被舍去。 代码一&#xff1a; //求平方根 //方法一&#xff1a; package Online; import java.util.Scanner; public class SquareRoot {public sta…
阅读更多...
win10 安装后的 系统盘的 分区

win10 安装后的 系统盘的 分区

win10 安装后的 系统盘的 分区 MBR 分区 GPT 分区
阅读更多...
反向 SSH 隧道技术实现内网穿透

反向 SSH 隧道技术实现内网穿透

反向 SSH 隧道技术实现内网穿透 场景描述 有一台内网的 Linux PC 机&#xff0c;想在其他地方&#xff08;如家中&#xff09;使用浏览器&#xff0c;在浏览器中能够使用内网 Linux PC 机的命令行。 实现思路 内网 Linux PC 机在内网可以使用 SSH 进行连接&#xff0c;但内…
阅读更多...
[MRCTF2020]套娃

[MRCTF2020]套娃

一。 按F12看源代码 发现代码 读代码发现 1.我们传的参数中不能存在_和%5f&#xff0c;可以通过使用空格来代替_&#xff0c;还是能够上传成功。 2.正则表达式"/^23333/ " &#xff0c;开头结尾都被 " " 和 " /"&#xff0c;开头结尾都被&qu…
阅读更多...
基于Windows11的WSL2通过Ollama平台安装部署DeepSeek-R1模型

基于Windows11的WSL2通过Ollama平台安装部署DeepSeek-R1模型

DeepSeek-R1模型各参数版本硬件要求 一、在Windows上安装Linux子系统WSL2 检查电脑是否支持虚拟化&#xff0c;按住<font style"color:rgb(199, 37, 78);background-color:rgb(249, 242, 244);">WindowsR</font>输入<font style"color:rgb(199,…
阅读更多...
PHP回调后门小总结

PHP回调后门小总结

目录 1.call_user_func 函数说明 蚁剑连接 2.数组操作造成的单参数回调后门 array_filter 函数说明 蚁剑连接 array_map 函数说明 蚁剑连接 3.二参数回调函数 uasort 函数说明 uksort array_reduce array_udiff 蚁剑连接 4.三参数的回调后门 array_walk 函数说…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023