Question

我正在使用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元素是动态生成的。它是一个基础<canvas>元素，没有分配width或height。编辑：＃2我从元素本身获得了一个数据URI。似乎<canvas>单位渲染的图像非常小;这可能是问题的一部分。不知道如何弥补这一点。我尝试在DoM元素上进行一些宽度/高度操作。最初没有工作，会继续努力。

Answer 1

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

三个画布纹理没有映射到整个SphereMesh

1 个答案: