three.js几何体之平面缓冲几何体
平面缓冲几何体 PlaneGeometry 是一个用于生成平面几何体的类。构造器：
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)
其中：
width — 平面沿着X轴的宽度。默认值是 1
height — 平面沿着Y轴的高度。默认值是 1
widthSegments — （可选）平面的宽度分段数，默认值是 1
heightSegments — （可选）平面的高度分段数，默认值是 1
如下代码，我们使用上述几何体绘制了网格状的线框平面矩形：
<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>
前一篇: three.js几何体之圆环缓冲扭结几何体
下一篇: three.js几何体之立方缓冲几何体
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2025-5-19 18:30 发布: 这也可以，像一扇门在转
