Three.js - Points

Question

Когда я создаю точку, используя Three.js, она выглядит как квадрат. Как я могу заставить его оглянуться? Я видел в документации некоторые факторы смешивания, но я не совсем понял, как использовать их в своих очках, и я даже не знаю, правильно ли это сделать.

Answer 1

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

Применяя градиенты по кругу, я могу дать иллюзию блеска на 3D-сфере с двумерным кругом.

Есть слишком много кода, чтобы опубликовать ответ, но у меня есть проект в Github, который вы можете посмотреть, если интересно, что демонстрирует эту идею. Смотрите: https://github.com/alexpreynolds/cubemaker и связанную с ним демо-версию по адресу: http://alexpreynolds.github.io/cubemaker/

Если вы просто хотите круги и никакого «блестящего» эффекта, вы можете удалить градиенты. Или нарисуйте круг непосредственно на элемент холста и вообще пропустите SVG.

Answer 2

Ответ Алекс Рейнольдс верен. Я добавляю это, чтобы дать более подробную информацию: насколько я знаю, есть два способа настроить внешний вид ваших точек.

• Как docs suggets, используя текстуры (THREE.PointsMaterial({map:texture})):

  • Наиболее интуитивным является использование образа твоего:

    var texture=THREE.ImageUtils.loadTexture('url-to-my-image'); 
    

  • Вы также можете нарисовать что-то в холст и использовать его в качестве текстуры. Это включает в себя необработанный рисунок на холсте, импорт SVG, как предлагает Алекс Рейнольдс, или любой другой метод. Вы можете проверить его ссылку и посмотреть три примера. Это особенно полезно для рендеринга 2D-текста на спрайтах, вы найдете в нем больше примеров.

    var texture=THREE.Texture(canvas); 
    

  Проверьте three.js примеры для получения более подробной информации об использовании текстур на Points

• Использование шейдеров:

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