three.js几何体之球缓冲几何体
<style>#btnPrev { box-shadow: 2px 2px 6px rgba(0,0,0,.5); }
#btnPrev:hover { box-shadow: 2px 2px 12px rgba(0,0,0,.5); font-weight: bold; }
</style>
<p>球缓冲几何体 phereGeometry 一个用于生成球体的类。构造器：</p>
<blockquote>SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)</blockquote>
<p> 其中：</p>
<blockquote>
radius — 球体半径，默认为 1<br>
widthSegments — 水平分段数（沿着经线分段），最小值为 3，默认值为 32<br>
heightSegments — 垂直分段数（沿着纬线分段），最小值为 2，默认值为 16<br>
phiStart — 指定水平（经线）起始角度，默认值为 0<br>
phiLength — 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2<br>
thetaStart — 指定垂直（纬线）起始角度，默认值为 0<br>
thetaLength — 指定垂直（纬线）扫描角度大小，默认值为 Math.PI<br>
</blockquote>
<p>该几何体是通过扫描并计算围绕着Y轴（水平扫描）和X轴（垂直扫描）的顶点来创建的。 因此，不完整的球体（类似球形切片）可以通过为phiStart，phiLength，thetaStart和thetaLength设置不同的值来创建， 以定义开始（或结束）计算这些顶点的起点（或终点）。</p>
<p>以下代码实现了带线框的球体绘制，实际上是嵌套了两个球体图形，一个是线框球，另一个是纯色球，代码中还加入了 three.js 的 Clock 对象用于间接控制动画的运行与暂停：</p>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<blockquote><button id="btnPrev" name="btnPrev" type="button" value="prev">运行代码</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
btnPrev.onclick = () => {
const value = hEpre.textContent + '<style>body {margin: 0; }</style>';
const previewWindow = window.open('', 'preview1', 'width=1200,height=768,top=100,left=100');
previewWindow.document.open();
previewWindow.document.write(value);
setTimeout(function() { previewWindow.document.title = "预览" }, 100);
previewWindow.document.close();
};
</script>
此前发过一个画球体的帖，这里侧重对球缓冲几何体的介绍 木看到图图{:4_203:} 樵歌 发表于 2025-5-17 09:55
木看到图图
运行代码才会看到效果。另外，有些浏览器会阻止预览窗口的弹出，这也会看不到效果 马黑黑 发表于 2025-5-17 10:03
运行代码才会看到效果。另外，有些浏览器会阻止预览窗口的弹出，这也会看不到效果
能否推荐个功能强大的浏览器吖{:4_203:} 樵歌 发表于 2025-5-17 10:06
能否推荐个功能强大的浏览器吖
兼容性好、轻快的是百分浏览器：
https://www.centbrowser.cn/ 有线框更能看出它的创建方式，这个又是一种动画方式呢{:4_187:} 马黑黑 发表于 2025-5-17 09:02
此前发过一个画球体的帖，这里侧重对球缓冲几何体的介绍
上次是简介吧，这个是专项介绍。
弄得我赶紧跑回去看前面的了{:4_173:} 这个是用自设的颜色，不是默认的了，也很漂亮。这个动画的设置应该能控制它的快慢了{:4_187:} 红影 发表于 2025-5-17 10:57
这个是用自设的颜色，不是默认的了，也很漂亮。这个动画的设置应该能控制它的快慢了
快慢一直是可以控制的，运动歩幅的调整而已 红影 发表于 2025-5-17 10:51
上次是简介吧，这个是专项介绍。
弄得我赶紧跑回去看前面的了
之前画过一个圆球的 红影 发表于 2025-5-17 10:48
有线框更能看出它的创建方式，这个又是一种动画方式呢
线框之前用过的 黑黑老师，我下载了您给的浏览器，现在能看到运行代码中的蓝色圆球了。太感谢了！ 这个颜色和效果都漂亮，线框套纯色，曾在锥形体里出现过~~
刚才跟了一个贴子，改大小和位置都能成功。。
但位置更改后，鼠标手形的响应区还在原地。。没整成。。。{:4_173:}
马黑黑 发表于 2025-5-17 11:00
快慢一直是可以控制的，运动歩幅的调整而已
我是到了这个帖子里才看出来的{:4_173:} 马黑黑 发表于 2025-5-17 11:00
之前画过一个圆球的
是的，这里的讲解更加详细。 马黑黑 发表于 2025-5-17 11:01
线框之前用过的
知道，我是说有线框看着更加清楚呢{:4_187:} 红影 发表于 2025-5-17 21:24
知道，我是说有线框看着更加清楚呢
那是。还有一种几何体就叫做网格线几何体 红影 发表于 2025-5-17 21:23
我是到了这个帖子里才看出来的
一直看着总会有看得懂的
页:
[1]
2