三个画布纹理未映射到整个 SphereMesh答案

【问题标题】：THREE Canvas texture not mapping to entire SphereMesh三个画布纹理未映射到整个 SphereMesh
【发布时间】：2015-08-10 13:24:57
【问题描述】：

我正在使用 THREE.js，最近我尝试使用 <canvas> 元素作为 THREE.Texture。我已经能够成功地将对象映射到网格（终于！），但我注意到纹理的行为有点奇怪。不幸的是，纹理只位于我的SphereGeometry 的底部，而不是环绕它。

这是我的实现：

config = config || {} // setting up obj for return

config.canvas = config.canvas || document.createElement("canvas");
config.context. = config.canvas.getContext("2d");
config.context.font = "Bold 40px Arial";
config.context.fillStyle =  "rgba(255, 0, 0, 1)";
config.context.fillText("Hello Stack", 0, 50);

config.texture = new THREE.Texture(config.canvas); // my sphere texture
config.texture.needsUpdate = true;
config.texture.minFilter = THREE.LinearFilter;
config.texture.magFilter = THREE.LinearFilter; 
config.texture.format = THREE.RGBFormat;


config.mesh = new THREE.Mesh(
    new THREE.SphereGeometry(100, 100, 40), 
    new THREE.MeshBasicMaterial({color: 0xffaa00, map: config.texture}));

config.mesh.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));       

return config.mesh;

编辑：#1 我想我应该注意我尝试使用的画布元素是动态生成的。它是一个基本的<canvas> 元素，没有分配width 或height。编辑：#2 我从元素本身获得了一个数据 URI。似乎<canvas> 单元将图像渲染得非常小；这可能是问题的一部分。不知道如何弥补。我尝试对 DoM 元素进行一些宽度/高度操作。刚开始没用，以后继续努力。

【问题讨论】：

我认为，纹理将绘制在每个段上。您有 100 个宽度和 40 个高度段。尝试减少它们，如 new THREE.SphereGeometry(100, 3, 2) 或使用默认值 new THREE.SphereGeometry(100 /* , 8, 6 */)
我正在使用<canvas> 元素来换行到倒置的sphereGeometry。在我用相同级别的重绘声明网格后，我可以调整它的大小吗？

标签： javascript html canvas three.js html5-canvas

【解决方案1】：

我一直在尝试这个，我注意到当我没有尝试调整 <canvas> 元素的大小时，纹理贴图实际上很好。真的很不寻常；因此，如果您似乎无法手动纠正问题，请让 THREE.js 引擎映射纹理本身。

【讨论】：