three.js入门（7）几何体

最新推荐文章于 2023-04-02 20:44:31 发布

laiyangde

最新推荐文章于 2023-04-02 20:44:31 发布

阅读量382

点赞数

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： three-js three-js-入门 threejs threejs入门 threejs几何体

本文链接：https://blog.youkuaiyun.com/laiyangde/article/details/70316828

three.js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用Three.js创建各种基本几何体的方法，包括平面、圆、立方体、球体、圆柱、圆环等，详细解释了每个几何体的构造函数及参数意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二维几何体

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三个轴，效果如下：

这里写图片描述

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

这里写图片描述

2.圆（CircleGeometry）查看示例

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

THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)

参数	必须	描述
radius	是	定义圆的半径
segments	否	定义圆的分段数（由一个个三角形拼起来），最少三个，默认为8个，值越大，创建出的圆越光滑
thetaStart	否	定义圆从哪里开始画，取值范围为0-2*Math.PI
thetaLength	否	定义圆画多大，默认为2Pi（整个圆），如果指定0.5Math.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 );

结果：

这里写图片描述

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

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

结果如图

这里写图片描述

三维几何体

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 );

结果：

这里写图片描述

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开始画多少，2Math.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 );

这里写图片描述

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开始画多少，2Math.PI是整个圆柱，默认2Math.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 );

这里写图片描述

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 );

这里写图片描述