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); }
物体的默认位置是原点,对于立方体而言,是其几何中心在原点的位置。
分段:
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 2, 2, 3), material);
为什么会有这么多邪线呢?版本问题。R73版本:
注意这个分段是对六个面进行分段,而不是对立方体的体素分段,因此在立方体的中间是不分段的,只有六个侧面被分段。
2.平面
这里的平面(PlaneGeometry)其实是一个长方形,而不是数学意义上无限大小的平面。其构造函数为:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
width:x方向上的长度
height:y方向上的长度
widthSegments:x方向上的分段数(可选,缺省值1)
heightSegments:y方向上的分段数(同上)
new THREE.PlaneGeometry(2, 4);创建的平面在x轴和y轴所在平面内,效果如下:
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份的球体,如下图所示。
segmentsWidth相当于经度被切成了几瓣,而segmentsHeight相当于纬度被切成了几层。
new THREE.SphereGeometry(3, 5, 4)的效果:
new THREE.SphereGeometry(3, 8, 6)的效果:
new THREE.SphereGeometry(3, 18, 12)的效果:
在图形底层的实现中,并没有曲线的概念,曲线都是由多个折线近似构成的。对于球体而言,当这两个值较大的时候,形成的多面体就可以近似看做是球体了。
3.2 经度弧度
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)
表示起始经度为Math.PI / 6,经度跨度为Math.PI / 3。
效果如下:
注意,这里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。
效果如下:
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2)
的效果:
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="/UploadFiles/2021-04-02/three.min.js">以上就是Three.js学习之几何形状的全部内容,小编陆续还会更新关于Three.js的文章,请大家继续关注。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]