Как реализовать такое облако слов?

Question

[Евгений]

Необходимо реализовать такое же облако, как здесь : https://jacekjeznach.com/about.
Каким образом лучше это сделать в react + typescript ?

Answer 1

[Александр Павлюк]

Сгенерировать с помощью невидимого канваса картинки с текстом и их альфа-канал (чтобы прозрачность была). Получить в итоге набор текстур, а еще лучше одну текстуру-карту всех слов.
Создать спрайты (плоскости, всегда повернутые к камере) на основе этих текстур и разместить спрайты на поверхности виртаульной сферы.
Вращать эту сферу по мышке.

Comments

[Евгений]

Вроде сделал, но не получается вращать виртуальную сферу, как это можно поправить?

function fibonacciSphere(numPoints, point) {
  const rnd = 1;
  const offset = 2 / numPoints;
  const increment = Math.PI * (3 - Math.sqrt(5));

  const y = point * offset - 1 + offset / 2;
  const r = Math.sqrt(1 - Math.pow(y, 2));

  const phi = ((point + rnd) % numPoints) * increment;

  const x = Math.cos(phi) * r;
  const z = Math.sin(phi) * r;

  return new THREE.Vector3(x, y, z);
}

const loader = new FontLoader();

const group = new THREE.Group();

function main() {
  const fov = 75;
  const aspect = 2; // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  function addTextNode(text, vert) {
    loader.load("./fonts/Fira.json", function (font) {
      const geometry = new TextGeometry(text, {
        font: font,
        size: 0.16,
        height: 0.01,
      });
      const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = vert.x;
      mesh.position.y = vert.y;
      mesh.position.z = vert.z;

      group.add(mesh);
      scene.add(group);
    });
  }

  const renderer = new THREE.WebGLRenderer();
  const container = document.querySelector("#root");
  container.appendChild(renderer.domElement);

  const numPoints = 50;
  for (let i = 0; i < numPoints; ++i) {
    addTextNode(`p${i}`, fibonacciSphere(numPoints, i));
  }

  function render(time) {

    // group.rotation.x += 0.01;
     scene.traverse((child) => {
      child.children.map((el) => {
        el.quaternion.copy(camera.quaternion);
      });
    })
    renderer.setSize(container.clientWidth, container.clientHeight);
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

Answer 2

[Ivan Bogachev]

В тегах вопроса значится Three.js, но в целом ради таких штук можно и не притягивать килотонны скриптов. Логики тут куда меньше, чем кажется на первый взгляд. Плюс можно и обычные HTML-элементы подвигать. Как пример:


Тут немного отличается характер движений от примера на том сайте, но расположение надписей равномерно на сфере и суть поворотов плюс-минус такие же. И большой вопрос, что будет более производительным. Скорее всего на большом количестве надписей WebGL все же выйдет вперед, но пока их мало - сложно сказать, что лучше.