three.js几何体之网格几何体WireframeGeometry
网格几何体 WireframeGeometry 可以被用作一个辅助物体，来对一个 geometry 几何体以线框的形式进行查看。构造器：
WireframeGeometry( geometry : BufferGeometry )
其中：geometry — 任意几何体对象。
网格几何体 WireframeGeometry 类似于材质（Material）启用了 wireframe: true 的配置，类似但不完全一致，网格几何体 WireframeGeometry 定制的自由度更高。以下示例代码的核心是：创建一个球体几何体 SphereGeometry，以其为基础将其网格线化，然后使用 LineSegments 构建最终图像。Line* 材质默认白色，可定制：
<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>
前一篇: three.js几何体之球缓冲几何体
下一篇: three.js几何体之圆环缓冲扭结几何体
发表评论:
评论列表 [0条]
