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>胶囊图形几何体（CapsuleGeometry）CapsuleGeometry是一个胶囊图形类，通过半径和高度来进行构造。构造器：</p>
<blockquote>CapsuleGeometry(radius : Float, height : Float, capSegments : Integer, radialSegments : Integer, heightSegments : Integer)</blockquote>
<p> 其中：</p>
<blockquote>
radius — 胶囊半径。可选的; 默认值为1<br>
height — 中间区域的高度。可选的; 默认值为1<br>
capSegments — 构造盖子的曲线部分的个数。可选的; 默认值为4<br>
radialSegments — 覆盖胶囊圆周的分离的面的个数。可选的; 默认值为8<br>
heightSegments — 胶囊侧面沿其高度的段数，默认值为 1
</blockquote>
<p>下面的示例，我们用胶囊几何体+基础材质画一个线框立体图案：</p>
<div id="hEdiv"><pre id="hEpre">
<div style="position: absolute;color: #eee;margin: 10px;">可以使用鼠标操作图像</div>
<script type="module">
import * as THREE from 'https://esm.sh/three'; // three主库
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; // 轨道控制库
const scene = new THREE.Scene; // 场景
scene.background = new THREE.Color('rgba(40,40,40,0.5)'); // 场景背景色
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 相机
camera.position.set(0, 0, 5); // 相机位置
const renderer = new THREE.WebGLRenderer({ antialias: true }); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 渲染器范围
document.body.appendChild(renderer.domElement); // 渲染器加入到body标签
const controller = new OrbitControls(camera, renderer.domElement); // 实例化轨道控制器
const geometry = new THREE.CapsuleGeometry(1, 1, 4, 8);; // 胶囊图形几何体
// 基础材质 ：颜色+线框
const material = new THREE.MeshBasicMaterial({
color: 'cyan',
wireframe: true
});
const capsule = new THREE.Mesh(geometry, material); // 创建胶囊对象 : 几何体+材质
scene.add(capsule); // 胶囊对象加入到场景
// renderer.render(scene, camera); // 至此已经可以将效果渲染出来
// 动画函数
const render = () => {
requestAnimationFrame(render); // 请求关键帧动画递归调用函数自身
controller.update(); // 更新控制器
renderer.render(scene, camera); // 渲染效果
};
render(); // 运行动画
window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight);
</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_173:}这个也太真实了吧，特别是在扯动着的时候。。3D真神奇。。 换了几种材质看了下，多数是黑色。还是彩色那个最好看，换设置后颜色就不起作用了。
还是基础材质百搭。。 胶囊图形几何体（CapsuleGeometry）它本身就是一个胶囊形状的，是不是还有别的很多形状{:4_173:}
感觉这3D跟X光似的，特别是设为网格，透视全都出来了
能鼠标移动各个方位观察，感觉这用处可大了。。
电影里应该也可以用到
花飞飞 发表于 2025-5-12 20:34
换了几种材质看了下，多数是黑色。还是彩色那个最好看，换设置后颜色就不起作用了。
还是基础材质百搭。。
不能自发光的材质都是要加入光源 花飞飞 发表于 2025-5-12 20:36
胶囊图形几何体（CapsuleGeometry）它本身就是一个胶囊形状的，是不是还有别的很多形状
感觉这3D ...
电影特效也有用three.js实现的部分，不过是另外封装的更专业的资源，收费的 原来还有专门的胶囊几何体啊，这个倒是立体的呢{:4_187:} 这个演示的设置就是默认的吧，分段太少了，胶囊的边缘不那么光滑呢{:4_187:} 所有这些three.js都是可以鼠标互动的呢，真好{:4_187:} 红影 发表于 2025-5-12 21:02
这个演示的设置就是默认的吧，分段太少了，胶囊的边缘不那么光滑呢
1,1,4,8 是默认的设置参数 红影 发表于 2025-5-12 21:04
所有这些three.js都是可以鼠标互动的呢，真好
这是导入了 OrbitControls，相机轨道控制 红影 发表于 2025-5-12 21:00
原来还有专门的胶囊几何体啊，这个倒是立体的呢
几何体有平面的立体的，一般看名称都能知道是哪一类 花飞飞 发表于 2025-5-12 20:36
胶囊图形几何体（CapsuleGeometry）它本身就是一个胶囊形状的，是不是还有别的很多形状
感觉这3D ...
几何体不算太多，都介绍完之后我会给一个汇总 马黑黑 发表于 2025-5-12 20:47
不能自发光的材质都是要加入光源
{:4_173:}好象越来越有点理解了。。 马黑黑 发表于 2025-5-12 20:48
电影特效也有用three.js实现的部分，不过是另外封装的更专业的资源，收费的
电影用的得多少代码呀。。
这个少少的就可以出现这么完美 效果，让人赞叹 马黑黑 发表于 2025-5-12 21:15
几何体不算太多，都介绍完之后我会给一个汇总
好哒，期待一下{:4_173:} 花飞飞 发表于 2025-5-12 21:23
电影用的得多少代码呀。。
这个少少的就可以出现这么完美 效果，让人赞叹
你看阿凡达，一百多台安装 Linux 系统的计算机做特效 花飞飞 发表于 2025-5-12 21:23
好哒，期待一下
谢谢期待 花飞飞 发表于 2025-5-12 21:20
好象越来越有点理解了。。
不发光的材质，打个光就能看见了 马黑黑 发表于 2025-5-12 21:13
1,1,4,8 是默认的设置参数
嗯嗯，知道默认的出来是什么样的了{:4_173:}