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. ReentrantLock 源码分析以及 AQS （一）

    前言 JDK1.5 之后发布了JUC(java.util.concurrent),用于解决多线程并发问题.AQS 是一个特别重要的同步框架,很多同步类都借助于 AQS 实现了对线程同步状态的管理. A ...

  2. 【python系统学习10】布尔值

    python的数据类型有好多个,前边写过字符串.整数和浮点数这三种. 本节来整理另一种简单数据类型--布尔值 布尔值(bool) 布尔值和其数据值 计算机可以用数据进行判断,若判断为真则执行特定条件中 ...

  3. C++ 指针实现字符串倒序排列

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <coni ...

  4. pyppepeer淘宝登录

    代码: import time import random import asyncio import pyppeteer class LoginTaoBao: """ ...

  5. [日志分析]Graylog2采集Nginx日志 被动方式

    graylog可以通过两种方式采集nginx日志,一种是通过Graylog Collector Sidecar进行采集(主动方式),另外是通过修改nginx配置文件的方式进行收集(被动方式). 这次说 ...

  6. The Game Of Life – 数据结构与算法的敲门砖

    The Game Of Life(生命游戏,又称为细胞自动机)几乎是所有数据结构与算法导论教程前言的一个很经典的程序了.这是一个零玩家游戏,发生在一个平面网格里.每个格子的细胞都有死亡和存活两种状态, ...

  7. java-乘法口诀表。（新手）

    //创建的一个包名. package qige; //定义一个类. public class KJ { //公共静态的一个主方法. public static void main(String[] a ...

  8. 金三银四，还在为spring源码发愁吗？bean生命周期，看了这篇就够了

    第一,这绝对是一个面试高频题. 比第一还重要的第二,这绝对是一个让人爱恨交加的面试题.为什么这么说?我觉得可以从三个方面来说: 先说会不会.看过源码的人,这个不难:没看过源码的人,无论是学.硬背.还是 ...

  9. python报错：ERROR: No matching distribution found for dns.resolver

    可能有的小伙伴在安装dns.resolver的时候会遇到这个问题: 我百度的时候别人是: pip install dns-python 但是我这样安装也还是错误.有些时候是这个包改名了所以你没有搜索到 ...

  10. 启动/关闭oracle服务

    写一个脚本就可以很方便的打开服务和关闭服务,但是记住要以管理员的身份运行哦! 首先建立两个文件:启动.txt 和关闭.txt [在下面代码里启动的服务名称可能版本不一样,有可能名字不一样,自己对照看看 ...