three.js几何体之球缓冲几何体
球缓冲几何体 phereGeometry 一个用于生成球体的类。构造器：
SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)
其中：
radius — 球体半径，默认为 1
widthSegments — 水平分段数（沿着经线分段），最小值为 3，默认值为 32
heightSegments — 垂直分段数（沿着纬线分段），最小值为 2，默认值为 16
phiStart — 指定水平（经线）起始角度，默认值为 0
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2
thetaStart — 指定垂直（纬线）起始角度，默认值为 0
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI
该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。 因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建， 以定义开始（或结束）计算这些顶点的起点（或终点）。
以下代码实现了带线框的球体绘制，实际上是嵌套了两个球体图形，一个是线框球，另一个是纯色球，代码中还加入了 three.js 的 Clock 对象用于间接控制动画的运行与暂停：
<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, 8); // 相机位置
const clock = new THREE.Clock(); // 时钟（用于动画）
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 material = new THREE.MeshBasicMaterial({ color: 0x008080, wireframe: true }); // 材质
const ball = new THREE.Mesh(geometry, material); // 二十面体网格对象
const frame_ball = ball.clone(); // 克隆网格对象 ：用作线框
frame_ball.material = frame_ball.material.clone(); // 克隆自己的材质以便更改参数不影响母体材质
frame_ball.material.color.set(0x006570); // 设置颜色
frame_ball.material.wireframe = false; // 设置线框
ball.add(frame_ball);
scene.add(ball); // 网格对象加入到场景
scene.add(ball);
// 动画函数
const animate = () => {
requestAnimationFrame(animate); // 请求关键帧动画递归调用函数自身
const delta = clock.getDelta();
ball.rotation.x += delta / 5;
ball.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几何体之网格几何体WireframeGeometry
发表评论:
评论列表 [0条]
