three.js基础几何体:立方体,球,圆柱的绘制

这篇博客介绍了three.js入门,重点讲解如何使用three.js绘制基础几何体,包括立方体、球体和圆柱体,并提供了具体的代码实例和参数解释。博主分享了创建几何体的代码,以及设置材料属性和开启网格模式的方法,旨在帮助初学者理解three.js的基本用法。

学习交流欢迎加群:789723098,博主会将一些demo整理共享       

作为three.js的学习入门,一直在思考要怎样写才可以更符合初学者,对于我自己来说,本身也不是资深的玩家,也是入门不久的菜鸟,但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多,因为其是基于WenGL开发的第三方库,如果延伸下去那就会没完没了,这也违背了three.js开发的初衷(为喜欢前端图形学开发,却没有良好的webgl和js基础的人群准备,使三维图形的开发变得更加容易),所以接下来就从绘制基础的几何体开始吧,结合实际例子,这样更加简单粗暴。如果大家喜欢原生WebGL开发可以关注我另外的博客分栏:点击打开链接

在开始代码实例以前,先讲讲几种几何体的代码实现方式:

(1) 平面

 

new THREE.PlaneGeometry(100,100,10,10)

括号里的内容分别对应平面的长,宽,长方向等分量,宽方向等分量,第三第四个参数这么形容可能不太恰当,但实在找不出更恰当的形容,这里的意思是这样的,沿着长的方向将其分为10等分,沿着宽的方向将其分为10等分,参数可以根据大家的需要自己设置哈。

(2) 立方体

创建立方体的代码为:

 

new THREE.CubeGeometry(20, 20, 20, 10, 10, 10);

这里括号里的参数分别对应:长、宽、高、长方向等分量、宽方向等分量、高方向等分量;参数可以根据自己

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值