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. markdown简明语法1

    目录 Cmd Markdown 简明语法手册 1. 斜体和粗体 2. 分级标题 3. 外链接 4. 无序列表 5. 有序列表 6. 文字引用 7. 行内代码块 8. 代码块 9. 插入图像 Cmd M ...

  2. 一次 Druid 连接池泄露引发的血案！

    最近某个应用程序老是卡,需要重启才能解决问题,导致被各种投诉,排查问题是 Druid 连接池泄露引发的血案.. 异常日志如下: ERROR - com.alibaba.druid.pool.GetCo ...

  3. C# Socket编程实现简单的局域网聊天器

    目录 前言 编码 服务端监听接口 客户端连接接口 文字发送接口 文件发送接口 信息接收接口(文字与文件) 使用 注意事项 源码 前言 最近在学习C# Socket相关的知识,学习之余,动手做了一个简单 ...

  4. Js中的window.parent ,window.top,window.self 了解

    在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...

  5. mysql那些事之索引篇

    mysql那些事之索引篇 上一篇博客已经简单从广的方面介绍了一下mysql整体架构以及物理结构的内容. 本篇博客的内容是mysql的索引,索引无论是在面试还是我们日常工作中都是非常的重要一环. 索引是 ...

  6. ssh 公钥 下载选择的时候 下拉选择 ssh 然后 git clone

    ssh 公钥 下载选择的时候 下拉选择 ssh 然后 git clone

  7. 使用 C# 和 OpenGL (SharpGL) 实现的一个简易画图版

    原文地址:https://billc.io/2019/10/fpainter/ 计算机图形学的第一个大作业是用 OpenGL 或 DirectX3d 实现一个平面的画图,应当具备直线和圆形的功能.正好 ...

  8. Java多线程详解（转载）

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用 ...

  9. 聊聊OkHttp实现WebSocket细节，包括鉴权和长连接保活及其原理！

    一.序 OkHttp 应该算是 Android 中使用最广泛的网络库了,我们通常会利用它来实现 HTTP 请求,但是实际上它还可以支持 WebSocket,并且使用起来还非常的便捷. 那本文就来聊聊, ...

  10. Quantitative Proteomics of Enriched Esophageal and Gut Tissues from the Human Blood Fluke Schistosoma mansoni Pinpoints Secreted Proteins for Vaccine Development （解读人：张聪敏）

    文献名:Quantitative Proteomics of Enriched Esophageal and Gut Tissues from the Human Blood Fluke Schist ...