3.1 基本几何形状

圆柱体（CylinderGeometry）

构造函数：

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)

radiusTop：顶面的半径；

radiusBottom：底面的半径；

height：是圆柱体的高度；

radiusSegments：两底面的分段切片；

heightSegments：侧面的分段切片；

openEnded：是一个布尔值，表示是否没有顶面和底面，缺省值为false，表示有顶面和底面。

标准圆柱体

例如，new THREE.CylinderGeometry(2, 2, 4, 20, 20, false)，将创建一个上下底面半径为2，高度为4，其各面的切片为20，有底面。
 

一点说明：

由于圆柱体的参数特性，我们可以想，其实可以组合出很多其他的图形

例如：

圆台

例如，new THREE.CylinderGeometry(2, 3, 4, 18, 3)，将创建一个上底面半径为2，下地面半径为3，高度为4，底面的分段切片为18，侧面为3。

圆锥

例如，new THREE.CylinderGeometry(0, 3, 6, 18, 3, false)

棱锥

等等.....

一个标准圆柱体的代码示例demo以及效果图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script type="text/javascript" src="./three.js"></script>

    <title>Document</title>

</head>

<body onload="init()">

    <!-- 页面加载触发init()初始化函数， -->

    <script>

        function init() {

            //渲染器

            var renderer = new THREE.WebGLRenderer();

            renderer.setSize(800, 600);

            document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

            renderer.setClearColor(0x00000);

            //场景

            var scene = new THREE.Scene();

            var aspect = window.innerWidth / window.innerHeight;

            //相机

            var camera = new THREE.OrthographicCamera(-4 * aspect, 4 * aspect, -3 * aspect, 3 * aspect, 1, 500);

            camera.position.set(0, 0, 200);

            camera.lookAt(new THREE.Vector3(0, 0, 0));

            scene.add(camera);

            var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 50, Math.PI, Math.PI / 3 * 4),

                new THREE.MeshBasicMaterial({

                    color: 0xff0000,

                    wireframe: true

                })

            )

            scene.add(circle)

                //触发渲染

            renderer.render(scene, camera);

        }

    </script>

</body>

</html>

　　

《Three.js 入门指南》3.1.1 - 基本几何形状 -圆柱体（CylinderGeometry）的更多相关文章

  1. d3.js 入门指南 - 仪表盘

    D3的全称是Data-Driven Documents(数据驱动的文档),是一个用来做数据可视化的JavaScript函数库,而JavaScript文件的后缀通常为.js,所以D3被称为D3.js. ...

  2. d3.js 入门指南

    说到数据可视化,我们会行到很多优秀的框架,像echarts.highcharts,这些框架很优雅,健壮,能满足我们对可视化的大部分需求,但是缺点也很明显,就是这些框架几乎是不可定制化的,当遇到特殊的需 ...

  3. 《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件（轨道控制）实现模型控制

    3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制) 说明 本节内容属于插入节,<Three.js入门指南>这本书中,只是简单的介绍了一些概念,是一本基础的入 ...

  4. 《Three.js 入门指南》3.0 - 代码构建的最基本结构。

    3.0 代码构建的最基本结构 说明: 我们必需首先知道,Three.js 的一些入门级概念: 我们需要知道,OpenGL 是一套三维实现的标准,为什么说是标准,因为它是跨平台,跨语言的.甚至CAD以及 ...

  5. 《Three.js 入门指南》0 - 说明

    本笔记,摘自:<Three.js 入门指南>一书 地址链接为:https://www.ituring.com.cn/book/miniarticle/58552 本书的前言摘录: 本书结构 ...

  6. Vue.js 入门指南之“前传”（含sublime text 3 配置）

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  7. 系列博文-Three.js入门指南(张雯莉)-静态demo和three.js功能概览

    一:一个最简单的静态DEMO //body加载完后触发init() //WebGL的渲染是需要HTML5 Canvas元素的,你可以手动在HTML的<body>部分中定义Canvas元素, ...

  8. 《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环结（TorusKnotGeometry）

    3.1 基本几何形状 圆环结(TorusKnotGeometry) 构造函数 THREE.TorusKnotGeometry(radius, tube, radialSegments, tubular ...

  9. 《Three.js 入门指南》3.1.1 - 基本几何形状 -圆环面（TorusGeometry）

    3.1 基本几何形状 圆环面(TorusGeometry) 构造函数 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments ...

随机推荐

  1. EF多租户实例：如何快速实现和同时支持多个DbContext

    前言 上一篇随笔我们谈到了多租户模式,通过多租户模式的演化的例子.大致归纳和总结了几种模式的表现形式. 并且顺带提到了读写分离. 通过好几次的代码调整,使得这个库更加通用.今天我们聊聊怎么通过该类库快 ...

  2. SQL中rownumber的用法

    1)一次排名: 语法:row_number() over(order by 字段 desc/asc):按照某个字段排名 1.1.查询语句: 1.2.查询结果:查询结果按照薪水进行排名 2)先分组后排名 ...

  3. Silence主题 美观清爽的cnblog第三方主题

    为什么推荐? 才开通cnblog,但苦于官方主题都不是很好看,翻找Github的时候发现了这个项目Silence 这是预览地址 官方展示图片 安装中的坑 不显示公共模块.博文目录.博文签名.博文赞赏. ...

  4. 一文带你解读：卷积神经网络自动判读胸部CT图像的机器学习原理

    本文介绍了利用机器学习实现胸部CT扫描图像自动判读的任务,这对我来说是一个有趣的课题,因为它是我博士论文研究的重点.这篇文章的主要参考资料是我最近的预印本 “Machine-Learning-Base ...

  5. Jenkins的凭证管理

    Jenkins的凭证管理 什么是凭证? 凭证(cridential)是Jenkins进行受限操作时的凭据.比如使用SSH登录远程机器时,用户名和密码或SSH key就是凭证.而这些凭证不可能以明文写在 ...

  6. 「踩坑记」Android API 判断权限申请结果的闪退问题

    这几天尝试着用Android Studio写一个小工具的时候遇到了一个动态权限申请的问题.权限的申请使用的语句为: ActivityCompat.requestPermissions(this, ne ...

  7. STM32时钟配置方法

    一.在STM32中,有五个时钟源,为HSI.HSE.LSI.LSE.PLL. ①HSI是高速内部时钟,RC振荡器,频率为8MHz. ②HSE是高速外部时钟,可接石英/陶瓷谐振器,或者接外部时钟源,频率 ...

  8. Linux常用命令总结（一）

    一.cd命令 用于切换当前目录,类似与win的命令.它可以切换到绝对路径,也可以是相对路径. cd  /root/Doce  # 切换到绝对路径/root/Doce目录下 cd ./path  # 切 ...

  9. iOS/macOS推荐个高效苹果开发工具， JSON 转模型代码工具，不再为复杂JSON数据写模型而烦恼，支持Swift/Objective-C，极速转换

    CCJSON 是一款运行在macOS上 JSON 转模型代码工具,不再为复杂JSON数据写模型而烦恼,可识别嵌套模型,字典/数组,支持Swift/Objective-C,操作方便,极速转换.下载 效果 ...

  10. 循序渐进地聊一聊 box-shaow

    影子在现实生活中可以是一个物体的副本,在 CSS 中也是这样的,相当于复制了那个元素(并不是真正的元素,对页面布局没有任何影响),可以从下面的代码中看出来. .container { width: 1 ...