前面简单介绍了webGL和Three.js的背景以及照相机的设定，接下来介绍一些Three.js中的几何形状。

1.立方体

　　虽然这一形状的名字叫立方体（CubeGeometry），但它其实是长方体，也就是长宽高可以设置为不同的值。其构造函数是：

  1. THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)

　　width：x方向上的长度

　　height：y方向上的长度

　　depth：z方向上的长度

　　widthSegments：x方向上的分段数（可选，缺省值1）

　　heightSegments：y方向上的分段数（同上）

　　depthSegments：z方向上的分段数（同上）

　　未分段：

  1. var material = new THREE.MeshBasicMaterial({
  2.  
  3. 　　color: 0xffff00,
  4.  
  5. 　　wireframe: true
  6.  
  7. });
  8.  
  9. drawCube(scene, material);
  10.  
  11. function drawCube(scene, material) {
  12.  
  13. 　　var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3), material);
  14.  
  15. 　　scene.add(cube);
  16.  
  17. }

　　物体的默认位置是原点，对于立方体而言，是其几何中心在原点的位置。

　　分段：

  1. var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);

　　为什么会有这么多邪线呢？版本问题。R73版本：

　　注意这个分段是对六个面进行分段，而不是对立方体的体素分段，因此在立方体的中间是不分段的，只有六个侧面被分段。

2.平面

　　这里的平面（PlaneGeometry）其实是一个长方形，而不是数学意义上无限大小的平面。其构造函数为：

  1. THREE.PlaneGeometry(width, height, widthSegments, heightSegments)

　　width：x方向上的长度

　　height：y方向上的长度

　　widthSegments：x方向上的分段数（可选，缺省值1）

　　heightSegments：y方向上的分段数（同上）

　　new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内，效果如下：

3.球体

　　球体（SphereGeometry）的构造函数是：

  1. THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart, phiLength, thetaStart, thetaLength)
  2.  
  3. // radius：半径
  4.  
  5. // segmentsWidth：经度上的分段数
  6.  
  7. // segmentsHeight：纬度上的分段数
  8.  
  9. // phiStart：经度开始的弧度
  10.  
  11. // phiLength：经度跨过的弧度
  12.  
  13. // thetaStart：纬度开始的弧度
  14.  
  15. // 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.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3     <head>
  4.  4         <meta charset="UTF-8">
  5.  5         <title>3.js测试四</title>
  6.  6     </head>
  7.  7     <body onload="init()">
  8.  8         <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  9.  9     </body>
  10. 10     <script type="text/javascript" src="js/three.min.js"></script>
  11. 11     <script type="text/javascript">
  12. 12         function init() {
  13. 13             var renderer = new THREE.WebGLRenderer({
  14. 14                 canvas: document.getElementById('mainCanvas')
  15. 15             });
  16. 16             renderer.setClearColor(0x000000);
  17. 17             var scene = new THREE.Scene();
  18. 18
  19. 19             // camera
  20. 20             var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
  21. 21             camera.position.set(25, 25, 25);
  22. 22             camera.lookAt(new THREE.Vector3(0, 0, 0));
  23. 23             scene.add(camera);
  24. 24
  25. 25             // 材质
  26. 26             var material = new THREE.MeshBasicMaterial({
  27. 27                 color: 0xffff00,
  28. 28                 wireframe: true
  29. 29             });
  30. 30
  31. 31             drawCube(scene, material);        //立方体
  32. 32 //          drawPlane(scene, material);        //平面
  33. 33 //          drawSphere(scene, material);    //球体
  34. 34
  35. 35             // render
  36. 36             renderer.render(scene, camera);
  37. 37         }
  38. 38
  39. 39         function drawCube(scene, material) {
  40. 40             var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
  41. 41             scene.add(cube);
  42. 42         }
  43. 43
  44. 44         function drawPlane(scene, material) {
  45. 45             var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material);
  46. 46             scene.add(plane);
  47. 47         }
  48. 48
  49. 49         function drawSphere(scene, material) {
  50. 50             var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);
  51. 51 //          var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material);
  52. 52 //          var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
  53. 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. 54             scene.add(sphere);
  55. 55         }
  56. 56     </script>
  57. 57 </html>

整理自张雯莉《Three.js入门指南》

Three.js基础探寻四——立方体、平面与球体的更多相关文章

  1. Three.js基础探寻一

    1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...

  2. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  3. Three.js基础探寻三——透视投影照相机

    本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...

  4. Three.js基础探寻五——正二十面体、圆环面等

    除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...

  5. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

  6. Three.js基础探寻九——网格

    在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...

  7. Node.js基础学习四之注册功能

    前言:在Node.js学习(二)和(三)中介绍了如何在Node.js 中获取登录的用户名和密码与数据库进行验证并返回数据给客户端 需求:实现注册功能 为了区分登录和注册是两个不同的请求,在端口后面加上 ...

  8. Three.js基础探寻六——文字形状与自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

  9. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

随机推荐

  1. opencv: 基本知识(二）；

    1.cvArr* 与 cv::Mat之间的转换; cv::Mat ---- > cvArr* cv::Mat img; IplImage temp = IplImage(img); cvArr ...

  2. Java基础构造方法和this关键字整理

    构造方法 8.1构造方法介绍 构造方法的格式: 修饰符 构造方法名(参数列表) { } l  构造方法的体现: n  构造方法没有返回值类型.也不需要写返回值.因为它是为构建对象的,对象创建完,方法就 ...

  3. 《Kafka权威指南》读书笔记-操作系统调优篇

    <Kafka权威指南>读书笔记-操作系统调优篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大部分Linux发行版默认的内核调优参数配置已经能够满足大多数应用程序的运 ...

  4. Centos7下安装OpenLDAP+Phpldapadmin及主主同步

    1.环境介绍及初始化准备 server1:172.16.138.87 openldap01 server2:172.16.138.88 openldap02 配置yum源 wget -O /etc/y ...

  5. javasrcipt的作用域和闭包（二）续篇之：函数内部提升机制与Variable Object

    一个先有鸡还是先有蛋的问题,先看一段代码: a = 2; var a; console.log(a); 通常我们都说JavaScript代码是由上到下一行一行执行,但实际这段代码输出的结果是2.但这段 ...

  6. 【1】【leetcode-33，81】 搜索旋转排序数组

    (没思路) 33. 搜索旋转排序数组 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给 ...

  7. SSM框架的搭建和测试（Spring+Spring MVC+MyBatis）

    Spring MVC:MVC框架,通过Model-View-Controller模式很好的将数据,业务与展现进行分离. MyBatis:数据持久层框架 我这里使用的是MyEclipse 2016 CI ...

  8. plsql developer 11 + Oracle 11g 开发环境setup

    这是一个很水的博客, 介绍搭建plsql developer 11+ Oracle 11g 开发环境. 1. 本机上安装Oracle 11g express 对于开发足够了, 300MB的下载文件, ...

  9. c#调用WebService实例

    在Winform中对数据库进行操作缺乏安全性,因而可以使用Winform调用WebService来实现对数据库的各种操作.在VS2010中,创建一个Web服务程序,第一:创建一个空的Web应用程序,名 ...

  10. mybatis-configxml样板

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configuration PUBLIC & ...