[英]ThreeJS Turn Texture
I created texture with canvas, but I have little problem.我用画布创建了纹理,但我没有什么问题。 I couldn't turn my texture like in image.
我无法像图像中那样转动我的纹理。 How can i make this?
我该怎么做?
setTexture = (name, font = 20) => {
const canvas = window.document.createElement("canvas");
canvas.width = 256;
canvas.height = 128;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = `${font}pt Arial`;
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(
name || "unnamed",
canvas.width / 2,
canvas.height / 2
);
const texture = new THREE.Texture(canvas);
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.x = -1;
texture.needsUpdate = true;
return texture;
};
If you want to rotate your texture, you could either update the UVs in the geometry, or you could use the texture.rotation
modifier.如果要旋转纹理,可以更新几何体中的 UV,也可以使用
texture.rotation
修改器。
const texture = new THREE.Texture(canvas);
texture.rotation = Math.PI; // 180 deg in radians
If the rotation isn't pivoting around the point you'd like, you can set texture.center
to another value in the [0.0, 1.0]
range.如果旋转不是围绕您想要的点旋转,您可以将
texture.center
设置为[0.0, 1.0]
范围内的另一个值。
const texture = new THREE.Texture(canvas);
texture.center = new THREE.Vector2(0.5, 0.7);
texture.rotation = Math.PI;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.