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