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. OpenWrt tcpdump 抓包

    路由器用的是 网件的 4300 刷的是石像鬼双固件 1, 安装支持库opkg updateopkg install libpcapopkg install tcpdump 2, 设置条件开始捕获tcp ...

  2. 【5min+】 一个令牌走天下！.Net Core中的ChangeToken

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  3. 数据结构 - ArrayList

    简介 ArrayList是一个动态数组.ArrayList几乎拥有数组所有优点,例如元素有序,索引访问等:并且一般情况下它还不会越界,添加元素时它能动态扩容.平时工作中ArrayList被我们广泛应用 ...

  4. mysql8 修改root密码

    Navicat工具里选中mysql数据库 执行: ALTER user 'root'@'localhost' IDENTIFIED BY 'newpassward'; //newpassward 新密 ...

  5. 从零开始学习R语言（八）——R语言绘图

    本文首发于知乎专栏:https://zhuanlan.zhihu.com/p/74051739 也同步更新于我的个人博客:https://www.cnblogs.com/nickwu/p/125683 ...

  6. spring的ioc依赖注入的三种方法(xml方式)

    常见的依赖注入方法有三种:构造函数注入.set方法注入.使用P名称空间注入数据.另外说明下注入集合属性 先来说下最常用的那个注入方法吧. 一.set方法注入 顾名思义,就是在类中提供需要注入成员的 s ...

  7. K：剑指offer-56 题解 谁说数字电路的知识不能用到算法中？从次数统计到数字电路公式推导，一文包你全懂

    前言: 本题解整理了一位大佬在leetcode中的代码的方法,该博文致力于让所有人都能够能够看懂该方法.为此,本题解将从统计数字出现次数的解题方式开始讲起,再推导出逐位统计的解题方式,期望以循序渐进的 ...

  8. CF1327A Sum of Odd Integers 题解

    原题链接 简要题意: 多组数据,问能否把 \(n\) 分为 \(k\) 个 不同的 正奇数之和. 盲猜数学结论题. 只要考虑两个问题: \(n\) 的大小是否足够. \(n\) 的奇偶性是否满足. 对 ...

  9. 题解 P1457 【城堡 The Castle】

    来讨论区大摇大摆地逛了一圈后,我发现竟然大家的代码 都很长 然而代码真的要写那么长吗 首先,来分析问题,1,2,4,8,这些数显然是有特点的,也许你已经想到了没错,它们都是2的次方数. 1是2的0次方 ...

  10. 死磕Lambda表达式（五）：Comparator复合

    给岁月以文明,而不是给文明以岁月.--<三体> 在上一篇文章(传送门)中介绍了JDK为我们提供的常用函数式接口,JDK不仅提供的这些函数式接口,其中一些接口还为我们提供了实用的默认方法,这 ...