修改 THREE.BufferGeometry 对象中的顶点 [英] Modify vertices in a THREE.BufferGeometry object

问题描述

我需要有选择地显示/隐藏 1000 多条不同大小、位置和颜色的行.

I need to selectively show/hide 1000+ lines of different sizes, positions and colors.

我的第一次尝试制作了一个 THREE.Geometry，每个都有一个名字.为了隐藏/显示，我根据名称和我的启发式遍历场景并隐藏/显示每个场景.这看起来很慢 - 大约 1000 行大约 50Hz.

My first attempt made a THREE.Geometry with a name for each. To hide/show I iterate over scene and hide/show on each based on name and my heuristic. That seemed very slow - around 50Hz for ~1000 lines.

我使用类似的方法进行了测试，但仅使用一个 THREE.Geometry 来保存所有线条.那当然要快得多，但我只能将一种材料应用于所有线条，这是不好的.我能够在应用程序运行时设置正确的标志并更新线条的位置.

I made a test using a similar approach but using only a single THREE.Geometry to hold all of the lines. That was much faster but of course but I can only apply one material to all the lines which is no good. I was able to set the right flags and update the positions of the lines while the app was running though.

最好的方法似乎是使用 THREE.BufferGeometry.我做了一个非常快的测试，并且在初始设置时按预期工作，但之后我无法更改每条线的位置/可见性和颜色.我做了一个 JS 小提琴来说明它 - http://jsfiddle.net/SSnKk/ - 但调用 buffer_geometry.dynamic =true; 和 buffer_geometry.verticesNeedUpdate = true; 似乎没有帮助.

The best approach seems to be to use THREE.BufferGeometry. I made a test which was very fast and worked as expected for the initial set up but I was unable to change the position/visibility and color of each line afterwards. I made a JS fiddle that illustrates it - http://jsfiddle.net/SSnKk/ - but calling buffer_geometry.dynamic = true; and buffer_geometry.verticesNeedUpdate = true; didn't appear to help.

推荐答案

需要致电

buffer_geometry.attributes.position.needsUpdate = true;
buffer_geometry.attributes.color.needsUpdate = true;

更新小提琴:jsfiddle.net/hjx3rLmt/1

three.js r.76

three.js r.76

这篇关于修改 THREE.BufferGeometry 对象中的顶点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！