three.js几何体之四面体

马黑黑 · 发表于 2025-5-16 07:50

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

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

x

四面缓冲几何体（TetrahedronGeometry）是一个用于生成四面体的类。构造器：

TetrahedronGeometry(radius : Float, detail : Integer)

其中：

radius — 四面体的半径，默认值为 1
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体

下面的代码演示各面颜色为深青色的四面体在光源作用下呈现出各面明暗不同的效果（平行光光源来自观者的右上）：

<script type="module">
	/* 四面缓冲几何体 TetrahedronGeometry */
	import * as THREE from 'https://esm.sh/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);

	const geometry = new THREE.TetrahedronGeometry(1.2, 0); // 四面体
	const material = new THREE.MeshLambertMaterial({ color: 0x008B8B }); // 朗伯特材质
	const ico = new THREE.Mesh(geometry, material); // 创建网格Mess对象（图像=几何体+材质）
	scene.add(ico); // 图像添加到场景成形
	
	const ambientLight = new THREE.AmbientLight(0xffeeee, 1); // 环境光 : 改善场景视觉
	scene.add(ambientLight);
	
	const dirLight = new THREE.DirectionalLight(0xffd700, 2.5); // 平行光（方向光） : 角度照亮
	dirLight.position.set(-10,10,0); // 光来自右上靠近观者
	dirLight.target = ico; // 光作用的对象 : 四面体图像
	scene.add(dirLight);

	const animate = () => {
		requestAnimationFrame(animate);
		ico.rotation.x += 0.01;
		ico.rotation.y += 0.01;
		renderer.render(scene, camera);
	};

	window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);

	animate();

</script>