Three.js Raycaster обнаружение столкновения со сферами

Question

я работал с примером из ранее отвечал вопрос здесь: Three Js Object3D Button Group Detect Single Object Click While Mouse Movement Causes Object3D Button Group Zoomi

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

Вот мой jsbin: http://jsbin.com/agadiw/1/

1) Я переключился объекты из CubeGeometry в SphereGeometry и столкновения не столь точны, кажется, я могу только нажать на определенные части сфер, чтобы вызвать столкновение. Шары имеют тот же размер, что и кубы, также иногда, когда я выхожу за пределы сферы, он вызывает столкновение. Я предупреждаю номер, уникальный для сферы при столкновении. Есть ли какая-то настройка или позиция, в которой я ошибаюсь?

2) Когда шара нажата, я пытаюсь изменить ее цвет на красный, однако все цвета сферы меняются на красный, а не только на один щелчок. Я посмотрел, что такое массив пересечений, когда нажимается шарик, и он возвращает только один щелчок, я понятия не имею, почему он меняет все.

3) Наконец, я искал хорошие ресурсы, учебные пособия, примеры, которые актуальны или имеют хорошие объяснения того, как все работает, но я действительно не нашел каких-либо я пробовал официальную документацию, но много секций просто говорят «todo». Мне просто интересно, есть ли у кого-нибудь какие-то ресурсы, которые они могли бы мне помочь, чтобы помочь мне научиться этому.

Спасибо за любую помощь.

Answer 1

1) CSS margin должен быть равен нулю в вашем случае.

body { background: black; margin: 0; overflow: hidden } 

В качестве альтернативы, вы можете увидеть ответ this question.

2) Цвет всех объектов изменяется, потому что все ваши объекты используют один и тот же материал. Сделайте это вместо этого:

ButtonsMesh = new THREE.Mesh(ButtonsGeometry, new THREE.MeshBasicMaterial()); 

3) Вам нужно будет изучить three.js, изучив примеры и просматривая доски объявлений. Также ознакомьтесь с this answer за дополнительными советами.

Answer 2

Вы используете intersectObjects() для проверки пересечения. Однако пересечение включает в себя все эти объекты. Чтобы исправить это, вам нужно прокрутить объекты с помощью intersectObject() вместо

for (var i=0; i<=(objects.length-1); i++) { 
    var intersect = raycaster.intersectObject(objects[i]); 
    if (intersect.length > 0) { 
     //change the color here 
     break; //important to break the loop 
    } 
} 

Что касается документации; Они хороши examples. Но в настоящее время это главным образом копание через sourcecode и github, чтобы найти то, что вам нужно