three.js几何体之八面体
本帖最后由 马黑黑 于 2025-5-16 07:49 编辑 <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>八面缓冲几何体（OctahedronGeometry）是一个用于生成八面体的类。构造器：</p>
<blockquote>OctahedronGeometry(radius : Float, detail : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
radius — 八面体的半径，默认值为 1 <br>
detail — 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体
</blockquote>
<p>以下代码演示各面颜色为道奇蓝的八面体在光源作用下呈现出各面明暗不同的效果（平行光光源从xyz轴的右上前出发）：</p>
<div id="hEdiv"><pre id="hEpre">
<script type="module">
/* 八面缓冲几何体 OctahedronGeometry */
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.OctahedronGeometry(1.2, 0); // 八面体
const material = new THREE.MeshLambertMaterial({ color: 0x1e90ff }); // 朗伯特材质
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(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> 金字塔是八面体 谢谢老师辛苦。 梦江南 发表于 2025-5-16 09:22
谢谢老师辛苦。
{:4_191:} 马黑黑 发表于 2025-5-16 07:55
金字塔是八面体
还真是上下金字塔的感觉呢{:4_187:} 在不同的光源作用下，有种很迷幻的光影效果{:4_187:} 看到还有四面体，我去看看。。。
是不是切一半就是四面体了{:4_173:} 红影 发表于 2025-5-16 18:54
还真是上下金字塔的感觉呢
是的吧 红影 发表于 2025-5-16 19:01
在不同的光源作用下，有种很迷幻的光影效果
现在的光还是简单的光 红影 发表于 2025-5-16 19:04
看到还有四面体，我去看看。。。
是不是切一半就是四面体了
{:4_196:} 这个冰山一样，一半在海上一半在海平面下。。。
金字塔形倒装跟钻石一样{:4_173:} 环境光和平行光，照射不同面的明暗层次，立体感更强了。。 花飞飞 发表于 2025-5-16 19:49
环境光和平行光，照射不同面的明暗层次，立体感更强了。。
环境光是均匀的光，场景里到处都是，它的作用是让不能自显示的材质显示出来。
平行光也叫方向光，和太阳光一样。该光源，three.js 不同的版本貌似封装的效果不同，有些版本下，光强度上到两位数也不见效果，这个有点郁闷。 花飞飞 发表于 2025-5-16 19:48
这个冰山一样，一半在海上一半在海平面下。。。
金字塔形倒装跟钻石一样
{:4_196:} 马黑黑 发表于 2025-5-16 19:57
环境光是均匀的光，场景里到处都是，它的作用是让不能自显示的材质显示出来。
平行光也叫方向光，和太 ...
还是有感觉的，很明显右上角更亮一些{:4_173:}
难怪二者要一直搭在一起用，绝配么 马黑黑 发表于 2025-5-16 19:57
小猪笑得好，掐一个{:4_173:} 花飞飞 发表于 2025-5-16 20:06
还是有感觉的，很明显右上角更亮一些
难怪二者要一直搭在一起用，绝配么
因为还有环境光。你可以尝试把平行光去掉 花飞飞 发表于 2025-5-16 20:06
还是有感觉的，很明显右上角更亮一些
难怪二者要一直搭在一起用，绝配么
环境光一般只是其辅助作用，它跟哪种光源都可以配套 花飞飞 发表于 2025-5-16 20:06
小猪笑得好，掐一个
谢掐 马黑黑 发表于 2025-5-16 20:07
因为还有环境光。你可以尝试把平行光去掉
现在没手试。。{:4_170:}我一直纠结贴子看不到