javascript - 插入 3d 颜色 Three.js

标签 javascript math three.js

我有一个 3d 网格和 11 个静态点,并带有预定义值。点表示为 3d 空间中的位置和值的数组:

 x: 0.3 y: 0.4, z: 0.5, value: 100,
 x: 0.6 y: 0.9, z: 0.66, value: 20,
 x: 0.4 y: 0.22, z: 0.35, value: 50,
 x: 0.11 y: 0.34, z: 0.65, value: 0,
 x: 0.35 y: 0.65, z: 0.5, value: 0,
 x: 0.22 y: 0.67, z: 0.5, value: 0,
 x: 0.43 y: 0.22, z: 0.5, value: 0,
 x: 0.67 y: 0.31, z: 0.5, value: 16,
 x: 0.84 y: 0.34, z: 0.5, value: 13,
 x: 0.22 y: 0.43, z: 0.5, value: 0,
 x: 0.13 y: 0.24, z: 0.5, value: 11,

我想为 3D 网格的面着色,并为此需要为每个面添加一些值,具体取决于它们距此点的距离。我已经知道每个面的位置,但是如何找到它们的值呢?我应该使用哪种插值方法? 例如这张脸x: 0.34, y: 0.43, z: 0.18, value: ? 理想情况下,我正在寻找一些 js/two.js 解决方案/库来在前端执行它,或者寻找一些其他 python 库来在后端处理它?<​​/p>

enter image description here

我找到了几种方法,但它们仅适用于 2 或仅支持 2 点之间的插值,但如何将其应用于数组?

最佳答案

我会使用体素图来​​移植这个Interpolating elements of a color matrix on the basis of some given reference elements进入 3D。因此,您只需渲染填充的体素化四面体,而不是渲染三 Angular 形...这将创建规则的颜色图,可以与三线性插值一起使用以获得任何位置的颜色。

另一种选择是找到距离您的位置最近的 4 个引用点,以便您的点位于四面体内部,并使用三线性插值之类的方法来插值颜色,您只需在三 Angular 形的每个面上使用重心坐标...

如果您获得了 yoru 网格的 UV 映射,您可以将引用点投影到它并从那里使用 2D 算法。

关于javascript - 插入 3d 颜色 Three.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74409075/

相关文章:

python - 如何在 PyGame 中找到圆上点的坐标?

python - numpy.sin 函数以度为单位?

three.js - 将 ThreeJS 几何图形导出为 JSON

javascript - 从变量加载模型

javascript - 如何重复div类?

php - 在 PHP 中获取多个数字的比率的最简单方法是什么?

javascript - 如何计算两个平面之间的 Angular ?

javascript - 如何在 firebase 函数的子级之一的写入触发器上从数据库读取任何数据?

javascript - 在 cfm 中将文本框值从父页面传递到子窗口

three.js - Three.js如何运行shader程序