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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
简介JavaScript错误处理机制
Aug 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
PHP生成静态页
2006/11/25 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
10分钟学会js处理json的常用方法
2020/12/06 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
python 获取文件下所有文件或目录os.walk()的实例
2018/04/23 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Django之模型层多表操作的实现
2019/01/08 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
经管应届生求职信
2013/11/17 职场文书
护士思想汇报
2014/01/12 职场文书
大一新生学期自我评价
2014/04/09 职场文书
师德师风自查材料
2014/10/14 职场文书
爱的承诺书
2015/01/20 职场文书
行政撤诉申请书
2015/05/18 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
background-position百分比原理详解
2021/05/08 HTML / CSS