Three.js - Странные линии на пользовательской сетке - PullRequest
Новая
       94

Three.js - Странные линии на пользовательской сетке

0 голосов
/ 10 октября 2018

Я пытаюсь создать собственную сетку, чтобы в сцене было много настраиваемых плоскостей.

Вот код: 

geometry = new THREE.BufferGeometry();

geometry.addAttribute( 'position',  new THREE.BufferAttribute( vertexPositions, 3 ).setDynamic( true ) );
geometry.addAttribute( 'color',     new THREE.BufferAttribute( colors, 3 ).setDynamic( true ) );
geometry.addAttribute( 'opacity',   new THREE.BufferAttribute( opacity, 1 ).setDynamic( true ) );

// Initialize material
var material = new THREE.ShaderMaterial( { vertexColors: THREE.VertexColors, transparent: true, vertexShader: vertexShader, fragmentShader: fragmentShader } );

// Create something like a Wireframe of the planes
var Pgeometry = new THREE.BufferGeometry();
Pgeometry.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( ApointsPositions ), 3 ).setDynamic( true ) );
var points = new THREE.LineSegments( Pgeometry, new THREE.PointsMaterial( { color: 0x353535 } ) );
scene.add( points );

// Create planes and add to scene
planeMeshes = new THREE.Mesh( geometry, material );
planeMeshes.setDrawMode( THREE.TriangleStripDrawMode );
scene.add( planeMeshes );

Мой пользовательский материал работаетхорошо, и позвольте мне использовать непрозрачность на каждой вершине.Каждая плоскость создана, и все работает нормально.

Проблема в том, что при рендеринге сцены в каждом ряду плоскостей появляются какие-то странные линии, вот полный рабочий Codepen: Ссылка Codepen

Видите ли вы там эти диагональные линии?Вы можете сказать мне, что происходит?Я не нашел их происхождения.

Заранее спасибо!

1 Ответ

0 голосов
/ 10 октября 2018

Причина, по которой вы видите диагонали, заключается в том, что вы используете THREE.TriangleStripDrawMode, поэтому самые правые треугольники имеют общие вершины с крайними левыми треугольниками следующего ряда.Вы видите действительно вытянутый поперечный треугольник.

Чтобы решить эту проблему, избавьтесь от линии, которой вы назначаете TriangleStripDrawMode, которая вернется к значению по умолчанию трех вершин на треугольник (нетсовместное использование вершин).

Задача 2:

Первый треугольник на каждой итерации рисуется по часовой стрелке, но второй треугольник на каждой итерации рисуется против часовой стрелкипорядок, так что вы не увидите второй, если вы не измените порядок вершин на часовой.: 

// Now, it is clockwise, matching first tri
AvertexPositions.push( x,        y + 60, 0 ); //
AvertexPositions.push( x + 80,   y,      0 ); //
AvertexPositions.push( x + 80,   y + 60, 0 ); // Second triangle of a plane

Важно нарисовать все ваши треугольники в одном и том же порядке намотки.В противном случае, некоторые будут обращены вперед, а некоторые - назад.Вы можете выбрать, какая сторона будет отображаться, или визуализировать обе стороны с помощью Materials.Side

...