three.js几何体之圆形缓冲几何体
圆形缓冲几何体（CircleGeometry）是欧式几何的一个简单形状，它由围绕着一个中心点的三角分段的数量所构造，由给定的半径来延展。 同时它也可以用于创建规则多边形，其分段数量取决于该规则多边形的边数。构造器：
CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
其中：
radius — 圆形的半径，默认值为1
segments — 分段（三角面）的数量，最小值为3，默认值为32
thetaStart — 第一个分段的起始角度，默认为0。（three o'clock position）
thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆
下面的示例，我们用圆形缓冲几何体+基础材质画一个平面六边形：
<div style="position: absolute;color: #eee;margin: 10px;">可以使用鼠标操作图像</div>
<script type="module">
import * as THREE from 'https://esm.sh/three'; // three主库
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库
const scene = new THREE.Scene; // 场景
scene.background = new THREE.Color('rgba(90,90,90,.5)'); // 场景背景色
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
camera.position.set(0, 0, 5); // 相机位置
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
document.body.appendChild(renderer.domElement); // 渲染器加入到body标签
const controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
const geometry = new THREE.CircleGeometry(1, 6); // 圆形缓冲几何体
// 基础材质 ：颜色+双面渲染
const material = new THREE.MeshBasicMaterial({ color: 'tan', side: THREE.DoubleSide });
const circle = new THREE.Mesh(geometry, material); // 创建圆形对象 : 几何体+材质
scene.add(circle); // 圆形对象加入到场景
// renderer.render(scene, camera); // 至此已经可以将效果渲染出来
// 动画函数
const render = () => {
requestAnimationFrame(render); // 请求关键帧动画递归调用函数自身
controller.update(); // 更新控制器
renderer.render(scene, camera); // 渲染效果
};
render(); // 运行动画
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 随视窗改变渲染范围
</script>
前一篇: three.js材质汇总
下一篇: three.js几何体之胶囊图形几何体
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2025-5-12 19:34 发布: 不是说看着简单的代码比较复杂么，这个平面的看着不复杂，代码也没那么多
