Three.js пересекающиеся CircleGeometry работает при использовании THREE.Line, но не при использовании THREE.Mesh

Question

Смотрите следующую скрипку:

https://jsfiddle.net/1jmws2bp/

Если переместить курсор мыши на линию или круг, он должен изменить цвет для белого (работает для меня, локально, в jsfiddle иногда есть немного смещения, не совсем уверен, почему).

Проблема в том, что если вы меняете Линию 22: до var circle = new THREE.Mesh(geometry, material), круг заполняется (как и предполагалось), но если вы теперь наведете его сейчас, он не обновит цвет.

Почему? Если я вручную добавлю это: scene.children[0].material.color.setHex(0xff0000);

это действительно работает. Так почему-то мне кажется, что с помощью Mesh RayCaster не видит пересечения. (Проверено путем добавления этой строки alert("intersection"); после if (intersects.length > 0) нет предупреждения, если я использую Mesh вместо Line)

Answer 1

Если вы хотите, чтобы пересекать сетку круга, а затем удалить строку geometry.vertices.shift(); из функции newCircle().

Когда вы вызываете .shift(), вы удаляете первый элемент из массива вершин. Такой «сдвинутый» массив в геометрии допустим для THREE.Line(), поскольку ему нужны только вершины, но неприемлемо для THREE.Mesh(), для которого нужны вершины и грани на основе вершин.

А также, если вы хотите использовать THREE.Mesh(), тогда измените материал с THREE.LineBasicMaterial() на THREE.MeshBasicMaterial().