Tringular mesh in three.js - проблемы с рендерингом треугольной грани - PullRequest
Новая
       55

Tringular mesh in three.js - проблемы с рендерингом треугольной грани

0 голосов
/ 05 декабря 2018

Я пытался создать простую сетку, визуализированную в three.js.Мне успешно удалось отобразить набор точек на основе ввода текста, но у меня возникли некоторые проблемы при попытке соединить точки с треугольными гранями для формирования сетки.

Песочница: https://codesandbox.io/s/n600rw2yl

  1. Вверху слева Загрузка файла через FileReader (в Песочнице тестовый файл находится в папке src - mesh2.txt)

  2. Process Result - анализирует загруженный файлфайл и создает объект узла

3.Push Hones создает THREE.Vector3 из узлов и толкает их к геометрии.вершины, а также отображает их как точки.

  • до этой части все как надо.

Но после нажатия последней кнопки - толкать элементы, я запускаю функцию push_elements()где я просто хочу создать один треугольник THREE.Face3 между узлами (0,1,2) geometry.vertices, но я получаю какой-то странный результат с несколькими гранями в некоторых произвольных положениях.

Может кто-нибудь, пожалуйста, помогите мнеи покажи мне как это исправить?

push_elements() функция: 

function push_elements() {

    var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

    //create a new face using vertices 0, 1, 2
    var normal = new THREE.Vector3( 0, 1, 0 ); //optional
    var color = new THREE.Color( 0xffaa00 ); //optional
    var materialIndex = 0; //optional
    var face = new THREE.Face3( 2, 8, 9, normal, color, materialIndex );

    geometry.faces.push( face );

    var elmentsField = new THREE.Mesh( geometry, material )

    scene.add( elmentsField );

    console.log(geometry.faces)
}
...