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 ...

随机推荐

angular中因异步问题产生的错误解决方法
方法一 private userTaskList(){ let auth = this.make_basic_auth("kermit","kermit"); ...
go tcp
TCP编程 1.客户端和服务器 2.服务端的处理流程监听端口接收客户端的链接创建goroutine,处理该链接 3.客户端的处理流程建立与服务端的链接进行数据收发关闭链接服务端代码 pa ...
Markdown Cheatsheet
This is intended as a quick reference and showcase. For more complete info, see John Gruber's origin ...
HTML第五耍表格标签
HTML标记语言中可以使用table标签创建表格. 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),字母 tr 指表格数据(table row ...
快速傅里叶变换(Fast Fourier Transform, FFT)和短时傅里叶变换(short-time Fourier transform,STFT )【资料整理】【自用】
1. 官方形象展示FFT:https://www.bilibili.com/video/av19141078/?spm_id_from=333.788.b_636f6d6d656e74.6 2. 讲解 ...
spring拦截器中修改响应消息头
问题描述前后端分离的项目,前端使用Vue,后端使用Spring MVC. 显然,需要解决浏览器跨域访问数据限制的问题,在此使用CROS协议解决. 由于该项目我在中期加入的,主要负责集成shiro框架 ...
4.mysql(slow_log/generic_log/audit)
一.慢查询日志进阶 <1>相关参数 1.slow_query_log #是否开启慢查询日志 2.slow_query_log_file #慢查询日志文件名,在my.cnf我们已经定义为sl ...
使用select正确处理EOF的str_cli函数
void str_cli(FILE *fp, int sockfd) { int maxfdp1, stdineof; fd_set rset; char buf[MAXLINE]; int n; s ...
vivalidi 一款由Web技术诞生的Web浏览器
vivalidi https://vivaldi.com/ A million ways to customize everything The world is a colorful place b ...
如何使用xss带cookie
参考连接:https://pentesterlab.com/exercises/xss_and_mysql_file/course 打开测试网站: 然后在192.168.1.46机器上使用socat, ...

Three.js基础探寻四——立方体、平面与球体

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

随机推荐

热门专题