【Three.JS学习笔记（一）】几何体全家福

发布时间：2024年01月05日

几何体

摘录自官网https://threejs.org/，作为学习笔记增加了些个人的想法。

立方缓冲几何体

构造函数

参数名含义类型默认值
widthX轴上面的宽度Float1
heightY轴上面的高度Float1
depthZ轴上面的深度Float1
widthSegmentsX轴的分段数Integer1
heightSegmentsY轴的分段数Integer1
depthSegmentsZ轴的分段数Integer1

示例代码

const geometry = new THREE.BoxGeometry( 6, 6, 6, 3, 2, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

请添加图片描述

其中的*Segments就是指单个轴分成几份

请添加图片描述

完整代码

参照官网，把three的npm包下载下来使用本地服务器向外暴露

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="importmap">
    {
      "imports": {
        "three": "http://localhost:3000/node_modules/three/build/three.module.min.js",
        "three/addons/": "http://localhost:3000/node_modules/three/examples/jsm/"
      }
    }
  </script>
</head>
<body>
  <script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    /** ========== 示范代码 ========== */
    const geometry = new THREE.BoxGeometry( 6, 6, 6, 3, 2, 1 );
    const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    /** ============================= */

    const axesHelper = new THREE.AxesHelper( 5 );
    scene.add( axesHelper );

    const controls = new OrbitControls( camera, renderer.domElement );

    camera.position.z = 10;
    controls.update();

    function animate() {
      requestAnimationFrame( animate );
      controls.update();
      renderer.render( scene, camera );
    }

    animate();
  </script>
</body> 
</html>

胶囊缓冲几何体

构造函数

参数名含义类型默认值
radius胶囊半径Float1
length中间区域的长度Float1
capSegments构造盖子的曲线部分的个数Integer4
radialSegments覆盖胶囊圆周的分离的面的个数Integer8

示例代码

const geometry = new THREE.CapsuleGeometry( 3, 3, 5, 20 ); 
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const capsule = new THREE.Mesh( geometry, material );
scene.add( capsule );

请添加图片描述

其中的capSegments是指从顶部看去的多边形边数

请添加图片描述

其中的radialSegments可以理解成构造单个面的密度

请添加图片描述

圆形缓冲几何体

构造函数

参数名含义类型默认值
radius圆形的半径Float1
segments分段的数量Integer32（最小值为3）
thetaStart第一个分段的起始角度Float0
thetaLength圆形扇区的中心角Float2*PI

示范代码

const geometry = new THREE.CircleGeometry( 5, 10, 0, 2 * Math.PI );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

请添加图片描述

其中segments是指多边形的条数

其中thetaStart是指第一个分段与中间轴的偏移角度

请添加图片描述

其中thetaLength是指圆形总弧度

const geometry = new THREE.CircleGeometry( 5, 10, 30, 1.5 * Math.PI );

请添加图片描述

圆锥缓冲几何体

构造函数

参数名含义类型默认值
radius圆锥底部半径Float1
height圆锥的高度Float1
radialSegments圆锥侧面周围的分段数Integer32
heightSegments圆锥侧面沿着其高度的分段数Integer1
openEnded圆锥底面是否开放Booleanfalse
thetaStart第一个分段的起始角度Float0
thetaLength圆锥底面圆扇区的中心角Float2 * PI

示范代码

const geometry = new THREE.ConeGeometry( 5, 6, 8, 1, false, 0, 2 * Math.PI );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

请添加图片描述

其中radialSegments指顶部往下的多边形边数

请添加图片描述

其中heightSegments是指y轴分段数

请添加图片描述

其中openEnded是指底部是否封闭

请添加图片描述

其中thetaStart是指初始模型与y轴偏移角度

请添加图片描述

其中thetaLength是指圆锥弧度值

请添加图片描述

圆柱缓冲几何体

构造函数

参数名含义类型默认值
radiusTop圆柱的顶部半径Float1
radiusBottom圆柱的底部半径Float1
height圆柱的高度Float1
radialSegments圆柱侧面周围的分段数Integer32
heightSegments圆柱侧面沿着其高度的分段数Integer1
openEnded圆柱的底面是否开放Booleanfalse
thetaStart第一个分段的起始角度Float0
thetaLength圆柱底面圆扇区的中心角Float2*PI

示范代码

const geometry = new THREE.CylinderGeometry( 3, 3, 8, 32, 1, false, 0, Math.PI * 2 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

请添加图片描述

其中的各个参数都已在上文写过，可以参照圆形/圆锥，此处不再赘述

十二面缓冲几何体

构造函数

参数名含义类型默认值
radius十二面体半径Float1
detail新增顶点Integer0

示范代码

const geometry = new THREE.DodecahedronGeometry( 2, 0 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

请添加图片描述

边缘几何体

构造函数

参数名含义类型默认值
geometry几何体对象BufferGeometry无
thresholdAngle边缘起始角度Integer1

示范代码

const geometry = new THREE.ConeGeometry( 5, 6, 8, 2, false, 0, 2 * Math.PI );
const edges = new THREE.EdgesGeometry( geometry );
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

请添加图片描述

挤压缓冲几何体

构造函数

参数名含义类型默认值
shape形状或形状数组Array无
curveSegments曲线上点的数量Integer12
steps挤压线条的分段数Integer1
depth挤出形状的深度Float1
bevelEnabled是否应用斜角Booltrue
bevelThickness斜角的厚度Float0.2
bevelSize斜角延伸距离Float0.1
bevelOffset斜角与原始形状轮廓之间的延伸距离Float0
bevelSegmentsInteger斜角的分段层数3
extrudePathTHREE.Curve一条沿着被挤出形状的三维线条无
UVGeneratorObjectUV生成器函数的对象无

示范代码

const length = 3, width = 2;

const shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

const extrudeSettings = {
  curveSegments: 12,
  steps: 1,
  depth: 4,
  bevelEnabled: true,
  bevelThickness: 1,
  bevelSize: 1,
  bevelOffset: 0,
  bevelSegments: 3,
};

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

请添加图片描述

其中bevelThickness是指斜角与原来形状的垂直高度

请添加图片描述

其中bevelSize是指斜角边的距离

请添加图片描述

其中bevelOffset是指斜角与原来形状的偏移距离

const length = 3, width = 2;

const shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, width );
shape.lineTo( length, width );
shape.lineTo( length, 0 );
shape.lineTo( 0, 0 );

const extrudeSettings = {
  curveSegments: 12,
  steps: 1,
  depth: 4,
  bevelEnabled: true,
  bevelThickness: 0.5,
  bevelSize: 2,
  bevelOffset: 1,
  bevelSegments: 3,
};

const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

const geometry2 = new THREE.BoxGeometry( 3, 2, 0.1 );
const material2 = new THREE.MeshBasicMaterial( { color: 0x11aa00 } );
const cube = new THREE.Mesh( geometry2, material2 );
cube.position.x = 1.5;
cube.position.y = 1;
cube.position.z = -0.5;
scene.add( cube );

请添加图片描述

二十面缓冲几何体

构造函数

参数名含义类型默认值
radius半径Float1
detail新增顶点Integer0

示范代码

const dodecahedron = new THREE.DodecahedronGeometry(5, 0);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const cube = new THREE.Mesh( dodecahedron, material );
scene.add( cube );

请添加图片描述

车削缓冲几何体

构造函数

参数名含义类型默认值
points二维点数组Array[(0, -0.5), (0.5, 0), (0, 0.5)]
segments生成的圆周分段数Integer12
phiStart弧度表示的起始角度Float0
phiLength车削弧度Float2*PI

示范代码

const points = [];
for ( let i = 0; i < 10; i ++ ) {
  points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 1 + 5, ( i - 5 ) ) );
}
const geometry = new THREE.LatheGeometry( points );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const lathe = new THREE.Mesh( geometry, material );
scene.add( lathe );

请添加图片描述

其中segments是指从上向下的多边形边数

请添加图片描述

其中phiStart是指起始角度

请添加图片描述

其中phiLength是指车削的弧度

请添加图片描述

八面缓冲几何体

构造函数

参数名含义类型默认值
radius八面体半径Float1
detail新增顶点Integer0

示范代码

const geometry = new THREE.OctahedronGeometry( 2 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

请添加图片描述

平面缓冲几何体

构造函数

参数名含义类型默认值
widthX轴上面的宽度Float1
heightY轴上面的高度Float1
widthSegmentsX轴的分段数Integer1
heightSegmentsY轴的分段数Integer1

示范代码

const geometry = new THREE.PlaneGeometry( 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );

请添加图片描述

多面缓冲几何体

暂未搞懂

多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上，之后将它们细分为所需的细节级别。 这个类由DodecahedronGeometry、IcosahedronGeometry、OctahedronGeometry和TetrahedronGeometry 所使用，以生成它们各自的几何结构。

圆环缓冲几何体-2D

构造函数

参数名含义类型默认值
innerRadius内部半径Float0.5
outerRadius外部半径Float1
thetaSegments圆环分段数Integer32
phiSegments圆环半径分段数Integer8
thetaStart起始角度Float0
thetaLength圆心角Float2*PI

示范代码

const geometry = new THREE.ConeGeometry( 5, 6, 8, 2, false, 0, 2 * Math.PI );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const cone = new THREE.Mesh( geometry, material );
scene.add( cone );

请添加图片描述

形状缓冲几何体

构造函数

参数名含义类型默认值
shape单独的shape或者shape数组Array一个三角形
curveSegments每个形状的分段数Integer12

示范代码

const x = 0, y = 0;

const heartShape = new THREE.Shape();

heartShape.moveTo( x + 5, y + 5 );
heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

const geometry = new THREE.ShapeGeometry( heartShape );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material ) ;
scene.add( mesh );

请添加图片描述

球缓冲几何体

构造函数

参数名含义类型默认值
radius球体半径Float1
widthSegments经线分段数Integer32
heightSegments纬线的分段数Integer16
phiStart经线起始角度Float0
phiLength经线扫描角度Float2*PI
thetaStart纬线起始角度Float0
thetaLength纬线扫描角度Float2*PI

示范代码

const geometry = new THREE.SphereGeometry( 5, 32, 16, 0, 1.5 * Math.PI, 0, 0.5 * Math.PI );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

请添加图片描述

四面缓冲几何体

构造函数

参数名含义类型默认值
radius四面体半径Float1
detail新增顶点Integer0

示范代码

const geometry = new THREE.TetrahedronGeometry( 6, 0 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

请添加图片描述

圆环缓冲几何体-3D

构造函数

参数名含义类型默认值
radius环面的半径Float1
tube管道的半径Float0.4
radialSegments管道横截面的分段数Integer12
tubularSegments管道的分段数Integer48
arc圆环圆心角Float2*PI

示范代码

const geometry = new THREE.TorusGeometry( 2, 1, 5, 10 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const torus = new THREE.Mesh( geometry, material );
scene.add( torus );

请添加图片描述

其中radialSegments是指正面看的分段数

请添加图片描述

其中tubularSegments是指擦面看的分段数

请添加图片描述

圆环缓冲扭结几何体

构造函数

参数名含义类型默认值
radius圆环半径Float1
tube管道的半径Float0.4
tubularSegments管道的分段数量Integer64
radialSegments横截面的分段数量Integer8
p几何体围绕对称轴旋转周数Integer2
q几何体围绕内部圆环旋转周数Integer3

示范代码

const geometry = new THREE.TorusKnotGeometry( 1, 0.5, 100, 16 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } );
const torusKnot = new THREE.Mesh( geometry, material );
scene.add( torusKnot );

请添加图片描述

管道缓冲几何体

构造函数

参数名含义类型默认值
path3D路径Curvea quadratic bezier curve
tubularSegments管道分段数Integer64
radius管道的半径Float1
radialSegments管道横截面分段数Integer8
closed管道是否闭合Boolfalse

示范代码

class CustomSinCurve extends THREE.Curve {

  constructor( scale = 1 ) {

    super();

    this.scale = scale;

  }

  getPoint( t, optionalTarget = new THREE.Vector3() ) {

    const tx = t * 3 - 1.5;
    const ty = Math.sin( 2 * Math.PI * t );
    const tz = 0;

    return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );

  }

}

const path = new CustomSinCurve( 10 );
const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

请添加图片描述

网格几何体

构造函数

参数名含义类型默认值
geometry任意几何体对象ButterGeometry无

示范代码

const geometry = new THREE.SphereGeometry( 5, 5, 5 );

const wireframe = new THREE.WireframeGeometry( geometry );

const line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;

scene.add( line );

请添加图片描述

文章来源:https://blog.csdn.net/m0_66681776/article/details/135386312
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章