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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
学习ExtJS Column布局
2009/10/08 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python入门篇之列表和元组
2014/10/17 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python requests证书问题解决
2019/09/05 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
基于Python实现简单学生管理系统
2020/07/24 Python
Python实现随机爬山算法
2021/01/29 Python
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
党员十八大心得体会
2014/09/12 职场文书
网络营销计划
2015/01/17 职场文书
企业投资意向书
2015/05/09 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers