javascript - Three.js - 获得低多边形外观

标签 javascript html three.js 3d

我正在尝试生成一些低多边形风格的地形,供引用,这种风格:

我的意思是每个三 Angular 形都是一个阴影。

当我尝试这样的事情时,阴影非常平滑。这是一个只有几个三 Angular 形的例子:


(来源:willdonohoe.com)

我也尝试添加阴影,但这也没有产生预期的效果。这是一个带有更多三 Angular 形并添加了阴影的镜头:


(来源:willdonohoe.com)

查看 Three 文档,materials 类的 shading 属性听起来可以解决问题,但 THREE.FlatShading 和 THREE.NoShading 似乎没有任何效果。

创建此效果需要使用特殊技术吗?如果您能指出我的方向,我们将不胜感激。

你可以找到我的第一个演示 here

非常感谢,

最佳答案

编辑:这个答案已经过时了。更新:

material.shading = THREE.FlatShading 现在是 material.flatShading = true

您修改了PlaneGeometry 的顶点位置。

要使用 MeshLambertMaterial 生成平面着色,您必须通过调用更新法线

geometry.computeFlatVertexNormals();

对于其他 Material ,只需设置 material.flatShading = true 就足以获得平面外观。

three.js r.87

关于javascript - Three.js - 获得低多边形外观,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25428063/

相关文章:

three.js - 在 Three.js 中相对于对象旋转向前移动

javascript - Jquery 选择图像

javascript - Firebase Auth 登录状态持久性不起作用

javascript - 主列表应用程序中的第一个列表元素在详细 View 中渲染表格的行项目两次

three.js - 有没有可能在 threejs 中使用 GIF 动画?

javascript - Three.js 将两个对象连接为一个对象

javascript - 更新 : Changing the color of Negative Predetermined Value Using Javascript/Jquery

html - 表单 block 不会相互堆叠

javascript - 根据字母添加类别

html - WAI-ARIA Compliance 适用于不包含文本的按钮