При рисовании текста на прозрачном фоне текст по какой-то причине становится смелее - PullRequest
0 голосов
/ 30 апреля 2019

Я не смог воспроизвести проблему, но в моем проекте есть настройка, подобная этой jsfiddle: https://jsfiddle.net/eguneys/e360wcga/ Когда я визуализирую сцену в определенное время, текст постоянно становится более жирным.

const containerEl = document.getElementById("container");

function aTexture() {
   var width = 64,
       height = 64;
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
   canvas.width = width;
   canvas.height = height;
   //
     ctx.fillStyle = 'rgba(0,0,0,0)';
     ctx.clearRect(0,0,width,height);
     ctx.font = '20pt Arial';
     ctx.fillStyle = 'black';
     ctx.fillText(10, width / 2, height / 2);
   //
   const texture = new THREE.Texture(canvas);
   texture.needsUpdate = true;
   return texture;
}

function anim(state) {
  var i = 0;
  function step() {
    if (i++ === 100) {
      i = 0;
      return;
    }
    state.redraw();
    requestAnimationFrame(step);
  }
  step();
}

function init() {
   const width = containerEl.clientWidth;
   const height = containerEl.clientHeight;
   const aspect = width / height;
   const scene = new THREE.Scene();
   const camera = new THREE.PerspectiveCamera(50, aspect, 1, 10000);
   camera.position.z = 250;
   camera.position.y = 250;

   scene.add(camera);

   const planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 2),
                                    new THREE.MeshBasicMaterial({color:0xcc0000, side: THREE.DoubleSide }));
   planeMesh.rotation.x = Math.PI * 0.5;         
   scene.add(planeMesh);

   const textMesh = new THREE.Mesh(new THREE.PlaneGeometry(100, 100, 2),
   new THREE.MeshBasicMaterial({transparent: true, map: aTexture() }));
   scene.add(textMesh);

   const gridHelper = new THREE.GridHelper(1000, 10);
   scene.add(gridHelper);

   const renderer = new THREE.WebGLRenderer({});
   renderer.setSize(width, height);
   console.log(width, height);

   camera.lookAt(planeMesh.position);

   renderer.setClearColor(0xcccccc, 1);
   container.appendChild(renderer.domElement);

   function redraw() {
     console.log('here');
     renderer.render(scene, camera);
   }
   return {
     redraw
   };
}

const state = init();
anim(state);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...