3.1 基本几何形状

球体（SphereGeometry）

构造函数：

THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)

radius：是半径；

segmentsWidth：经度上的切片数，相当于经度被切成了几瓣；

segmentsHeight：纬度上的切片数，相当于纬度被切成了几层；

phiStart：经度开始的弧度；

phiLength：经度跨过的弧度；

thetaStart：纬度开始的弧度；

thetaLength：纬度跨过的弧度。

分段

在图形底层的实现中，并没有曲线的概念，曲线都是由多个折线近似构成的。当折线越多，越近乎曲线。切片数决定了，图形的“精细度”

经度分段（切片demo）

维度分段（切片demo）

缺省值说明

phiStart、phiLength、thetaStart、thetaLength 这四个值是缺省值，即可以省略，而省略的时候实际有默认值，将画出一个完整的球体。通过不同的值修改，可以实现各种，不完整球体、球面。

例如：

THREE.SphereGeometry(2, 50, 50, Math.PI / 2, Math.PI)

（1/4 个球面）

球体的完整示例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()">

    <canvas id="mainCanvas" width="800px" height="600px"></canvas>

</body>

<script>

    function init() {

        var renderer = new THREE.WebGLRenderer({

            canvas: document.getElementById('mainCanvas')

        });

        renderer.setClearColor(0x000000);

        var scene = new THREE.Scene();

        var aspect = window.innerWidth / window.innerHeight;

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

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

        scene.add(camera);

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

        var cube = new THREE.Mesh(new THREE.SphereGeometry(2, 50, 50),

            new THREE.MeshBasicMaterial({

                color: 0xff0000,

                wireframe: true

            })

        )

        scene.add(cube);

        renderer.render(scene, camera);

    }

</script>

</html>

　　

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

  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. web前端问题整理

    1.常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera (Q2)内核:Trident,Gecko,Prest ...

  2. 选择结构二switch选择结构

     在上一章节我们讲解了if选择结构  本章我们学习 switch选择结构 还要知道if选择结构和switch结构的区别 为什么学习了if选择结构还要学习switch选择结构  以及 两种选择结构的运用 ...

  3. 五分钟完成 ABP vNext 通讯录 App 开发

    五分钟完成 ABP vNext 通讯录 App 开发 ABP vNext(后文简称Abp)是 Volo 公司堪称艺术品级的应用开发框架,它基于领域驱动设计(DDD)的思维,创新地采用了模块化的设计.A ...

  4. java时间切片工具

    项目中经常会遇到根据根据时间区间来查询数据的场景, 如时间跨度大可能相应的sql的执行效率会显著降低, 因此可以对时间区间进行切割成若干个小范围的时间片, 这样不仅可以提高sql的性能还可以做一下并发 ...

  5. 数据库安装和基本sql语句

    数据库概念 文件作为数据进行存储,数据格式千差万别 将保存数据的地方统一起来 MYSQL--------->一款应用软件 用来帮你操作文件的 只要是基于网络通信,底层就是socket 服务端 - ...

  6. 欢乐C++ —— 2. 深复制与浅复制

    1. 简述 ​ 通俗点讲,深复制与浅复制一般对指针而言, ​ 深复制复制指针所指向的内容, ​ 浅复制复制指针的值. 2. 举例 ​ 栗子: ​ 当我们有现在有指针A指向一块数据,和指针B. 深复制- ...

  7. 动态规划-Maximum Subarray-Maximum Sum Circular Subarray

    2020-02-18 20:57:58 一.Maximum Subarray 经典的动态规划问题. 问题描述: 问题求解: public int maxSubArray(int[] nums) { i ...

  8. CF codeforces A. New Year Garland【Educational Codeforces Round 79 (Rated for Div. 2)】

    A. New Year Garland time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. 使用 xposed 突破饿了么 ssl pining

    作为一个对各种黑科技充满好奇心的前端工程师,这一次盯上了现在的外卖大佬-饿了么.这篇文章记录了抓包饿了么过程中碰到的问题,以及解决方案,希望能够大家带来一点收获. 工具 夜神模拟器 + charles ...

  10. innobackupex备份过程（有图有真相）

    innobackupex命令构成: 1. Innobackupex内部封装了xtrabackup和mysqldump命令: 2. Xtrabackup是用来备份innoDB表的,内部实现对innoDB ...