使用 THREE.BufferGeometry 创建具有不同端点的 THREE.Line [英] Creating THREE.Line's with different endpoints using THREE.BufferGeometry

问题描述

我正在使用 THREE.BufferGeometry 创建几个 THREE.Lines.最初，我的应用程序让它们都从原点开始，并且一切都按预期进行.现在，我希望能够随时开始(和结束)它们.

I am creating several THREE.Lines using THREE.BufferGeometry. Initially my app had them all starting at the origin and things worked as expected. Now, I would like to be able to start (and end) them at any point.

这个小提琴(http://jsfiddle.net/9nVqU/)说明(我希望)如何改变远离原点的线的一端会导致意外结果.

This fiddle (http://jsfiddle.net/9nVqU/) illustrates (I hope) how changing one end of the line away from the origin causes unexpected results.

我想知道这是不是因为任何给定的行都跟在上一行之后 - 切换开始/结束顺序并没有改变任何东西，所以如果这是真的，我希望它会中断.

I wondered if it was because any given line follows on from the previous one - switching the start/end order didn't change anything though so if that were true, I'd expect it to break.

也许我的数组设置不正确，或者告诉 THREE.js 如何解释它的属性 - 我想我需要每行 2 * 3 个顶点，但我对 buffer_geometry.attributes = {似乎让事情变得更糟.

Maybe I have the arrays set up incorrectly or the attributes that tell THREE.js how to interpret it - I think I need 2 * 3 verts for each line but changes I made to buffer_geometry.attributes = { seemed to make things worse.

FWIW，我想要达到的实际效果是根据用户输入有选择地打开和关闭线路.我已经可以通过改变最终位置来做到这一点，但是我失去了那个价值，我不想把它存储在其他地方.我以为我可以将起点移动到终点将其关闭，然后再次将起点移动到原点以重新启用它.如果有一种方法可以使用 BufferGeometry 单独启用/禁用线条，那显然会更好.

FWIW, the actual effect I'm trying to achieve is to selectively turn on and off the lines based on user input. I can do that already by changing the end position but then I lose that value and I don't want to store it elsewhere. I thought that I could move the start point to the end point to switch it off and then move the start point to the origin again to re-enable it. If there is a way to enable/disable lines individually with BufferGeometry, then that would clearly be better.

推荐答案

首先，你必须这样做:

var line = new THREE.Line( buffer_geometry, material );
line.type = THREE.LinePieces;

其次，r.58 不支持，但应该支持.

Second, this is not supported in r.58 , but should be.

作为一种变通方法，您可以像这样修改 WebGLRenderer.renderBufferDirect():

As a work-around, you can hack WebGLRenderer.renderBufferDirect() like so:

// render lines

setLineWidth( material.linewidth );

var position = geometryAttributes[ "position" ];

primitives = ( object.type === THREE.LineStrip ) ? _gl.LINE_STRIP : _gl.LINES;
_gl.drawArrays( primitives, 0, position.numItems / 3 );

_this.info.render.calls ++;
_this.info.render.points += position.numItems;

three.js r.58

three.js r.58

这篇关于使用 THREE.BufferGeometry 创建具有不同端点的 THREE.Line的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！