Three.js基础探寻四——立方体、平面与球体
前面简单介绍了webGL和Three.js的背景以及照相机的设定，接下来介绍一些Three.js中的几何形状。
1.立方体
虽然这一形状的名字叫立方体（CubeGeometry），但它其实是长方体，也就是长宽高可以设置为不同的值。其构造函数是：
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
width：x方向上的长度
height：y方向上的长度
depth：z方向上的长度
widthSegments：x方向上的分段数（可选，缺省值1）
heightSegments：y方向上的分段数（同上）
depthSegments：z方向上的分段数（同上）
未分段：
var material = new THREE.MeshBasicMaterial({
color: 0xffff00,
wireframe: true
});
drawCube(scene, material);
function drawCube(scene, material) {
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material);
scene.add(cube);
}
物体的默认位置是原点，对于立方体而言，是其几何中心在原点的位置。
分段：
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
为什么会有这么多邪线呢？版本问题。R73版本：
注意这个分段是对六个面进行分段，而不是对立方体的体素分段，因此在立方体的中间是不分段的，只有六个侧面被分段。
2.平面
这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面。其构造函数为：
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
width：x方向上的长度
height：y方向上的长度
widthSegments：x方向上的分段数（可选，缺省值1）
heightSegments：y方向上的分段数（同上）
new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内，效果如下：
3.球体
球体（SphereGeometry）的构造函数是：
THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength) // radius：半径 // segmentsWidth：经度上的分段数 // segmentsHeight：纬度上的分段数 // phiStart：经度开始的弧度 // phiLength：经度跨过的弧度 // thetaStart：纬度开始的弧度 // thetaLength：纬度跨过的弧度
3.1 经纬度分段数
首先，我们来理解下segmentsWidth和segmentsHeight。使用var sphere = new THREE.SphereGeometry(3, 8, 6)可以创建一个半径为3，经度划分成8份，纬度划分成6份的球体，如下图所示。
segmentsWidth相当于经度被切成了几瓣，而segmentsHeight相当于纬度被切成了几层。
new THREE.SphereGeometry(3, 5, 4)的效果：
new THREE.SphereGeometry(3, 8, 6)的效果：
new THREE.SphereGeometry(3, 18, 12)的效果：
在图形底层的实现中，并没有曲线的概念，曲线都是由多个折线近似构成的。对于球体而言，当这两个值较大的时候，形成的多面体就可以近似看做是球体了。
3.2 经度弧度
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)表示起始经度为Math.PI / 6，经度跨度为Math.PI / 3。效果如下：
注意，这里segmentsWidth为8意味着对于经度从Math.PI / 6跨过Math.PI / 3的区域内划分为8块，而不是整个球体的经度划分成8块后再判断在此经度范围内的部分。
3.3 纬度弧度
纬度弧度同理。new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3)表示纬度从Math.PI / 6跨过Math.PI / 3。效果如下：
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)的效果：
4.源码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>3.js测试四</title>
6 </head>
7 <body onload="init()">
8 <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
9 </body>
10 <script type="text/javascript" src="js/three.min.js"></script>
11 <script type="text/javascript">
12 function init() {
13 var renderer = new THREE.WebGLRenderer({
14 canvas: document.getElementById('mainCanvas')
15 });
16 renderer.setClearColor(0x000000);
17 var scene = new THREE.Scene();
18
19 // camera
20 var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
21 camera.position.set(25, 25, 25);
22 camera.lookAt(new THREE.Vector3(0, 0, 0));
23 scene.add(camera);
24
25 // 材质
26 var material = new THREE.MeshBasicMaterial({
27 color: 0xffff00,
28 wireframe: true
29 });
30
31 drawCube(scene, material); //立方体
32 // drawPlane(scene, material); //平面
33 // drawSphere(scene, material); //球体
34
35 // render
36 renderer.render(scene, camera);
37 }
38
39 function drawCube(scene, material) {
40 var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
41 scene.add(cube);
42 }
43
44 function drawPlane(scene, material) {
45 var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material);
46 scene.add(plane);
47 }
48
49 function drawSphere(scene, material) {
50 var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);
51 // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material);
52 // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
53 // var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
54 scene.add(sphere);
55 }
56 </script>
57 </html>
整理自张雯莉《Three.js入门指南》
Three.js基础探寻四——立方体、平面与球体的更多相关文章
- Three.js基础探寻一
1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...
- Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
- Three.js基础探寻三——透视投影照相机
本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...
- Three.js基础探寻五——正二十面体、圆环面等
除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...
- js基础教程四之无缝滚动
前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...
- Three.js基础探寻九——网格
在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...
- Node.js基础学习四之注册功能
前言:在Node.js学习(二)和(三)中介绍了如何在Node.js 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端 需求:实现注册功能 为了区分登录和注册是两个不同的请求,在端口后面加上 ...
- Three.js基础探寻六——文字形状与自定义形状
1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...
- Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...
随机推荐
- Spring Cloud构建微服务架构（六）高可用服务注册中心
http://blog.didispace.com/springcloud6/ https://www.jianshu.com/p/df9393755a05 http://www.ityouknow. ...
- jquery validate 详解一
原文:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html jQuery校验官网地址:http://bassistance.de/jquery-pl ...
- Web前端框架与移动应用开发第七章
1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...
- 2018牛客网暑期ACM多校训练营（第一场）E Removal（DP）
题意 给你一个大小为n的数组,你可以删掉数组中的任意m个数,问你在删除m个数之后剩下的数组有多少种.(其中数组的每个数的大小<=k) 分析 显然需要动态规划,而k又很小,所以二维dp没问题. 设 ...
- 致备战noip2018的勇士
戒骄戒躁,自律当先.稳扎稳打,颗粒归仓.目标高远,落实当下.无惧将来,无畏过往.愿你们承担一份荣耀,愿你们书写一段辉煌.——致备战noip2018的你们 ——退役学姐致gryz备战中的勇士 ——lpy ...
- python学习路线--从入门到入土
入门技术博客 进阶自己挑选 入门基础 Python入门相对容易又可以干很多事(网站,运维,数据,爬虫等),是一门方便的工具语言.2016年TIOBE排名显示Python已经名列第四,成为脚本语言之首. ...
- idea整合SVN以及SVN的使用
idea整合SVN以及SVN的使用: 1:下载插件: 运行并安装: 安装后的目录: 2-1 打开bin目录 :复制svn.exe的文件路径: 2:打开IDEA的File-->setting: o ...
- oracle字符串提取记录
背景:需要限制用户操作次数,而用户操作次数只有统一的日志表有记录. 并且,因为在批量查询中也需做限制,所有需要一次查询多条数据,保证效率.后来采用视图做的 视图 instr 查找字符串,返回起始坐标, ...
- Map接口、HashMap类、LinkedHashSet类
java.util.Map<K, V>接口 双列集合,key不可以重复 Map方法: 1.public V put(K key, V value):键值对添加到map,如果key不重复返回 ...
- 【转载】C#：使用双缓冲让界面绘制图形时避免闪烁
https://blog.csdn.net/fujie724/article/details/5767064#