three.js几何体之管道缓冲几何体
管道缓冲几何体（TubeGeometry）用于创建一个沿着三维曲线延伸的管道。构造器：
TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
其中：
path — Curve - 一个由基类Curve继承而来的3D路径。缺省时默认为二次贝塞尔路径
tubularSegments — 整数值，组成这一管道的分段数，默认值为 64
radius — 浮点数值，管道的半径，默认值为 1
radialSegments — 整数值，管道横截面的分段数目，默认值为 8
closed — 布尔值，管道的两端是否闭合，默认值为false
如下代码，演示了如何定义二次贝塞尔曲线路径并用于创建管道几何体 TubeGeometry，所构建的曲线路径是参数缺省时 three.js 使用的默认值，管道分段数、管道半径、管道横截面分段数等均使用默认值，TubeGeometry() 参数实际上可以留空。运行代码将看到一个线框立体管道：
<div style="position: absolute; color: #eee; margin: 10px;">点击页面可暂停/继续动画</div>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
const scene = new THREE.Scene;
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);
// 创建二次贝塞尔路径（路径其实是默认的，这里只是为了演示）
const path = new THREE.QuadraticBezierCurve3(
new THREE.Vector3(-1, -1, 0),
new THREE.Vector3(-1, 1, 0),
new THREE.Vector3(1, 1, 0)
);
const geometry = new THREE.TubeGeometry(path, 64, 1, 8, false); // 参数都是默认值，可以空
const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 'tan' }); // 线框化基础材质
const mesh = new THREE.Mesh(geometry, material); // 构图
scene.add(mesh); // 图形加入场景
const clock = new THREE.Clock();
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mesh.rotation.y -= delta / 5;
renderer.render(scene, camera);
};
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
document.onclick = () => clock.running ? clock.stop() : clock.start();
animate();
</script>
前一篇: three.js几何体之立方缓冲几何体
下一篇: three.js几何体之形状缓冲几何体
发表评论:
评论列表 [0条]
