Как добавить края к объекту в three.js?

Я только начал использовать three.js для создания базовой анимации, и мне нужна помощь, чтобы нарисовать края фигур (коробки). Итак, чтобы сделать это, я нашел способ установить значение «истина» для свойства «каркас» THREE.MeshBasicMaterial при создании ящиков. К сожалению, у меня это не работает, потому что я не хочу отображать диагональные линии каждой грани коробки.

Затем я нашел альтернативу, которая использовала класс THREE.EdgesHelper, который показывает края так, как я хочу, но у меня есть другая проблема с ним.

Дело в том, что мне нужно изменить положение граней некоторых ящиков и обновить края с этими изменениями, но края этого не делают.

const cubeWidth = 3;
const geometry = new THREE.BoxGeometry(cubeWidth, cubeWidth, 20);
const material = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors });
const cube = new THREE.Mesh(geometry, material);
const edge = new THREE.EdgesHelper(cube, 0x000000);

Затем я обновляю лицевую сторону каждой коробки в функции рендеринга:

cubes.forEach(function(cube) {
 const geometry = cube.children[0].geometry;

 geometry.vertices.forEach(function(v) {
  if(v.z > 0) v.x -= 3;
 });

 geometry.verticesNeedUpdate = true;
});

Я сделал jsfiddle, который показывает проблему: https://jsfiddle.net/mauro98/wf20tmhu/139/< /а>

Не могли бы вы дать мне какие-либо предложения о том, как выполнить то, что я хочу? Я искал решение, но пока не нашел.

Большое Вам спасибо.


javascript three.js wireframe
person Mauro Aguilar    schedule 24.08.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Помощник не предназначен для работы за пределами буферной геометрии, которая является неизменной.

РЕДАКТИРОВАТЬ новую скрипку и код. Изменен код для обработки размещения edgeHelper на сцене и отслеживания его удаления в userData.

https://jsfiddle.net/uuzcmn99/

widget.onSliderChange = function() {
    const cubes = widget.cubeMatrix.children;
  cubes.forEach(function(cube) {
    console.log(cube);
    const geometry = cube.geometry;
    geometry.vertices.forEach(function(v) {
        if(v.z > 0) v.x -= 3;
    });
    cube.scale.set(.5,.5,.5);
    geometry.verticesNeedUpdate = true;
    console.log(cube.userData, widget.scene);
    cube.userData.edgeHelper.geometry.dispose();
    cube.userData.edgeHelper.material.dispose();
    widget.scene.remove(cube.userData.edgeHelper);
    const edge = new THREE.EdgesHelper(cube, 0x000000);
    edge.material.linewidth = 1.5;
    cube.userData.edgeHelper = edge;
    widget.scene.add(edge);
  });
};
person Radio    schedule 25.08.2016
comment
Будь осторожен! (1) Помощник должен быть добавлен непосредственно дочерним элементом сцены. (2) Вы должны правильно dispose() объектов удалять. - person WestLangley; 25.08.2016
comment
Каков риск добавления помощника к дочернему элементу сцены, а не к самой сцене? У вас есть пример удаления помощника? - person Radio; 25.08.2016
comment
(1) Риск заключается в том, что помощник не будет правильно отображаться при преобразовании сетки. Попробуйте в своей скрипке. (2) github.com/mrdoob/three.js/blob /мастер/примеры/. - person WestLangley; 25.08.2016
comment
Спасибо @WestLangley. Я перекодировал, добавил новую скрипку с очисткой и доказательством преобразования сетки, работающей с edgeHelper. Надеюсь, это лучший ответ. - person Radio; 26.08.2016