通过 Threex.dilategeometry.js 进一步平滑 THREE.TextGeometry 对象的顶点

W9914420

这是一个非常具体的问题,所以我会尽力阐明和解释这个问题。所以我的目标是创建一种效果,使我的 TextGeometry 看起来膨胀或膨胀的Text我设法找到了一个 Three.js 扩展名为threex.dilategeometry.js将允许我扩张对象的几何形状。

  1. 例如,这就是我的文本通常的外观:

普通文本几何

  1. 包含了 Threex.dilategeometry 我应用了 %15 的扩张因子,所以文本现在看起来像这样:

三倍扩张几何效应

所以你可以看到效果按预期工作。请看下面的代码:

    //Self made function to create text

    var one = new threeLab.asset.CreateMasterText(this.text,'Lambert');
    this.scene.add(one.wireframe);
    this.scene.add(one.mesh);

    //lets clone it
    var geoclone = one.geometry.clone();

    //need these to make it work
    geoclone.mergeVertices();
    //geoclone.computeCentroids();
    geoclone.computeFaceNormals();
    geoclone.computeVertexNormals();

    //the threex dilate effect
    THREEx.dilateGeometry(geoclone, 0.15);

    //create new material and add to a new mesh to create the halo effect
    var testMat     = new THREE.MeshNormalMaterial({color:0x222222});
    var meshHalo    = new THREE.Mesh(geoclone, testMat );

    this.scene.add( meshHalo );

为了使扩展工作,它依赖于:

    geoclone.mergeVertices();
    geoclone.computeFaceNormals();
    geoclone.computeVertexNormals();

我假设所有的顶点/面计算都用扩张效果来翻译它们。由于 TextGeometry 的影响,我注意到的一件事是,有些字母翻译得不好,您会在某些字母上看到锯齿状边缘:

在此处输入图片说明 在此处输入图片说明

所以我的问题是,是否有可能以某种方式进一步平滑文本几何的顶点以提供更平滑和更少锯齿状的外观?

更新 30/03/17

因此,我增加了挤出文本几何体的斜角段,这有助于在应用三倍效果之前更好地将其圆整

斜面增加

斜角段2

W9914420

因此,我增加了 TextGeometry 对象的“Bevelsegments”以创建更圆润的文本。练习的全部目的是我想用下面的对象包裹文本:

在此处输入图片说明

在此处输入图片说明

非常感谢@2pha :)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

通过 Three.js 中的特定顶点改变对象的位置

node.js请求对象-返回响应主体以进行进一步操作

Three.js + Threex + Javascript:“ fromArray不是函数”?

进一步/递归对象解构

进一步优化熊猫DataFrameGroupBy对象

Powershell进一步解析选择对象

THREE.js逐顶点旋转对象顶点

使用TextGeometry(Three.js)无法正确呈现文本

使用通过 DT::renderDataTable 在输出中呈现的数据进行进一步绘图

通过单击更改文本并记住答案以进行进一步比较

通过多个主机中止进一步的任务执行

通过Swift协议进一步约束泛型函数

我想要可以通过进一步单击链接访问的原始数据

使用Three.js,WebGL显示对象的顶点并旋转对象

对象数组具有对象的进一步内部数组

如果可以进一步压缩 angular2 Js 包文件

将工具提示从Chart.js的数据点进一步移开?

输入文本的裁切值为NaN,以供进一步计算。仅JS

简单 JS 游戏中分数的进一步问题

存储Java对象以在使用REST的WebApp中进一步使用

为 await 中的对象字段分配新值会阻止进一步的说明

请如何进一步拆分对象中的字符串?

Gremlin:如果是,则检查顶点是否存在,然后继续进行进一步的旅行

通过进一步的函数传递 DT::renderDataTable 中的选定行以呈现另一个表

Three.js-AxisHelper上的标签带有TextGeometry和旋转问题

在 Three.js 中为 TextGeometry 加载字体时出现 CORS 策略错误

向IPython Notebook注入/执行JS代码,并在重新加载页面时禁止其进一步执行

将 request.get 中的值分配给 const 以供进一步使用。节点 Js

如何在 Powershell 中修剪管道对象并在管道下方进一步使用它?