three.js几何体之四面体
<style>#btnPrev { box-shadow: 2px 2px 6px rgba(0,0,0,.5); }
#btnPrev:hover { box-shadow: 2px 2px 12px rgba(0,0,0,.5); font-weight: bold; }
</style>
<p>四面缓冲几何体（TetrahedronGeometry）是一个用于生成四面体的类。构造器：</p>
<blockquote>TetrahedronGeometry(radius : Float, detail : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
radius — 四面体的半径，默认值为 1<br>
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体
</blockquote>
<p>下面的代码演示各面颜色为深青色的四面体在光源作用下呈现出各面明暗不同的效果（平行光光源来自观者的右上）：</p>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<blockquote><button id="btnPrev" name="btnPrev" type="button" value="prev">运行代码</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPrev.onclick = () => {
const value = hEpre.textContent + '<style>body {margin: 0; }</style>';
const previewWindow = window.open('', 'preview1', 'width=1200,height=768,top=100,left=100');
previewWindow.document.open();
previewWindow.document.write(value);
setTimeout(function() { previewWindow.document.title = "预览" }, 100);
previewWindow.document.close();
};
</script> 三角粽就是不太严格的四面体 老师准备端午节的粽子了。 梦江南 发表于 2025-5-16 09:24
老师准备端午节的粽子了。
{:4_189:} 马黑黑 发表于 2025-5-16 07:52
三角粽就是不太严格的四面体
黑黑真会形容，八面体是金字塔，四面体是三角粽{:4_173:} 这个应该是面最少的多面体了吧？ 同样的，色彩很美{:4_187:}
three.js的几何体还真不少呢。 红影 发表于 2025-5-16 19:08
同样的，色彩很美
three.js的几何体还真不少呢。
一点一点介绍吧，不会太久 红影 发表于 2025-5-16 19:06
这个应该是面最少的多面体了吧？
你说呢？有三面体、二面体、一面体吗 红影 发表于 2025-5-16 19:06
黑黑真会形容，八面体是金字塔，四面体是三角粽
早期的时候，很多人认为金字塔是四面体。我做导游的时候，有一回与游客闲聊，有位游客也认为金字塔是四面体，我纠正了他，他说我知识浅薄。时隔六年，突然打电话给我，说金字塔确实是八面体，我是对的，他到了实地数过了{:4_170:} 这四面体还就是粽子模样。。。
之前就是各种形状，现在是各种立体，在光源渲染下有意想不到的美感。{:4_199:} 花飞飞 发表于 2025-5-16 19:52
这四面体还就是粽子模样。。。
之前就是各种形状，现在是各种立体，在光源渲染下有意想不到的美感。{:4_19 ...
{:4_173:} 马黑黑 发表于 2025-5-16 19:54
你发的新贴啥效果也没有？
不然是我浏览器问题。。 花飞飞 发表于 2025-5-16 19:57
你发的新贴啥效果也没有？
不然是我浏览器问题。。
哪里的新帖？ 马黑黑 发表于 2025-5-16 20:02
哪里的新帖？
新得不行不行的那个实例甜甜圈的贴子 花飞飞 发表于 2025-5-16 20:32
新得不行不行的那个实例甜甜圈的贴子
好甜有吃不着的样纸{:4_170:} 马黑黑 发表于 2025-5-16 19:19
一点一点介绍吧，不会太久
嗯嗯，看起来数量还是有限的。 红影 发表于 2025-5-16 23:01
嗯嗯，看起来数量还是有限的。
十多个总会有的 马黑黑 发表于 2025-5-16 19:19
你说呢？有三面体、二面体、一面体吗
嗯嗯，三维空间里能形成体的，只能是四面以上呢。 马黑黑 发表于 2025-5-16 19:25
早期的时候，很多人认为金字塔是四面体。我做导游的时候，有一回与游客闲聊，有位游客也认为金字塔是四面 ...
怪不得黑黑看到八面体就想到金字塔，这是印象很深刻吧。{:4_173:}