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>
<h2>1. 二维圆环几何体</h2>
<p>圆环缓冲几何体 RingGeometry 是一个用于生成二维圆环几何体的类。构造器：</p>
<blockquote>RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)</blockquote>
<p> 其中：</p>
<blockquote>
innerRadius — 内部半径，默认值为 0.5<br>
outerRadius — 外部半径，默认值为 1<br>
thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为 3，默认值为 32<br>
phiSegments — 圆环半径的分段数字。最小值为 1，默认值为 1<br>
thetaStart — 起始角度，默认值为 0<br>
thetaLength — 圆心角，默认值为 Math.PI * 2
</blockquote>
<h2>2. 三维圆环几何体</h2>
<p>圆环缓冲几何体 TorusGeometry 是一个用于生成三维圆环几何体的类。构造器：</p>
<blockquote>TorusGeometry(radius : Float, tube : Float, radialSegments : Integer, tubularSegments : Integer, arc : Float)</blockquote>
<p> 其中：</p>
<blockquote>
radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是 1<br>
tube — 管道的半径，默认值为 0.4<br>
radialSegments — 管道横截面的分段数，默认值为 12<br>
tubularSegments — 管道的分段数，默认值为 48<br>
arc — 圆环的圆心角（单位是弧度），默认值为 Math.PI * 2
</blockquote>
<p>下面的代码将绘制上述两个几何体。每一行代码都有说明：</p>
<div id="hEdiv"><pre id="hEpre">
<script type="module">
import * as THREE from 'https://esm.sh/three'; // 导入three.js 模块
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 导入相机轨道控制模块
const scene = new THREE.Scene; // 场景
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
camera.position.set(0, -1, 10); // 相机位置
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器渲染范围
document.body.appendChild(renderer.domElement); // 渲染器元素加入到body标签
const controller = new OrbitControls(camera, renderer.domElement); // 实例化相机轨道
controller.autoRotate = true; // 开启相机轨道自动旋转
const ring_geometry = new THREE.RingGeometry(); // 二维圆环几何体
const torus_geometry = new THREE.TorusGeometry(); // 三维圆环几何体
const material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }); // 法向量材质（两个几何体共用）
const ring_mess = new THREE.Mesh(ring_geometry, material); // 二维圆环（即网格对象 Mess 实例化）
ring_mess.position.set(-2, 0, 0); // 二维圆环位置
const torus_mess = new THREE.Mesh(torus_geometry, material); // 三维圆环（即网格对象 Mess 实例化）
torus_mess.position.set(2, 0, 0); //三维圆环位置
scene.add(ring_mess, torus_mess); // 图形都加入到场景中
// 动画 : 相机绕场景跑
const animate = () => {
requestAnimationFrame(animate);
controller.update();
renderer.render(scene, camera);
};
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 窗口自适应
animate(); // 运行动画函数
</script>
<style> body { margin: 0; background: beige; /* 预览窗口样式 */ } </style>
</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> <style>
#ring, #torus { margin: auto; width: 700px; height: 500px; position: relative; }
</style>
<div id="ring">RingGeometry 二维圆环几何体</div>
<div id="torus">TorusGeometry 三维圆环几何体</div>
<script type="module">
import { THREE, mkThree } from 'https://638183.freep.cn/638183/web/ku/three.js';
// RingGeometry
const scene1 = mkThree({ id: 'ring', fov: 60 });
const geometry1 = new THREE.RingGeometry();
const material1 = new THREE.MeshBasicMaterial({ color: 0x4682B4 });
const mess1 = new THREE.Mesh(geometry1, material1);
scene1.scene.add(mess1);
scene1.startAnimation(delta => {
mess1.rotation.x += delta;
mess1.rotation.y += delta;
});
// TorusGeometry
const scene2 = mkThree({ id: 'torus', fov: 60 });
const geometry2 = new THREE.TorusGeometry();
const material2 = new THREE.MeshBasicMaterial({ color: 0x4682B4 });
const mess2 = new THREE.Mesh(geometry2, material2);
scene2.scene.add(mess2);
scene2.startAnimation(delta => {
mess2.rotation.x += delta;
mess2.rotation.y += delta;
});
</script>
二楼调用刚测试封装的模块进行演示，该模块的功能目前也就是绘制three.js图形、运行简单动画 一个圆环形平面的，铜钱状的。。一个圆环立体的，手镯形状的。。
这个颜色五彩斑斓的，材质自带的吧，好看。。
二楼的我没看到，也是浏览器的问题？待我换个试看看 花飞飞 发表于 2025-5-16 19:46
一个圆环形平面的，铜钱状的。。一个圆环立体的，手镯形状的。。
这个颜色五彩斑斓的，材质自带的吧，好看 ...
这个材质说多少次了，是自带光感、固定颜色的 花飞飞 发表于 2025-5-16 19:46
一个圆环形平面的，铜钱状的。。一个圆环立体的，手镯形状的。。
这个颜色五彩斑斓的，材质自带的吧，好看 ...
那个是测试封装，也不知道兼容性如何 马黑黑 发表于 2025-5-16 19:58
这个材质说多少次了，是自带光感、固定颜色的
分明有的没有啊。大哥。{:4_170:} 花飞飞 发表于 2025-5-16 20:08
分明有的没有啊。大哥。
我说了很多次了，而且都是回答你的 马黑黑 发表于 2025-5-16 19:59
那个是测试封装，也不知道兼容性如何
我可啥也没看到。。。
难道又要换浏览器{:4_203:} 花飞飞 发表于 2025-5-16 20:08
我可啥也没看到。。。
难道又要换浏览器
我估计你的浏览器不稳定 马黑黑 发表于 2025-5-16 20:08
我说了很多次了，而且都是回答你的
{:4_170:}那是搬砖累糊涂了，一直纠结这个 马黑黑 发表于 2025-5-16 20:09
我估计你的浏览器不稳定
整个三角架支上？我是没办法了。手机看你发的贴子也没看到 花飞飞 发表于 2025-5-16 20:11
整个三角架支上？我是没办法了。手机看你发的贴子也没看到
我刚试了几个设备，都是秒开 马黑黑 发表于 2025-5-16 20:14
我刚试了几个设备，都是秒开
啊啊啊。。。网络问题。我数据试看看。 马黑黑 发表于 2025-5-16 20:14
我刚试了几个设备，都是秒开
行了，电脑不行，无线网络不行。。。用了数据流量秒开。。 花飞飞 发表于 2025-5-16 20:28
啊啊啊。。。网络问题。我数据试看看。
数据应该行。不过这很奇怪 花飞飞 发表于 2025-5-16 20:30
行了，电脑不行，无线网络不行。。。用了数据流量秒开。。
你重启一下家里的光猫、路由器，长时间不重启，它们有冗余了 还是三维的漂亮啊，尤其这自带光感的效果，真的太美了{:4_199:} 马黑黑 发表于 2025-5-16 18:08
#ring, #torus { margin: auto; width: 700px; height: 500px; position: relative; }
这个设置了颜色倒不如自带的漂亮呢{:4_173:} 把两个放在一起展示也有趣，转到某个角度能看到二维的成纸片一样的呢{:4_173:}