three.js几何体之车削缓冲几何体
车削缓冲几何体 LatheGeometry 用来创建具有轴对称性的网格，比如花瓶，车削绕着Y轴进行旋转。构造器：
LatheGeometry(points : Array, segments : Integer, phiStart : Float, phiLength : Float)
其中：
points — 一个Vector2对象数组。每个点的X坐标必须大于0。缺省时默认使用数组 [ [0,-0.5], [0.5,0], [0,0.5] ] 创建 Vector2 对象数组 构成一个简单的钻石形状
segments — 要生成的车削几何体圆周分段的数量，默认值是 12
phiStart — 以弧度表示的起始角度，默认值为 0
phiLength — 车削部分的弧度（0-2PI）范围，2PI 将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI
以下代码使用默认的点数组结构但扩大一倍的方式创建 Vector2 对象数组，最终效果是一个线框化的钻石图案：
<div style="position: absolute; color: #eee; margin: 10px;">点击页面可暂停/继续动画</div>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
var scene = new THREE.Scene;
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 定义 Vector2 对象数组 ：默认数组结构，加大一倍
var points = [[0,-1], [1,0], [0,1]].map(item => new THREE.Vector2(item[0], item[1]));
// 创建车削图形
var mesh = new THREE.Mesh(
new THREE.LatheGeometry(points), // 参数空则使用 [[0,-0.5], [0.5,0], [0,0.5]] 构建的顶点数组
new THREE.MeshBasicMaterial({ color: 0xde7070, wireframe: true })
);
mesh.rotateX(-0.1); // 图像在X轴上略微倾斜
scene.add(mesh);
var animate = () => {
requestAnimationFrame(animate);
var delta = clock.getDelta();
mesh.rotation.y -= delta / 5;
renderer.render(scene, camera);
};
document.onclick = () => clock.running ? clock.stop() : clock.start();
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
animate();
</script>
前一篇: three.js几何体之形状缓冲几何体
下一篇: three.js几何体之边缘几何体
发表评论:
评论列表 [0条]
