В сцене с three.js отображается только одна частица

Я пытаюсь создать сферу с частицами, случайно плавающими на ее поверхности. Он будет двигаться в зависимости от положения при движении мыши. что-то вроде этого В сцене с three.js отображается только одна частица

Как ни странно, на холсте отображается только одна частица. Я отлаживаю с помощью console.info(vertices), но он ясно показывает все vertices в массиве.

Мой код в CodeSandBox

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
47
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проблема в вашей петле. Вы присваиваете значение theta и phi только один раз вне цикла, затем вы присваиваете одинаковое значение всем 1600 вершинам:

const theta = Math.acos(THREE.Math.randFloatSpread(2));
const phi = THREE.Math.randFloatSpread(360);

for (let i = 0; i < 1600; i++) {
  const vertex = new THREE.Vector3();

  vertex.x = distance * Math.sin(theta) * Math.cos(phi);
  vertex.y = distance * Math.sin(theta) * Math.sin(phi);
  vertex.z = distance * Math.cos(theta);

  vertices.push(vertex.x, vertex.y, vertex.z);
}

Когда вы используете console.info(vertices), посмотрите на значения x, y, z, и вы увидите, что все они повторяются.

Что вам нужно сделать, так это переназначить новый theta и новый phiвнутри цикл, чтобы каждая вершина получила уникальную позицию:

let theta, phi;
let x, y, z;

for (let i = 0; i < 1600; i++) {
  theta = Math.acos(THREE.Math.randFloatSpread(2));
  phi = THREE.Math.randFloatSpread(360);

  x = distance * Math.sin(theta) * Math.cos(phi);
  y = distance * Math.sin(theta) * Math.sin(phi);
  z = distance * Math.cos(theta);

  vertices.push(x, y, z);
}

Вам также не нужно создавать THREE.Vector3() на каждой итерации, довольно неэффективно создавать 1600 Vector3 только для того, чтобы сразу же отбросить их. Вместо этого вы можете повторно использовать одни и те же переменные x, y, z, чтобы избежать всех этих затрат на создание объекта.

См. здесь рабочую демонстрацию вашего примера. Я также уменьшил размер точки до 1.

Просто небольшое замечание, а не ответ (спасибо @Marquizzo)

Поскольку r133, существует метод .randomDirection() of THREE.Vector3(), который помогает нам расставлять точки на сфере более удобным способом.

Таким образом, весь код для создания экземпляров частиц:

    const distance = Math.min(200, window.innerWidth / 16);
    let vertices = new Array(1600).fill().map((v) => {
      return new THREE.Vector3().randomDirection().setLength(distance);
    });
    const geometry = new THREE.BufferGeometry().setFromPoints(vertices);
    const material = new THREE.PointsMaterial({ color: 0xffffff, size: 1 });
    const particles = new THREE.Points(geometry, material);

Демо

Другие вопросы по теме