Three.js学习之几何形状


Posted in Javascript onAugust 01, 2016

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);

}

Three.js学习之几何形状

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

分段:

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

Three.js学习之几何形状

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

 Three.js学习之几何形状

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

2.平面

这里的平面(PlaneGeometry)其实是一个长方形,而不是数学意义上无限大小的平面。其构造函数为:

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

width:x方向上的长度

height:y方向上的长度

widthSegments:x方向上的分段数(可选,缺省值1)

heightSegments:y方向上的分段数(同上)

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

 Three.js学习之几何形状

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份的球体,如下图所示。

 Three.js学习之几何形状

segmentsWidth相当于经度被切成了几瓣,而segmentsHeight相当于纬度被切成了几层。

new THREE.SphereGeometry(3, 5, 4)的效果:

 Three.js学习之几何形状

new THREE.SphereGeometry(3, 8, 6)的效果:

 Three.js学习之几何形状

new THREE.SphereGeometry(3, 18, 12)的效果:

 Three.js学习之几何形状

在图形底层的实现中,并没有曲线的概念,曲线都是由多个折线近似构成的。对于球体而言,当这两个值较大的时候,形成的多面体就可以近似看做是球体了。 

3.2 经度弧度

new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)表示起始经度为Math.PI / 6,经度跨度为Math.PI / 3。

效果如下:

 Three.js学习之几何形状

注意,这里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。

效果如下:

 Three.js学习之几何形状

new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)的效果:

 Three.js学习之几何形状

4.源码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3.js测试四</title>
  </head>
  <body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  </body>
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript">
    function init() {
      var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
      });
      renderer.setClearColor(0x000000);
      var scene = new THREE.Scene();
      
      // camera
      var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
      camera.position.set(25, 25, 25);
      camera.lookAt(new THREE.Vector3(0, 0, 0));
      scene.add(camera);
      
      // 材质
      var material = new THREE.MeshBasicMaterial({
        color: 0xffff00,
        wireframe: true
      });
      
      drawCube(scene, material);    //立方体
//     drawPlane(scene, material);    //平面
//     drawSphere(scene, material);  //球体
      
      // render
      renderer.render(scene, camera);
    }
    
    function drawCube(scene, material) {
      var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
      scene.add(cube);
    }
    
    function drawPlane(scene, material) {
      var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 4), material);
      scene.add(plane);
    }
    
    function drawSphere(scene, material) {
      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3), material);
//     var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
//      var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
      scene.add(sphere);
    }
  </script>
</html>

以上就是Three.js学习之几何形状的全部内容,小编陆续还会更新关于Three.js的文章,请大家继续关注三水点靠木。

Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
js代码实现轮播图
May 04 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 #Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 #Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 #Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 #Javascript
AngularJs页面筛选标签小功能
Aug 01 #Javascript
Bootstrap Table使用方法详解
Aug 01 #Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 #Javascript
You might like
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
python 实现插入排序算法
2012/06/05 Python
python将文本转换成图片输出的方法
2015/04/28 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python自动抢红包教程详解
2019/06/11 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
python如何建立全零数组
2020/07/19 Python
python matplotlib库的基本使用
2020/09/23 Python
Python用户自定义异常的实现
2020/12/25 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
音乐学个人的自荐书范文
2013/11/26 职场文书
2015年预算员工作总结
2015/05/14 职场文书
Pygame Draw绘图函数的具体使用
2021/11/17 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle