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代码,粗糙版
Nov 04 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
Vue渲染函数详解
Sep 15 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
php中序列化与反序列化详解
2017/02/13 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
轻松实现js图片预览功能
2016/01/18 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
简单的命令查看安装的python版本号
2020/08/28 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
介绍一下Java的事务处理
2012/12/07 面试题
预备党员党校学习自我评价分享
2013/11/12 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
golang使用map实现去除重复数组
2022/04/14 Golang