three.js几何体之圆环缓冲扭结几何体

位置: 首页 > 前端三套件[ 发布时间: 2025.5.18 作者: 马黑阅读: 8 ]

圆环缓冲扭结几何体 TorusKnotGeometry 创建一个圆环扭结，其特殊形状由一对互质的整数，p 和 q 所定义。如果 p 和 q 不互质，创建出来的几何体将是一个环面链接。构造器：

TorusKnotGeometry(radius : Float, tube : Float, tubularSegments : Integer, radialSegments : Integer, p : Integer, q : Integer)

其中：

radius - 圆环的半径，默认值为 1
tube — 管道的半径，默认值为 0.4
tubularSegments — 管道的分段数量，默认值为 64
radialSegments — 横截面分段数量，默认值为 8
p — 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是 2
q — 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是 3

下面的示例代码，我们使用默认构造器绘制了一个纹理化的圆环缓冲扭结几何体3d图案，该图案通过 THREE 内置的 Clock 时钟对象运行绕圈、旋转动画，其中绕圈是相机的动画，旋转是图像的动画，动画提供暂停/继续机制：

<style>
	body { margin: 0; display: grid; place-items: center; }
	#btnControl { position: absolute; bottom: 20px; }
</style>

<button type="button" id="btnControl">暂停/继续动画</button>

<script type="module">
	import * as THREE from 'https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js'; // three核心库
	const scene = new THREE.Scene; // 场景
	const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
	camera.position.set(0, 0, 10); // 相机位置
	const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
	renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
	document.body.appendChild(renderer.domElement); // 渲染器加入到body标签

	const geometry = new THREE.TorusKnotGeometry(); // 圆环缓冲扭结几何体
	const texture = new THREE.TextureLoader().load('https://638183.freep.cn/638183/small/texture/wv1.jpg');
	const material = new THREE.MeshBasicMaterial({ map: texture }); // 纹理化基础材质
	const torusknot = new THREE.Mesh(geometry, material); // 构建图像
	scene.add(torusknot); // 图像加入到场景

	const clock = new THREE.Clock(); // 动画时钟
	let angle = 0; // 角度变量

	// 动画函数
	const animate = () => {
		requestAnimationFrame(animate);
		const delta = clock.getDelta(); // 时钟增量
		angle += delta; // 角度增量
		camera.position.x = 3 * Math.cos(angle); // 相机X方向位置
		camera.position.y = 2 * Math.sin(angle);  // 相机Y方向位置
		torusknot.rotation.x += delta / 2; // 相机X方向旋转
		torusknot.rotation.y += delta / 2; // 相机X方向位置
		renderer.render(scene, camera); // 渲染动画
	};

	btnControl.onclick = () => clock.running ? clock.stop() : clock.start();

	// 窗口自适应
	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight; // 相机镜头对准范围
		camera.updateProjectionMatrix(); // 相机更新数据
		renderer.setSize(window.innerWidth, window.innerHeight); // 重设渲染范围
	}

	animate(); // 运行动画
</script>

前一篇: three.js几何体之网格几何体WireframeGeometry
下一篇: 没有了

发表评论:

评论列表 [1条]

#1 | 飞飞于 2025-5-18 21:10 发布: 这个教程转的跟实例不同，还另外加了暂停功能。