three.js几何体之网格几何体WireframeGeometry
<p>网格几何体 WireframeGeometry 可以被用作一个辅助物体，来对一个 geometry 几何体以线框的形式进行查看。构造器：</p><blockquote>WireframeGeometry( geometry : BufferGeometry )</blockquote>
<p> 其中：geometry — 任意几何体对象。</p>
<p>网格几何体 WireframeGeometry 类似于材质（Material）启用了 wireframe: true 的配置，类似但不完全一致，网格几何体 WireframeGeometry 定制的自由度更高。以下示例代码的核心是：创建一个球体几何体 SphereGeometry，以其为基础将其网格线化，然后使用 LineSegments 构建最终图像。Line* 材质默认白色，可定制：</p>
<div id="hEdiv"><pre id="hEpre">
<script type="module">
import * as THREE from 'https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js'; // three核心库
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); // 渲染器加入到body标签
const geometry = new THREE.SphereGeometry(); // 球体几何体
const wireframe = new THREE.WireframeGeometry(geometry); // 球形几何体网格线化
const ball = new THREE.LineSegments(wireframe); // 创建最终图像（线型还可选LineLoop、Line）
ball.material.color.set(0xffcc00); // 可以设置网格线颜色
scene.add(ball); // 图像加入到场景
const clock = new THREE.Clock(); // 动画时钟
// 动画函数
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta(); // 时钟增量
ball.rotation.x += delta / 5; // X轴旋转
ball.rotation.y += delta / 5; // Y轴旋转
renderer.render(scene, camera); // 渲染动画
};
// 窗口自适应
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight; // 相机镜头对准范围
camera.updateProjectionMatrix(); // 相机更新数据
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>
这里注意下“网格”这一概念在 three.js 中的含义，有二：
一是，网格几何体 WireframeGeometry 中的网格，和现实世界的网格含义一致（想一想渔网）；
二是，three.js 中的 Mess 对象，“几何体+材质” 所构造出来的实例化对象（最终图形）。这里的网格 Mess 之所以也称为网格，是因为图形的绘制是在隐形的密密麻麻的网格上一个像素一个像素地绘制而成（想一想早期点阵图形打印，利用每一个像素的不同灰度，将图形打印出来）。 用新的浏览器看到了金色透明的球形在转动。 梦江南 发表于 2025-5-18 11:17
用新的浏览器看到了金色透明的球形在转动。
是吧？百分浏览器是国内封装 Chromium 内核做得比较靠谱的，几乎原生支持所有的新标准 马黑黑 发表于 2025-5-18 11:19
是吧？百分浏览器是国内封装 Chromium 内核做得比较靠谱的，几乎原生支持所有的新标准
回老师，是的，看老师的代码都能看到了。但是看别人的代码帖子看不到。不知是为什么？ 使用这个，可以有更高的定制自由。看到了小球的网格线被换了颜色呢{:4_187:} 梦江南 发表于 2025-5-18 13:15
回老师，是的，看老师的代码都能看到了。但是看别人的代码帖子看不到。不知是为什么？
应该是你的windows系统问题，暂时也没啥好办法，哪个能看什么你就替换着使用吧 红影 发表于 2025-5-18 14:17
使用这个，可以有更高的定制自由。看到了小球的网格线被换了颜色呢
默认颜色是白色 马黑黑 发表于 2025-5-18 18:06
默认颜色是白色
嗯嗯，这里的是黄色的，漂亮{:4_187:} 颜色特别好看，
这么大球体，网格材质同时可以看到内外前后各个方位，
这种视角独特，少见所以新奇。。
就是3D的独有的魅力吧。 花飞飞 发表于 2025-5-18 21:47
颜色特别好看，
这么大球体，网格材质同时可以看到内外前后各个方位，
这种视角独特，少见所以新奇。。
对，three.js 是很优秀的 LineSegments、LineLoop、Line这三种线型试了一下，
肉眼只看到密集程度不同，看不出别的差别之处。{:4_173:} 马黑黑 发表于 2025-5-18 21:51
对，three.js 是很优秀的
已经深刻感受到了 ，效果都叹为观止 花飞飞 发表于 2025-5-18 21:53
LineSegments、LineLoop、Line这三种线型试了一下，
肉眼只看到密集程度不同，看不出别的差别之处。{:4_17 ...
有区别的，不过不容易看出来 花飞飞 发表于 2025-5-18 21:54
已经深刻感受到了 ，效果都叹为观止
还是不错的 马黑黑 发表于 2025-5-18 21:54
有区别的，不过不容易看出来
不象是虚线，实线，双线那么容易看出来。。{:4_173:} 马黑黑 发表于 2025-5-18 21:55
还是不错的
用词也太谦虚了。。。相当震撼眼球 花飞飞 发表于 2025-5-18 21:55
不象是虚线，实线，双线那么容易看出来。。
在一些结构里，它们没看出什么区别，那么，用谁都可以，容易看出区别了，就看需要用谁 花飞飞 发表于 2025-5-18 21:56
用词也太谦虚了。。。相当震撼眼球
还可以的 马黑黑 发表于 2025-5-18 21:56
在一些结构里，它们没看出什么区别，那么，用谁都可以，容易看出区别了，就看需要用谁
比较了一下还是你选的这种视觉效果最好{:4_173:}