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

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

实现原理

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

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

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

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

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);

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

102 Three.js 使用几何体生成拱门形状相关推荐

threejs 形状几何体_Three.js模型几何体面积、体积计算
Three.js模型几何体面积.体积计算在工作中通过Three.js开发项目的时候,一些特定的情况下你可能需要计算一个三维模型的表面积或者体积,比如在3D打印的Web项目中,你需要计算一个三维模型的 ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
Node.js 在本地生成日志文件
文章目录 Node.js 在本地生成日志文件 1.前言 2.什么是 fs 3.new console.Console(stdout, stderr, ignoreErrors) 4.node.js 生 ...
node.js require 自动执行脚本并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太 ...
java xml 画表格_用js+xml自动生成表格的东西
摘要:这篇JavaScript栏目下的"用js+xml自动生成表格的东西",介绍的技术点是"JS+XML.自动生成.XML.生成.js.自动",希望对大家开发技 ...
three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
js输入关键词生成标签代码
转载自:http://www.lanrenzhijia.com/tab/4701.html <!DOCTYPE html> <html> <head lang=" ...
unity 多个物体围绕一个点生成圆形状
unity 多个物体围绕一个点生成圆形状适用于场景.UI 直接ctr c v 就可用 /// <summary> 需要被实例化的对象 </summary>public Gam ...

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

实现原理

102 Three.js 使用几何体生成拱门形状相关推荐

最新文章

热门文章