Threejs创建正多边体

简介: 这篇文章介绍了在Three.js中创建正多边形体(如正四面体、正八面体等)的方法,包括生成多边形几何体、设置表面材质以及将它们添加到场景中的步骤。

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

 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 );
    },

效果如下:

相关文章
|
27天前
|
人工智能
AniDoc:蚂蚁集团开源 2D 动画上色 AI 模型,基于视频扩散模型自动将草图序列转换成彩色动画,保持动画的连贯性
AniDoc 是一款基于视频扩散模型的 2D 动画上色 AI 模型,能够自动将草图序列转换为彩色动画。该模型通过对应匹配技术和背景增强策略,实现了色彩和风格的准确传递,适用于动画制作、游戏开发和数字艺术创作等多个领域。
99 16
AniDoc:蚂蚁集团开源 2D 动画上色 AI 模型,基于视频扩散模型自动将草图序列转换成彩色动画,保持动画的连贯性
|
1月前
|
机器学习/深度学习 人工智能
Leffa:Meta AI 开源精确控制人物外观和姿势的图像生成框架,在生成穿着的同时保持人物特征
Leffa 是 Meta 开源的图像生成框架,通过引入流场学习在注意力机制中精确控制人物的外观和姿势。该框架不增加额外参数和推理成本,适用于多种扩散模型,展现了良好的模型无关性和泛化能力。
77 11
Leffa:Meta AI 开源精确控制人物外观和姿势的图像生成框架,在生成穿着的同时保持人物特征
|
1月前
|
机器学习/深度学习 人工智能 编解码
OminiControl:AI图像生成框架,实现图像主题控制和空间精确控制
OminiControl 是一个高度通用且参数高效的 AI 图像生成框架,专为扩散变换器模型设计,能够实现图像主题控制和空间精确控制。该框架通过引入极少量的额外参数(0.1%),支持主题驱动控制和空间对齐控制,适用于多种图像生成任务。
76 10
OminiControl:AI图像生成框架,实现图像主题控制和空间精确控制
|
3月前
Threejs创建胶囊体
这篇文章介绍了在Three.js中创建胶囊体(两端为半球形中间为圆柱形的模型)的方法,包括建立几何体、设置材质以及将其添加到场景中的步骤。
46 1
Threejs创建胶囊体
|
3月前
|
JavaScript 前端开发 开发者
ThreeJs控制模型骨骼实现数字人
这篇文章讲解了如何使用Three.js通过控制模型的骨骼来实现数字人的动态表现,包括加载模型、获取骨骼信息以及通过编程控制骨骼动作的具体方法。
366 1
|
JSON 数据格式 Python
调用天空分割后拿到前景图怎么使用
调用天空分割后拿到前景图怎么使用
67 2
|
7月前
|
图形学
【unity小技巧】unity3D寻路指示轨迹预测
【unity小技巧】unity3D寻路指示轨迹预测
101 0
|
8月前
|
人工智能 UED
“视觉AI任意门”AnyDoor,只需点两下鼠标就可以实现任意场景物体交换
【2月更文挑战第17天】“视觉AI任意门”AnyDoor,只需点两下鼠标就可以实现任意场景物体交换
382 1
“视觉AI任意门”AnyDoor,只需点两下鼠标就可以实现任意场景物体交换
|
8月前
|
人工智能 异构计算 Python
字节跳动最新研究AI项目:一张图片组合一组动作就可以生成毫无违和感的视频!
字节跳动最新研究AI项目:一张图片组合一组动作就可以生成毫无违和感的视频!
175 0
|
数据可视化 物联网
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息
976 15
Threejs物联网,养殖场3D可视化(三)模型展示,轨道控制器设置,模型沿着路线运动,模型添加边框,自定义样式显示标签,点击模型获取信息