js输出一个菱形_Threejs使用菱形正方形算法，中点替换算法生成随机地形

2024-05-10 04:11:43

源码：

https://github.com/srchea/Terrain-Generation

https://github.com/IceCreamYou/THREE.Terrain

菱形正方形算法(diamond square algorithm)

随机地形生成中，我们面临的问题就是给出一个位置(x,z)，如何找到它的高度y，使其成为我们想要的地形。如果仅仅是随机给出一共y的话，那么地形必然是遍布尖峰和悬崖，而本篇文章用到的算法可以很好地解决这个问题。

下面这张图很好地解释了这个算法。

算法可分为如下几步：

在一个大正方形上，随机生成左上，左下，右上，右下点的高度，如第一幅图
正方形步骤，以上述四点的平均值加上一个噪音得到正中心点的高度，第二幅图。
菱形步骤，左边中间的点以正中，左上，左下三个点如果自己不是边界的话再加上自己左边的点，取平均值加噪音算出高度，第三幅图其余三个橘点同理
这样就得到了新的四个小正方形及顶点坐标，长度减半地递归第2步

在第一份源码中，算法相关代码可在js/classes/TerrainGeneration.js中看到，效果图如下。

注意到右边信息栏了吗?是的，还能可以改变纹理与雾。此外，作者还自己写了一个js导航控制帮助移动摄像机，总之非常容易上手。

中点替换算法（midpoint displacement algorithm）

与上面菱形正方形算法非常相似。

第一步，在正方形四个顶点生成四个随机数字

2.在边界的中点根据平均值继续生成，所谓的中点替换。当然可以根据需要加上噪音，再规定一共平滑参数，去乘上噪音加到最终结果中

3.计算正中心的点

4.递归

最终效果，Demo见参考[2]

怎么样？很简单吧？

试着把第一份源码里的菱形正方形算法改成中点替换算法吧。

根据这两种算法可以生成很多好看的地形

来源：参考[3]

头图

头图效果则是第二份代码，有些复杂，但代码注释非常地详细，也可从第一个版本开始读起。

参考

[翻译]随机分形地形生成 - lookof - 博客园

中点替换算法及演示

中点替换算法

js输出一个菱形_Threejs使用菱形正方形算法，中点替换算法生成随机地形相关推荐

js输出一个菱形_用js代码打印菱形
用js代码打印菱形 Document //1.循环行数 //2.获取每一行星星的个数 //3.获取每一行空格的数量 //4.先循环每一行空格的数量,再循环每一行星星的数量 //5.每一行的空格和星星循 ...
js输出一个菱形_Webpack 4入口、输出和ES6模块
什么是Webpack? 在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题.Webpack是一个模块打包器.这意味着,它的目的是(根据它们之间的依赖)合并一组模块.它的 ...
js输出一个菱形_JS打印输出各种形状
document.writeln("打印不同形状 ") //打印不同形状 document.writeln("* "); //打印一颗* document.wr ...
node如何输出html页面,【自己的整理】node.js直接输出一个非常简单的HTML页面-Go语言中文社区...
刚开始接触nodejs,先记录一下最开始用node输出一个很简单的界面在远程服务器上先创建一个js文件 helloworld.js [root@towrabbit nodejsLearn]# vi ...
java在控制台输出空心正方形，菱形，空心菱形
使用for和if打印一个空心正方形 /*思路:要想打印一个5x5的空心正方形,首先它的第一横行和最后一行都是填满的,需要全部遍历出来,第二三四行和只有左右两条边是出来的,中间部分为空的.因此在打印第 ...
利用JS中的循环语句来实现正方形、长方形、平行四边形、三角形、菱形、空心菱形。
利用JS来制造图形代码 1.正方形 2.长方形 3.平行四边形 4.三角形 5.菱形 6.空心菱形 7.效果图总结代码 1.正方形代码如下(示例): <script>for (va ...
c语言：输出一个菱形图
输出一个菱形图. 解:程序: #include<stdio.h> int main() { int i, j; char diamond[][5] = { {' ',' ','*'},{' ...
C语言存储编码输出,C语言怎么输出一个菱形
C语言怎么输出一个菱形 C语言是计算机的高级语言,在IT行业被众多的人们是使用,由于IT行业的热门,使用以及学习C语言的人越来越多,掌握一些C语言基本的语言是非常重要的,只有基础知识扎实了,才能在C语 ...
输出一个菱形星星图案
输出一个菱形星星图案代码 <?php //当满足$center>=$row时,图案能够完全显示; $row = 10; $center = 10; $rowLength = 2 * $c ...

最新文章

热门文章