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

在 Three.js 中,CylinderGeometry是用于创建圆柱体几何形状的类。圆柱体在三维图形中是一种常见的基本形状。使用CylinderGeometry可以方便地创建各种不同尺寸和外观的圆柱体,可应用于构建机械模型、建筑结构、柱状物体等场景。

  • radiusTop:圆柱体顶部的半径,默认为 1。决定了圆柱体顶部圆面的大小。
  • radiusBottom :圆柱体底部的半径,默认为 1。如果与radiusTop不同,可以创建圆锥台形状。
  • height:圆柱体的高度,默认为 1。决定了圆柱体在垂直方向上的长度。
  • radialSegments:圆柱体侧面的分段数,默认为 8。增加这个值可以使圆柱体侧面更加光滑。
  • heightSegments:圆柱体高度方向上的分段数,默认为 1。增加这个值可以使圆柱体在高度方向上更加平滑。
  • openEnded:一个布尔值,默认为 false。如果设置为 true,圆柱体的顶部和底部将不会被封闭,可以创建空心的圆柱体或部分圆柱体。
  • thetaStart:起始角度,以弧度表示,默认为 0。用于控制圆柱体侧面的起始位置。
  • thetaLength:侧面的弧度长度,默认为 2π。决定了圆柱体侧面展开的角度范围。

这里只选用部分参数来实现,代码如下:

复制代码
    initCylinderGeometry(){ //创建圆柱体
      const geometry = new THREE.CylinderGeometry( 1, 1, 1, 32);
      const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC'} ); //创建材质,颜色为白色#CCCCCC
      const cylinder = new THREE.Mesh( geometry, material ); //通过geometry和材质创建网格模型
      this.scene.add( cylinder );//将网格模型添加到场景中
    },

效果:

但是因为颜色会纯色,看不出立体效果,我们将材质修改为只显示框架,只需要将材质修改为:

复制代码
const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC',wireframe:true} ); //创建材质,颜色为白色#CCCCCC

另外此方式也可以做成圆台体,只需要将上下的半径调整为不一致,

复制代码
const geometry = new THREE.CylinderGeometry( 1, 2, 1, 32);
相关推荐
宇钶宇夕10 小时前
图像处理第二篇:初级篇 —— 选择镜头的基础知识及对图像处理的影响
运维·数码相机·程序人生·自动化
格林威15 小时前
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现裂缝的检测识别(C#代码UI界面版)
人工智能·深度学习·数码相机·yolo·计算机视觉
宇钶宇夕17 小时前
图像处理中级篇 [1]—— 彩色照相机的效果与预处理
人工智能·数码相机·计算机视觉
一起搞IT吧18 小时前
Camera相机人脸识别系列专题分析之十九:MTK ISP6S平台FDNode传递三方FFD到APP流程解析
android·图像处理·人工智能·数码相机·计算机视觉
shanks6618 小时前
【图像处理】直方图均衡化c++实现
c++·图像处理·数码相机
双翌视觉1 天前
智能制造的空间度量:机器视觉标定技术解析
数码相机·计算机视觉·视觉标定
中达瑞和-高光谱·多光谱1 天前
多光谱相机助力第四次全国农业普查-农业用地调查
数码相机
lingling0091 天前
三维扫描相机:工业自动化的智慧之眼——迁移科技赋能智能制造新纪元
数码相机
还债大湿兄2 天前
3D游戏引擎的“眼睛“:相机系统深度揭秘与技术实现
数码相机·3d·游戏引擎
Bryce李小白3 天前
Flutter实现Android原生相机拍照
android·数码相机·flutter