three.js入门(7)几何体

时间:2022-06-11 05:04:39

二维几何体

1.平面(PlaneGeometry)查看示例

PlaneGeometry可以创建非常简单的一个二维矩行,其构造函数为:

THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数 必须 描述
width 该参数指定矩形的宽度
height 该参数指定矩形的高度
widthSegments 该参数指定矩形的宽度应该划分为几段,默认为1
heightSegments 该参数指定矩形的宽度应该划分为几段,默认为1


现在我们创建一个宽为5,高度为20的平面,并渲染为线框,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>three.js入门(7)几何体</title>
<script src="lib/three.js"></script>
<script src="lib/stats.min.js"></script>
<script src="lib/dat.gui.min.js"></script>
<style>
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<script>
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 场景
var scene = new THREE.Scene();
// 照相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(20, 15, 45);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 辅助轴
var axes = new THREE.AxisHelper(20);
scene.add(axes);
// 1.平面 PlaneGeometry(width, height, widthSegments, heightSegments)
var geometry = new THREE.PlaneGeometry( 5, 20);
//wireframe渲染模型为线框
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var plane = new THREE.Mesh( geometry, material );
scene.add( plane );
renderer.render(scene,camera)
</script>
</body>
</html>

为了更好地表现参数效果,我们在场景中用长度为20的红、绿、蓝线段分别表示x、y、z三个轴,效果如下:

three.js入门(7)几何体

而设置了分段后new THREE.PlaneGeometry( 5, 20, 3, 3);,结果如下:

three.js入门(7)几何体

2.圆(CircleGeometry)查看示例

你们应该能猜到CircleGeometry是用来创建圆的,其构造函数为:

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)
参数 必须 描述
radius 定义圆的半径
segments 定义圆的分段数(由一个个三角形拼起来),最少三个,默认为8个,值越大,创建出的圆越光滑
thetaStart 定义圆从哪里开始画,取值范围为0-2*Math.PI
thetaLength 定义圆画多大,默认为2*Pi(整个圆),如果指定0.5*Math.PI,也就是画四分一的圆弧


从代码角度来说,我们可以用以下代码创出一个圆

    // 2.圆
var geometry = new THREE.CircleGeometry( 5, 32);
//wireframe渲染模型为线框
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var Circle = new THREE.Mesh( geometry, material );
scene.add( Circle );

结果:

three.js入门(7)几何体

如果你想创建一个四分之一的圆,可以这样:

new THREE.CircleGeometry( 5, 32, 0, 0.5*Math.PI);

结果如图

three.js入门(7)几何体

三维几何体

1.立方体(BoxGeometry)查看示例

BoxGeometry是四边形的几何模型类。它通常用于创建具有“宽度”、“高度”和“深度”参数的立方体或不规则四边形模型。,它的构造函数如下:

THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)
参数 必须 描述
width X轴上的面的宽度
height Y轴上的面的高度
depth Z轴上的面的深度
widthSegments 沿宽度面的分割面数量. 默认值为1
heightSegments 沿高度面的分割面数量. 默认值为1
depthSegments 沿深度面的分割面数量. 默认值为1


不多说,来创建:

    //立方体
var geometry = new THREE.BoxGeometry( 5,5,5);
//wireframe渲染模型为线框
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var Box = new THREE.Mesh( geometry, material );
scene.add( Box );

结果:

three.js入门(7)几何体

2.球(SphereGeometry)查看示例

SphereGeometry可以创建出一个三维球形,它的构造函数如下

THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
参数 必须 描述
radius 球体半径. 默认值为50.
widthSegments 水平分段的数量. 最小值为3, 默认值为8.值越大球体越光滑
heightSegments 垂直分段的数量. 最小值为2, 默认值为6.值越大球体越光滑
phiStart 指定从x轴的什么地方开始绘制,取值0-2*Math.PI,默认0
phiLength 指定从phiStart开始画多少,2*Math.PI是整个球,默认Math.PI * 2
thetaStart 指定从y轴的什么地方开始绘制,取值0-2*Math.PI,默认0
thetaLength 指定从thetaStart开始画多少,Math.PI是整个球 ,默认Math.PI


    //球
var geometry = new THREE.SphereGeometry(5);
//wireframe渲染模型为线框
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var Sphere = new THREE.Mesh( geometry, material );
scene.add( Sphere );

three.js入门(7)几何体

3.圆柱(CylinderGeometry)查看示例

CylinderGeometry创建出一个圆柱,它的构造函数如下

THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded, thetaStart, thetaLength)
参数 必须 描述
radiusTop 圆柱体顶端半径. 默认值为20.
radiusBottom 圆柱体底端半径. 默认值为20
height 圆柱体高度. 默认值为100.
radiusSegments 围绕圆柱体周长的分段数. 默认值为8
heightSegments 沿圆柱体高度的分段数. 默认值为1.
openEnded 指示圆柱体两端是打开还是封闭. 默认值为false, 意思是封闭.
thetaStart 指定从哪里开始画第一个分段,默认是0
thetaLength 指定从thetaStart开始画多少,2*Math.PI是整个圆柱 ,默认2*Math.PI


    //圆柱
var geometry = new THREE.CylinderGeometry(5,8,10);
//wireframe渲染模型为线框
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var Cylinder = new THREE.Mesh( geometry, material );
scene.add( Cylinder );

three.js入门(7)几何体

4.圆环(TorusGeometry)查看示例

TorusGeometry创建出一个圆环,它的构造函数如下

THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
参数 必须 描述
radius 半径, 默认值为100.
tube 管道直径. 默认值为40.
radialSegments 定义沿圆环长度方向的分段数,默认值为8
tubularSegments 定义沿圆环宽度方向的分段数,默认值为6
arc 你可以控制是否绘制一个完整的圆环,默认为2*Math.PI,完整圆环


    //圆环
var geometry = new THREE.TorusGeometry(10,5,10,20,Math.PI*8/5);
//wireframe渲染模型为线框
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, wireframe: true} );
var Torus = new THREE.Mesh( geometry, material );
scene.add( Torus );

three.js入门(7)几何体