three.js几何体之二维圆环和三维圆环
1. 二维圆环几何体
圆环缓冲几何体 RingGeometry 是一个用于生成二维圆环几何体的类。构造器：
RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
其中：
innerRadius — 内部半径，默认值为 0.5
outerRadius — 外部半径，默认值为 1
thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为 3，默认值为 32
phiSegments — 圆环半径的分段数字。最小值为 1，默认值为 1
thetaStart — 起始角度，默认值为 0
thetaLength — 圆心角，默认值为 Math.PI * 2
2. 三维圆环几何体
圆环缓冲几何体 TorusGeometry 是一个用于生成三维圆环几何体的类。构造器：
TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)
其中：
radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是 1
tube — 管道的半径，默认值为 0.4
radialSegments — 管道横截面的分段数，默认值为 12
tubularSegments — 管道的分段数，默认值为 48
arc — 圆环的圆心角（单位是弧度），默认值为 Math.PI * 2
下面的代码将绘制上述两个几何体。每一行代码都有说明：
<script type="module">
import * as THREE from 'https://esm.sh/three'; // 导入three.js 模块
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 导入相机轨道控制模块
const scene = new THREE.Scene; // 场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
camera.position.set(0, -1, 10); // 相机位置
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器渲染范围
document.body.appendChild(renderer.domElement); // 渲染器元素加入到body标签
const controller = new OrbitControls(camera, renderer.domElement); // 实例化相机轨道
controller.autoRotate = true; // 开启相机轨道自动旋转
const ring_geometry = new THREE.RingGeometry(); // 二维圆环几何体
const torus_geometry = new THREE.TorusGeometry(); // 三维圆环几何体
const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); // 法向量材质（两个几何体共用）
const ring_mess = new THREE.Mesh(ring_geometry, material); // 二维圆环（即网格对象 Mess 实例化）
ring_mess.position.set(-2, 0, 0); // 二维圆环位置
const torus_mess = new THREE.Mesh(torus_geometry, material); // 三维圆环（即网格对象 Mess 实例化）
torus_mess.position.set(2, 0, 0); //三维圆环位置
scene.add(ring_mess, torus_mess); // 图形都加入到场景中
// 动画 : 相机绕场景跑
const animate = () => {
requestAnimationFrame(animate);
controller.update();
renderer.render(scene, camera);
};
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 窗口自适应
animate(); // 运行动画函数
</script>
<style> body { margin: 0; background: beige; /* 预览窗口样式 */ } </style>
前一篇: three.js几何体之四面体
下一篇: three.js几何体之球缓冲几何体
发表评论:
评论列表 [0条]
