three.js几何体之平面缓冲几何体
<p>平面缓冲几何体 PlaneGeometry 是一个用于生成平面几何体的类。构造器：</p><blockquote>PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
width — 平面沿着X轴的宽度。默认值是 1<br>
height — 平面沿着Y轴的高度。默认值是 1<br>
widthSegments — （可选）平面的宽度分段数，默认值是 1<br>
heightSegments — （可选）平面的高度分段数，默认值是 1
</blockquote>
<p>如下代码，我们使用上述几何体绘制了网格状的线框平面矩形：</p>
<div id="hEdiv"><pre id="hEpre">
<style>
body { margin: 0; display: grid; place-items: center; }
#btnControl { position: absolute; bottom: 20px; }
</style>
<button type="button" id="btnControl">暂停/继续动画</button>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
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 plane = new THREE.Mesh(
new THREE.PlaneGeometry(3, 5, 8, 8), // 宽高 3*5，网格 8*8
new THREE.MeshBasicMaterial({ wireframe: true }) // 线框
);
scene.add(plane);
const clock = new THREE.Clock();
const animate = () => {
requestAnimationFrame(animate);
const delta = clock.getDelta();
plane.rotation.y -= delta;
renderer.render(scene, camera);
};
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
btnControl.onclick = () => clock.running ? clock.stop() : clock.start();
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>
一个平面加了网格之后，也可以如立体图案一样的转动，
同时还能感受到光泽变幻和立体感，
3D真是无所不能。。{:4_199:} 格子宽窄和网格数量都可以任意设置
通过跟贴，再试一下 这个效果，更改位置就是要更改相机位置来控制。。{:4_199:}
不过有的时候更改相机位置会出现变形，这个图不会 花飞飞 发表于 2025-5-19 19:03
格子宽窄和网格数量都可以任意设置
通过跟贴，再试一下 这个效果，更改位置就是要更改相机位置来控制。。{ ...
变形和相机的距离有关系。运动的时候，相机的Z方向距离越近越容易变形 这个长宽不同，分段相同，在分格线里看得特别清楚。{:4_204:} 这个是绕着Y轴旋转的，如果加上X，就是整个平面的旋转了吧{:4_204:} 红影 发表于 2025-5-19 20:25
这个是绕着Y轴旋转的，如果加上X，就是整个平面的旋转了吧
你可以自己尝试看看 红影 发表于 2025-5-19 20:22
这个长宽不同，分段相同，在分格线里看得特别清楚。
一切可设置 马黑黑 发表于 2025-5-19 20:25
你可以自己尝试看看
嗯嗯，试一下就知道了{:4_187:} 马黑黑 发表于 2025-5-19 20:26
一切可设置
是的，从这个里面感受到了{:4_204:} 红影 发表于 2025-5-19 21:36
是的，从这个里面感受到了
{:4_190:} 红影 发表于 2025-5-19 21:36
嗯嗯，试一下就知道了
是的 马黑黑 发表于 2025-5-19 22:53
谢谢黑黑的介绍{:4_187:} 马黑黑 发表于 2025-5-19 22:53
是的
修改一下数字，变化还真的有{:4_204:} 红影 发表于 2025-5-20 10:28
修改一下数字，变化还真的有
多数参数都敏感，个别参数可能不一定酱紫 红影 发表于 2025-5-20 10:26
谢谢黑黑的介绍
阔气 马黑黑 发表于 2025-5-20 12:38
多数参数都敏感，个别参数可能不一定酱紫
嗯嗯，多试试就知道了{:4_204:} 红影 发表于 2025-5-20 22:15
嗯嗯，多试试就知道了
一般在理解的基础上多多尝试就有收获。有些事情理解不了，多多尝试之后也能慢慢理解 马黑黑 发表于 2025-5-20 12:38
阔气
应该的{:4_173:} 红影 发表于 2025-5-20 22:17
应该的
嗯嗯