请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
网格几何体 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>
|