threejs优化管道(tube), 解决了管道拐角显示问题

threejs优化管道(tube), 解决了管道拐角显示问题

• ThreeTube.js

import * as THREE from "three";
import { TubePath } from "three-tube-path";

class ThreeTube {
	/**
	 *
	 * @param {Array<THREE.Vector3>} path 管理路径
	 * @param {Number} radius 管道半径(默认是1)
	 * @param {String} color 管道颜色(默认#00ff00)
	 * @param {Number} opacity 管道透明度(默认1 不透明)
	 * @param {Number} elbowSegmentNum 拐角位置的线段数(默认是10)
	 * @param {Number} elbowSegmentOffset 拐角位置各个线段间的距离(默认是0.01)
	 * @param {Number} radialSegments 组成横截面的线段数(默认值为24)
	 * @param {Boolean} closed 管道是否闭合(默认false)
	 * @returns 管道对象tube (调用scene.add(tube), 添加到场景)
	 */
	constructor(
		path,
		radius = 1,
		color = "#00ff00",
		opacity = 1,
		elbowSegmentNum = 10,
		elbowSegmentOffset = 0.01,
		radialSegments = 24,
		closed = false
	) {
		const tubePath = new THREE.CatmullRomCurve3(path);
		const pathToUMapping = TubePath.pathToUMapping(tubePath, elbowSegmentNum, elbowSegmentOffset);
		const geometry = new TubePath(tubePath, pathToUMapping, radius, radialSegments, closed);

		const material = new THREE.MeshStandardMaterial({
			color: color,
			side: THREE.DoubleSide,
			transparent: true,
			opacity: opacity,
		});

		const tube = new THREE.Mesh(geometry, material);

		return tube;
	}
}

export default ThreeTube;

• 安装

npm install three-tube-path --save

• 使用

import ThreeTube from "./ThreeTube";
 
const path = [new THREE.Vector3(-5, -5, 0), new THREE.Vector3(-5, 5, 0), new THREE.Vector3(5, 5, 0)];
const tube = new ThreeTube(path);
scene.add(tube);