Визуализировать 3D-объект (из Blender) с текстом Dynami c после щелчка по элементу в threejs - PullRequest
Новая
       109

Визуализировать 3D-объект (из Blender) с текстом Dynami c после щелчка по элементу в threejs

0 голосов
/ 04 августа 2020

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

function createLabel(text, x, y, z, size, color) {
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");

  context.font = size + "pt Arial";

  var margin = 10;
  var textWidth = context.measureText(text).width;

  context.strokeStyle = "black";
  context.strokeRect(0, 0, canvas.width, canvas.height);

  context.strokeStyle = "red";
  context.strokeRect(canvas.width / 2 - textWidth / 2 - margin / 2, canvas.height / 2 - size / 2 - +margin / 2, textWidth + margin, size + margin);

  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillStyle = "black";
  context.fillText(text, canvas.width / 2, canvas.height / 2);

  var texture = new THREE.canvasTexture(canvas);

  var material = new THREE.MeshBasicMaterial({
      map : texture
  });

  var mesh = new THREE.Mesh(new THREE.PlaneGeometry(canvas.width, canvas.height, 10, 10), material);
  mesh.overdraw = true;
  mesh.position.x = x - canvas.width / 2;
  mesh.position.y = y - canvas.height / 2;
  return mesh;
}

Теперь, когда я щелкаю любой элемент (бриллианты или горы) на странице, новый трехмерный объект должен быть отрендерен с текстом Dynami c на его лицо (текстура как материал) с сервера.

Я искал и пробовал разные вещи, такие как canvasTexture, TextGeometry, ... Но я не мог этого понять.

Спасибо заранее

...