three.js几何体之立方缓冲几何体

马黑黑 · 发表于 2025-5-19 21:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

立方缓冲几何体 BoxGeometry 是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。。构造器：

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

其中：

width — X轴上面的宽度，默认值为 1
height — Y轴上面的高度，默认值为 1
depth — Z轴上面的深度，默认值为 1
widthSegments — （可选）宽度的分段数，默认值是 1
heightSegments — （可选）高度的分段数，默认值是 1
depthSegments — （可选）深度的分段数，默认值是 1

下面的代码将绘制一个线框形状的立方缓冲几何体图像：

<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://638183.freep.cn/638183/web/ku/three.module.min.js';

	const scene = new THREE.Scene;
	const camera = new THREE.PerspectiveCamera(45, 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 mesh = new THREE.Mesh(
		new THREE.BoxGeometry(), // 立方缓冲几何体
		new THREE.MeshBasicMaterial({ wireframe: true }) // 基础材质（线框化）
	);
	scene.add(mesh);

	const clock = new THREE.Clock();

	const animate = () => {
		requestAnimationFrame(animate);
		const delta = clock.getDelta();
		mesh.rotation.y -= delta;
		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>