three.js几何体之二十面体
本帖最后由 马黑黑 于 2025-5-15 20:03 编辑 <br /><br /><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>二十面缓冲几何体（IcosahedronGeometry）是一个用于生成二十面体的类。构造器：</p>
<blockquote>IcosahedronGeometry(radius : Float, detail : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
radius — 二十面体的半径，默认为 1<br>
detail — 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体
</blockquote>
<p>下面的代码，我们创建一个二十面几何体；材质是 MeshLambertMaterial，朗伯特材质，该材质光源才能呈现，我们打了两种光，一是环境光，二是方向光。本示例没有引入相机轨道控制器，只能观看：</p>
<div id="hEdiv"><pre id="hEpre">
<script type="module">
/* 二十面缓冲几何体 IcosahedronGeometry */
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, -1, 10);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.IcosahedronGeometry(1.2, 0); // 创建二十面体
const material = new THREE.MeshLambertMaterial({ color: 0x90ee90 }); // 创建朗伯特材质
const ico = new THREE.Mesh(geometry, material); // 创建网格Mess对象（图像=几何体+材质）
scene.add(ico); // 图像添加到场景成形
const ambientLight = new THREE.AmbientLight(0xffeeee, 0.75); // 环境光 : 改善场景视觉
scene.add(ambientLight);
const dirLight = new THREE.DirectionalLight(0xffd700, 2.5); // 方向光 : 角度照亮
dirLight.position.set(20,20,20); // 光来自右上靠近观者
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>
二十面体和十二面体很接近，所以一天里发了 二十面体的每一面是三角形，十二面的是五边形，感觉还是十二面体的更好看{:4_173:} 这光线设置很漂亮{:4_187:} 红影 发表于 2025-5-15 20:34
二十面体的每一面是三角形，十二面的是五边形，感觉还是十二面体的更好看
十二面体是有历史的，二十面体嘛，我绝对更漂亮，给人沉稳、永固的感觉 红影 发表于 2025-5-15 20:35
这光线设置很漂亮
慢慢也把光源介绍进来吧，从简单的弄起 二十面体，会更加惊艳了吧 马黑黑 发表于 2025-5-15 19:59
二十面体和十二面体很接近，所以一天里发了
这个二十面体又有光了。。
{:4_173:}
适用于十二面体么 它的材质设定每面颜色又相同了。。。光源从右上部来。。
朗伯特材质，这个材质有中文名字了啊。。 花飞飞 发表于 2025-5-15 21:22
它的材质设定每面颜色又相同了。。。光源从右上部来。。
朗伯特材质，这个材质有中文名字了啊。。
所有的材质都有中文名字 花飞飞 发表于 2025-5-15 21:20
这个二十面体又有光了。。
适用于十二面体么
光和几何体无关，跟材质有关。之前说过，有些材质自发光、有的材质自带颜色、有些材质需要光照才能看到 小辣椒 发表于 2025-5-15 21:17
二十面体，会更加惊艳了吧
面子是越多越好{:4_170:} 马黑黑 发表于 2025-5-15 20:54
十二面体是有历史的，二十面体嘛，我绝对更漂亮，给人沉稳、永固的感觉
个人感觉不一样吧，我更喜欢十二面体{:4_173:} 马黑黑 发表于 2025-5-15 20:54
慢慢也把光源介绍进来吧，从简单的弄起
嗯嗯，太好了{:4_187:} 红影 发表于 2025-5-15 22:40
嗯嗯，太好了
光源是相对抽象的一个知识体系 红影 发表于 2025-5-15 22:40
个人感觉不一样吧，我更喜欢十二面体
十二面体由于有历史，所以很多人会有所偏好 马黑黑 发表于 2025-5-15 21:32
所有的材质都有中文名字
{:4_170:}还很少见。。听着怪时尚的 马黑黑 发表于 2025-5-15 21:33
光和几何体无关，跟材质有关。之前说过，有些材质自发光、有的材质自带颜色、有些材质需要光照才能看到
这个关于材质和光的回复是昨天的，我才看到{:4_170:} 花飞飞 发表于 2025-5-16 20:18
这个关于材质和光的回复是昨天的，我才看到
很多次了，不止昨天的 花飞飞 发表于 2025-5-16 20:18
还很少见。。听着怪时尚的
时尚谈不上，材料学它是跟不上的