Я не смог воспроизвести проблему, но в моем проекте есть настройка, подобная этой 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);