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获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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 一个比较完善的简单文件上传
2010/03/25 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
php实现递归的三种基本方式
2020/07/04 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
tornado框架blog模块分析与使用
2013/11/21 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python 多维List创建的问题小结
2019/01/18 Python
python实现图片压缩代码实例
2019/08/12 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
Shell如何接收变量输入
2016/08/06 面试题
英文自荐信
2013/12/19 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
社区创先争优承诺书
2014/08/30 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
新兵入伍决心书
2015/09/22 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书