100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 102 Three.js 使用几何体生成拱门形状

102 Three.js 使用几何体生成拱门形状

时间:2023-04-01 03:54:06

相关推荐

102 Three.js 使用几何体生成拱门形状

Three.js的几何体已经能够创建很多的几何体模型,但是,远远还达不到特殊需求的几何体模型。今天,我就记一下如何制作特殊几何模型的感想。

这是我制作的一个简单的拱门形状的几何体。这个创建可以使用BSP插件创建两个模型一个立方体和一个圆柱进行求余。但是,今天我们不用插件,自己手动实现。接下来我说一下实现的原理。

实现原理

大家都知道,点组成的面,面组成的模型。如果我们可以进行顶点的位置调整的话,那就可以实现这个模型的创建。所有的特殊模型我们都可以按照这个原理算出。找到模型的规律,然后按照规律创建顶点,生成面,实现模型的形状,基本上就是这个道理。接下来我们看一下这个拱门是如何计算出来的。

首先,我先实例化了一个立方几何体,横向的切分数设置的大一些,可以让图形更加的平滑。

var geometry = new THREE.BoxGeometry(100, 5, 3, 400, 1);

然后,循环geometryvertices数组,这个属性是当前几何体所有顶点的位置,我们遍历数组,然后处理一半的顶点,让他计算出来修改后的顶点的位置:

geometry.vertices.forEach(function (item) {item.z -= 1.5;if (item.z < 0) {item.z = 0;}else {item.z -= Math.sqrt(2500 - item.x * item.x) - 50;}});

这样计算完成后,再实例化mesh对象,放到场景中,就会出现上面图片的效果了。

var cube = new THREE.Mesh(geometry, meshMaterial);scene.add(cube);

其实我这里只是提供了一个原理,案例只是为了验证原理的可行性,大家如果有什么想法,尽量动手去实现,别只停留在概念阶段,下面,附上我的案例地址:/blog/threejs2/-07-01/177.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。