花潮论坛

搜索
热搜: 活动 交友 discuz
查看: 271|回复: 153

three.js几何体之圆形缓冲几何体

[复制链接]
  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

    发表于 2025-5-12 12:21 | 显示全部楼层 |阅读模式

    请马上登录,朋友们都在花潮里等着你哦:)

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    圆形缓冲几何体(CircleGeometry)是欧式几何的一个简单形状,它由围绕着一个中心点的三角分段的数量所构造,由给定的半径来延展。 同时它也可以用于创建规则多边形,其分段数量取决于该规则多边形的边数。构造器:CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float); 其中:

    radius — 圆形的半径,默认值为1
    segments — 分段(三角面)的数量,最小值为3,默认值为32
    thetaStart — 第一个分段的起始角度,默认为0。(three o'clock position)
    thetaLength — 圆形扇区的中心角,通常被称为“θ”(西塔)。默认值是2*Pi,这使其成为一个完整的圆

    下面的示例,我们用圆形缓冲几何体+基础材质画一个平面六边形:

    <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; // 场景
    	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.CircleGeometry(1, 6); // 圆形缓冲几何体
    	// 基础材质 :颜色+双面渲染
    	const material = new THREE.MeshBasicMaterial({ color: 'tan', side: THREE.DoubleSide });
    	const circle = new THREE.Mesh(geometry, material); // 创建圆形对象 : 几何体+材质
    	scene.add(circle); // 圆形对象加入到场景
    
    	// renderer.render(scene, camera); // 至此已经可以将效果渲染出来
    
    	// 动画函数
    	const render = () => {
    		requestAnimationFrame(render); // 请求关键帧动画递归调用函数自身
    		controller.update(); // 更新控制器
    		renderer.render(scene, camera); // 渲染效果
    	};
    
    	render(); // 运行动画
    	
    	window.onresize = () => renderer.setSize(window.innerWidth, window.innerHeight); // 随视窗改变渲染范围
    </script>
    

    评分

    参与人数 3威望 +130 金钱 +260 经验 +130 收起 理由
    花飞飞 + 30 + 60 + 30 很给力!
    樵歌 + 50 + 100 + 50 赞一个!
    红影 + 50 + 100 + 50 赞一个!

    查看全部评分

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-5-12 13:41 | 显示全部楼层
    这个弄出来的是平面,不是立方体了呢
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-5-12 13:45 | 显示全部楼层
    相机构筑的空间很难理解,在原始位置我左右翻面可以翻,上下翻面就不见了。移动六边形的位置后,各个方向都可以翻了。
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2025-12-1 20:32
  • 签到天数: 1052 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析(喊冤)章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理

    发表于 2025-5-12 13:54 | 显示全部楼层
    之前的球形几何体构成的是三维的,现在的球形几何体就是平面的吧。
    当分段足够多,看着就是圆了吧,分段少就是多边形了。
     
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    奋斗
    2025-12-14 08:26
  • 签到天数: 646 天

    [LV.9]以坛为家II

    1374

    主题

    7万

    回帖

    13万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥多彩人生海样胸怀春风拂面青草情怀心曲飞扬七彩绚丽活泼开朗男儿情怀鹰傲苍穹共看流星风雨同行我心永远天长地久幸福快乐春意盎然喜乐安康心想事成周年庆指尖上的流年舞会之星情人节花潮管理

    发表于 2025-5-12 14:10 | 显示全部楼层
    辛苦了
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:11 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:13 | 显示全部楼层
    红影 发表于 2025-5-12 13:54
    之前的球形几何体构成的是三维的,现在的球形几何体就是平面的吧。
    当分段足够多,看着就是圆了吧,分段少 ...

    一楼开头部分就已经说了,画的是平面六边形。我家妹纸看到我的文字说有毛病,六边形就是平面的,咋还加个前缀,我解释说,坛子里大家语文好但是数学都不好,我得罗嗦一点,即便如此,坛子里的小盆友也未能能理解
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:14 | 显示全部楼层
    本帖最后由 马黑黑 于 2025-5-12 19:16 编辑
    红影 发表于 2025-5-12 13:45
    相机构筑的空间很难理解,在原始位置我左右翻面可以翻,上下翻面就不见了。移动六边形的位置后,各个方向都 ...

    这个轨道控制是全开放的。图形对象是个平面,你翻到任意一个变和你的眼睛垂直时,就什么都看不到,你再翻一下就行。你翻转的实际上不是图像,是整个相机立体轨道。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:16 | 显示全部楼层
    红影 发表于 2025-5-12 13:41
    这个弄出来的是平面,不是立方体了呢

    一楼说清楚了的。这是一个平面几何体
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 19:47 | 显示全部楼层
    这个是个六边形纸片片。
    从你的材质库里找了下,换成MeshNormalMaterial效果更好,鼠标扯到不同的角度还发不同的光。。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 19:49 | 显示全部楼层
    马黑黑 发表于 2025-5-12 19:14
    这个轨道控制是全开放的。图形对象是个平面,你翻到任意一个变和你的眼睛垂直时,就什么都看不到,你再翻 ...

    某个瞬间的确是可以隐身,啥也看不到的。
    可以理解为片片太薄了,对眼睛对得太正了。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:52 | 显示全部楼层
    花飞飞 发表于 2025-5-12 19:49
    某个瞬间的确是可以隐身,啥也看不到的。
    可以理解为片片太薄了,对眼睛对得太正了。

    你可以想象一张纸,在某个距离下和你的眼睛视线一直,你最多只能看到一条线。而这里是精准计算,当平面图形和观者的视线同在Z轴,就应该是什么也看不到。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:52 | 显示全部楼层
    花飞飞 发表于 2025-5-12 19:47
    这个是个六边形纸片片。
    从你的材质库里找了下,换成MeshNormalMaterial效果更好,鼠标扯到不同的角度还发 ...

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 19:59 | 显示全部楼层
    把六边换成32,看上去就是个圆了。。
    这个CircleGeometry(1, 6)圆形缓冲几何体,名称很有意思。。。
    你代码上方给了四个参数,这里只出现两个。。还有两个加上会成什么样呢
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 19:59 | 显示全部楼层
    花飞飞 发表于 2025-5-12 19:59
    把六边换成32,看上去就是个圆了。。
    这个CircleGeometry(1, 6)圆形缓冲几何体,名称很有意思。。。
    你 ...

    是的。它还有默认值,你可以试着什么数字都不要,只是一个空的小括号
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 20:00 | 显示全部楼层
    马黑黑 发表于 2025-5-12 19:52
    你可以想象一张纸,在某个距离下和你的眼睛视线一直,你最多只能看到一条线。而这里是精准计算,当平面图 ...

    这个啥也看不到很容易,稍微移动一下就可以。。可见计算精准
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-12-14 13:47
  • 签到天数: 1669 天

    [LV.Master]伴坛终老

    3048

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理

     楼主| 发表于 2025-5-12 20:01 | 显示全部楼层
    花飞飞 发表于 2025-5-12 20:00
    这个啥也看不到很容易,稍微移动一下就可以。。可见计算精准

    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 20:02 | 显示全部楼层

    真的,亮片片更好看的,宇宙之光
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 20:09 | 显示全部楼层
    马黑黑 发表于 2025-5-12 19:59
    是的。它还有默认值,你可以试着什么数字都不要,只是一个空的小括号

    默认的是个圆呀。。。很圆的圆。
    数字3就是三角形。。
    其实默认的32就差不多是个圆了。但有锯齿,毛边。。。设200就圆得不得了了。
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2025-8-5 16:33
  • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾

    发表于 2025-5-12 20:24 | 显示全部楼层

    赌王发扑克飞旋着就过来 了
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持:DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-12-15 01:21 , Processed in 0.090926 second(s), 29 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表