Threejs创建正多边体

        上一章节实现了球体的绘制,这节来绘制多面体,包括正多面体,平面中,每条边一样长组成的图形叫正多边形,这里每个面一样,叫正多面体。如上文一样,先要创建出基础的组件,包括场景,相机,灯光,渲染器。代码如下:

 initScene() {this.scene = new THREE.Scene();//创建一个Scene场景},initLight(){const light = new THREE.DirectionalLight(0xffffff, 1);//创建一个灯光this.scene.add(light)},initCamera(){//创建一个透视相机,视角为45度,宽高比为window窗口的宽高比,0.1为近面,10000为远面this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);this.camera.position.set(50,50,50);//设置相机位置this.camera.lookAt(0,0,0);//设置相机位置},initRenderer(){//初始化渲染器this.renderer = new THREE.WebGLRenderer({ antialias: true });this.container = document.getElementById("container");//获取容器this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);//设置渲染器的大小this.container.appendChild(this.renderer.domElement);//将渲染器添加到容器中this.renderer.setClearColor('#FFFFFF', 1.0);//设置背景颜色},initOrbitControls(){ //创建鼠标控制工具this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);//创建控制器},initAnimate() { //循环渲染requestAnimationFrame(this.initAnimate);this.renderer.render(this.scene, this.camera);},

首先绘制一个正四面体,正四面体可以想象得到就是一个三棱锥,只有每面是三角形才能四个面组成一个体。

TetrahedronGeometry的构造函数接受两个参数:

  • radius(半径):这个参数定义了四面体的外接球半径,它决定了四面体的整体大小
  • detail(细节级别):这个可选参数用于细分四面体的面,以增加几何形状的细节。默认值为 0,表示不进行细分。

代码如下:

    initTetrahedronGeometry(){ //四面缓冲几何体const geometry = new THREE.TetrahedronGeometry( 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const dodecahedron = new THREE.Mesh( geometry, material );this.scene.add( dodecahedron );},

效果如下:

 

OctahedronGeometry(八面体几何)是 Three.js 中用于创建八面体模型的几何类。八面体是一种具有八个面的多面体,每个面都是等边三角形,TetrahedronGeometry的构造函数接受两个参数:

  • radius(半径):这个参数定义了四面体的外接球半径,它决定了四面体的整体大小
  • detail(细节级别):这个可选参数用于细分四面体的面,以增加几何形状的细节。默认值为 0,表示不进行细分。

代码如下:

initOctahedronGeometry(){  //八面缓冲几何体const geometry = new THREE.OctahedronGeometry( 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00,wireframe:true} );const dodecahedron = new THREE.Mesh( geometry, material );this.scene.add( dodecahedron );},

效果如下:

 

DodecahedronGeometry(十二面体几何)是 Three.js 中用于创建十二面体模型的几何类。十二面体是一种具有 12 个面的多面体,每个面都是正五边形。

  • radius(半径):确定十二面体的外接球半径,从而决定十二面体的整体大小。
  • detail(细分层级):可选参数,默认值为 0。它控制几何体的细分程度,当 detail 值大于 0 时,十二面体的每个面会被细分成更多的小三角形,增加几何形状的细节和复杂度。数值越大,细分程度越高。

代码如下:

    initDodecahedronGeometry(){  //十二面缓冲几何体const geometry = new THREE.DodecahedronGeometry( 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00,wireframe:true} );const dodecahedron = new THREE.Mesh( geometry, material );this.scene.add( dodecahedron );},

 效果如下:

 

IcosahedronGeometry(二十面体几何)是 Three.js 中的一个几何类,用于构建二十面体的几何形状。二十面体是一种具有 20 个等边三角形面的多面体。

  • radius(半径):这一参数定义了二十面体的外接球半径,它决定了二十面体的整体大小。
  • detail(细节层级):这是一个可选参数,默认值为 0。通过调整这个参数,可以对二十面体的每个面进行细分,以增加几何形状的细节。当 detail 为 1 时,每个面将被进一步细分成更小的三角形,从而使整个二十面体看起来更加复杂和精细。

代码如下:

    initIcosahedronGeometry(){ //二十面缓冲几何体const geometry = new THREE.IcosahedronGeometry( 1 );const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );const dodecahedron = new THREE.Mesh( geometry, material );this.scene.add( dodecahedron );},

效果如下:

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

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

相关文章

【c++面试总结】

1. NULL 和 nullptr 区别 int overLoadTest(int x) {cout << __LINE__ << endl;return 0; }int overLoadTest(char* x) {cout << __LINE__ << endl;return 0; }int main() {char x[10] {1,2,3,4,5};overLoadTest(1);overLoadTest(x);overLoadTest(nu…

LeetCode 918. 环形子数组的最大和

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 给定一个长度为 n 的环形整数数组 nums &#xff0c;返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上&#xff0c; nums[i] 的下一个元素是 nums[(i 1) % n…

Node.JS 版本管理工具 Fnm 安装及配置(Windows)

Fnm 安装及配置&#xff08;Windows&#xff09; Fnm&#xff08;Fast Node Manager&#xff09;&#x1f680; 一个快速而简单的 Node.js 版本管理工具&#xff0c;使用 Rust 编写。 1 安装 官网&#xff1a;Fnm&#xff08;镜像网站 &#xff09;。下载&#xff1a;Fnm&a…

【议题征集 】上海站 nMeetup 将于十月份开启!

上海&#xff0c;作为我国的经济和金融中心&#xff0c;正迅速发展成为全球领先的科技创新城市。这座城市不仅拥有深厚的文化底蕴&#xff0c;还积极拥抱数字化转型&#xff0c;推动着数据库和人工智能基础设施的快速发展。第三站 nMeetup 我们将走进上海&#xff0c;本次活动由…

被Karpathy誉为“蕴藏着类似ChatGPT的机会的AI产品Notebook LM”,它到底做对了什么?

就在昨天&#xff0c;Karpathy在X上连续发布了多条安利帖&#xff0c;强烈地给大家推荐一个AI产品NotebookLM。 嘶&#xff5e;给周围人疯狂种草并不稀奇&#xff0c;但Karpathy的推荐理由给NotebookLM戴了一个高帽子-他提到这款产品让人联想到ChatGPT。 这种就令人好奇&#…

数通 1

通信&#xff1a;需要介质才能通信电话离信号塔&#xff08;基站&#xff09;越远&#xff0c;信号越弱。信号在基站之间传递。你离路由器越远&#xff0c;信号越差。一个意思 比如想传一张图片&#xff0c;这张图片就是数据载荷 网关&#xff0c;分割两个网络。路由器可以是网…

vue + echarts 快速入门

vue echarts 快速入门 本案例即有nodejs和vue的基础&#xff0c;又在vue的基础上整合了echarts Nodejs基础 1、Node简介 1.1、为什么学习Nodejs(了解) 轻量级、高性能、可伸缩web服务器前后端JavaScript同构开发简洁高效的前端工程化 1.2、Nodejs能做什么(了解) Node 打破了…

TI DSP TMS320F280025 Note14:模数转换器ADC原理分析与应用

TMS320F280025 模数转换器ADC原理分析与应用 ` 文章目录 TMS320F280025 模数转换器ADC原理分析与应用逐次比较型ADC和双积分型ADC工作原理逐次比较型 ADC双积分型 ADC280025ADCADC原理分析ADC时钟SOCSOC内部原理ADC触发方式ADC采集(采样和保持)窗口通道寄生电容基准电压发生器模…

【15%】100小时机器学习——什么是机器学习

前言 虽然已经好久没有更新了&#xff0c;但笔者最近一直都在努力学习哦。 前面三三两两根据GitHub上的项目写了一些实验操作&#xff0c;但是总觉得这样是不行的。碎片化的学习只能是建立在已知的基础上进行熟练&#xff0c;不能作为打基础的主力方法&#xff0c;最关键的是&a…

用责任链模式改造 if else

我的上一篇文章&#xff0c;因为if else 多了&#xff0c;捣鼓很久&#xff0c;今天用责任链模式改造一下。 代码写着写着&#xff0c;if else if 逻辑忘记了&#xff0c;哎。。。-CSDN博客 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 1. 什么是责任…

Linux下的基本指令/命令(一)

目录 基本命令 1. Is命令/指令: 罗列当前目录下指定的文件或者目录. 2. pwd命令&#xff1a; 查看当前工作的路径 3. cd命令&#xff1a; 切换到指定路径下。 只能切换到目录中 4. tree命令: 树状显式目录 使用前要输入命令 yum install -y tree &#xff0c;用来安装一个…

Redis入门第二步:Redis数据类型详解

摘要&#xff1a; 欢迎继续跟随《Redis新手指南&#xff1a;从入门到精通》专栏的步伐&#xff01;在本文中&#xff0c;我们将深入探讨Redis支持的各种数据类型&#xff0c;这些类型是Redis强大功能的核心。通过学习不同的数据类型&#xff0c;你将能够根据具体的应用需求选择…

【Spring基础3】- Spring的入门程序

目录 3-1 Spring的下载3-2 Spring的 jar 包3-3 第一个 Spring程序第一步&#xff1a;添加spring context的依赖&#xff0c;pom.xml配置如下第二步&#xff1a;添加junit依赖第三步&#xff1a;定义bean&#xff1a;User第四步&#xff1a;编写spring的配置文件&#xff1a;bea…

技术成神之路:设计模式(十八)适配器模式

介绍 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许接口不兼容的类可以协同工作&#xff0c;通过将一个类的接口转换成客户端所期望的另一个接口&#xff0c;使得原本由于接口不兼容而不能一起工作的类可以一起工作。 1.定义 适配…

python编程开发“人机猜拳”游戏

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

计算机毕业设计 基于深度学习的短视频内容理解与推荐系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

【架构】前台、中台、后台

文章目录 前台、中台、后台1. 前台&#xff08;Frontend&#xff09;特点&#xff1a;技术栈&#xff1a; 2. 中台&#xff08;Middleware&#xff09;特点&#xff1a;技术栈&#xff1a; 3. 后台&#xff08;Backend&#xff09;特点&#xff1a;技术栈&#xff1a; 示例场景…

万界星空科技铜拉丝行业MES系统,实现智能化转型

一、铜拉丝行业生产管理的难点主要体现在以下几个方面&#xff1a; 1、标准严格&#xff1a;铜线产品对质量的要求极高&#xff0c;特别是在电气性能、导电性、耐腐蚀性等方面&#xff0c;任何微小的瑕疵都可能影响产品的使用效果和安全性。 2、过程监控&#xff1a;生产过程…

极速 JavaScript 打包器:esbuild

文章目录 前言什么是esbuild&#xff1f;esbuild如何实现如此出色的性能&#xff1f;基本配置入口文件输出文件模块格式targetplatformexternalbanner和footer 结论 前言 esbuild是一个快速、可扩展的JavaScript打包器和压缩器&#xff0c;它的目标是成为最快的打包器。它使用…

【C++篇】启航——初识C++(下篇)

接上篇【C篇】启航——初识C&#xff08;上篇&#xff09; 目录 一、引用 1.引用的概念 2.引用的基本语法 3.引用的特点 3.1 别名 3.2 不占用额外内存 3.3 必须初始化 3.4 不能为 NULL 4.引用的使用 4.1 函数参数传递 4.2 返回值 4.3 常量引用 5.引用和指针的关…