当前位置: 首页 > news >正文

three.js(七):内置的二维几何体

二维几何体

    • PlaneGeometry 矩形平面
    • CircleGeometry 圆形平面
    • RingGeometry 圆环平面

PlaneGeometry 矩形平面

  • PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
    • width — 平面沿着X轴的宽度。默认值是1。
    • height — 平面沿着Y轴的高度。默认值是1。
    • widthSegments — (可选)平面的宽度分段数,默认值是1。
    • heightSegments — (可选)平面的高度分段数,默认值是1。
import React, { useRef, useEffect } from "react";
import {BoxGeometry,BufferGeometry,CircleGeometry,ConeGeometry,CylinderGeometry,DirectionalLight,DodecahedronGeometry,EdgesGeometry,IcosahedronGeometry,Mesh,MeshBasicMaterial,MeshNormalMaterial,MeshPhongMaterial,OctahedronGeometry,PerspectiveCamera,PlaneGeometry,PolyhedronGeometry,RingGeometry,Scene,Shape,ShapeGeometry,WebGLRenderer,
} from "three";
import Stage from "../component/Stage";
import "./fullScreen.css";const stage = new Stage(0, 0, 4);
const { scene, renderer } = stage;
// 替换这里的几何体即可
const geometry = new PlaneGeometry(0.5, 2, 2, 4);
{const material = new MeshNormalMaterial({polygonOffset: true,polygonOffsetFactor: 1,polygonOffsetUnits: 1,});const mesh = new Mesh(geometry, material);scene.add(mesh);
}
{const material = new MeshBasicMaterial({wireframe: true,});const mesh = new Mesh(geometry, material);scene.add(mesh);
}const Geo2D: React.FC = (): JSX.Element => {const divRef = useRef<HTMLDivElement>(null);useEffect(() => {const { current } = divRef;if (current) {current.innerHTML = "";current.append(renderer.domElement);stage.animate();}}, []);return <div ref={divRef} className="canvasWrapper"></div>;
};export default Geo2D;

在这里插入图片描述

CircleGeometry 圆形平面

  • CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
    • radius — 圆形的半径,默认值为1
    • segments — 分段(三角面)的数量,最小值为3,默认值为8。
    • thetaStart — 第一个分段的起始角度,默认为0。(three o’clock position)
    • thetaLength — 圆形扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆。
const geometry = new CircleGeometry(0.5, 16, Math.PI / 2, Math.PI / 3);

在这里插入图片描述

RingGeometry 圆环平面

  • RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
    • innerRadius — 内部半径,默认值为0.5。
    • outerRadius — 外部半径,默认值为1。
    • thetaSegments — 圆环的分段数。这个值越大,圆环就越圆。最小值为3,默认值为8。
    • phiSegments — 最小值为1,默认值为8。
    • thetaStart — 起始角度,默认值为0。
    • thetaLength — 圆心角,默认值为Math.PI * 2。
const geometry = new RingGeometry(0.3, 0.6, 12, 2, Math.PI / 6, (Math.PI * 2) / 3);

在这里插入图片描述## ShapeGeometry 二维图形

  • ShapeGeometry(shapes : Array, curveSegments : Integer)
    • shapes — 一个单独的shape,或者一个包含形状的Array。
    • curveSegments - Integer - 每一个形状的分段数,默认值为12。
const shape = new Shape();
shape.moveTo(0, 0);
shape.bezierCurveTo(1, 1, -1, 1, 0, 0);
const geometry = new ShapeGeometry(shape);

在这里插入图片描述

http://www.lryc.cn/news/146256.html

相关文章:

  • golang-bufio 缓冲读
  • 前端 js实现 选中数据 动态 添加在表格中
  • MySQL—MySQL主从如何保证强一致性
  • Lora升级!ReLoRa!最新论文 High-Rank Training Through Low-Rank Updates
  • gateway动态路由和普通路由+负载均衡,借助eureka
  • HTTP原理与实现
  • 现在软件开发app制作还值得做吗
  • java八股文面试[JVM]——类初始化过程
  • 什么是SQL注入攻击,解释如何防范SQL注入攻击?
  • StringBuilder类分享(2)
  • IDEA查看类中的方法
  • MySQL日期格式及日期函数实践
  • MySQL项目迁移华为GaussDB PG模式指南
  • 流处理详解
  • Qt中XML文件创建及解析
  • 【pyqt5界面化工具开发-11】界面化显示检测信息
  • Batbot电力云平台在智能配电室中的应用
  • 链表(详解)
  • 最简单vue获取当前地区天气--高德开放平台实现
  • 大数据处理 正则表达式去除特殊字符 提取中文英文数字
  • Python装饰器(decorators)
  • [halcon] 局部图片保存 gen_circle 和 gen_rectangle2 对比 这怕不是bug吧
  • 解析msvcp100.dll丢失的原因及修复方法,教你快速解决的方案
  • 算法:模拟思想算法
  • 【base64】JavaScriptuniapp 将图片转为base64并展示
  • 根据一个List生成另外一个List,修改其中一个,导致另外一个List也在变化
  • Cesium 加载 geojson 文件并对文件中的属性值进行颜色设置
  • windows系统配置tcp最大连接数
  • SQL存储过程中 SET ANSI_NULLS ON 和 SET QUOTED_IDENTIFIER ON的作用和详解
  • C语言——程序执行的三大流程