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）几何体
标签：

相关文章