为什么Three.js中的canvasTexture显示得这么小？

Question

我为三个添加画布文本。

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = 320
    canvas.height = 320

    const colors = {
        border: '#3c3443',
        top: '#9d94a7',
        bottom: '#796e8c'
    }

    ctx.fillStyle = colors.border;
    ctx.fillStyle = colors.bottom;
    ctx.fillRect(0, 0, 320, 320);

    const canvasTexture = new THREE.CanvasTexture(canvas);

    const spriteMaterail = new THREE.SpriteMaterial({
        map: canvasTexture,
        color: 0xffffff
    });
    const sprite = new THREE.Sprite(spriteMaterail);
    sprite.position.y = 40;
    this.scene.add(sprite);

，但最终显示如下：

如何正确设置尺寸。

Answer 1

您可以这样做：

sprite.scale.set(30,30,30); //This sets the sprite scale to 30 on all axis.

或：

sprite.scale.multiplyScalar(30); //This multiplies the scale by 30

请小心不要在任何地方设置0刻度，否则由于Three.js优化需要最小刻度值，您可能会收到有关不可逆矩阵的警告。