重复时自动保持纹理的比例和纹理的大小

时间:2013-01-03 14:09:44

标签: three.js

我正在使用three.js来建造房屋,我有墙壁和墙壁纹理。

墙壁基本上是CubeGeometry。

我采用了一个独特的比例:1cm = 1px

纹理可以是砖块或任何其他建筑材料,但纹理文件总是512x512,其中包含详细信息。例如:纹理文件中的一块砖将是每4px 10px。

我需要保持这个比例以保持场景的真实性。

var texture = THREE.ImageUtils.loadTexture("images/wall.jpg");

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

texture.repeat = new THREE.Vector2(0.2 , 0.2);

var wall = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 10), new THREE.MeshBasicMaterial({ map: texture }));

这很有效,因为案例很简单;),每个墙壁(可以有任何尺寸)的比例也很简单

但实际上我有很多其他的几何形状(程序生成等等),有没有机会像:“THREE.KeepMyTextureSizeAndRepeat”包装?或者我需要为每个自定义几何图形制作比率吗?

如果您对此用例有任何建议,我将非常满意:)

非常感谢

编辑:最终目标是在2D画布中执行类似“模式”的操作

var pattern = context.createPattern(imageObj, repeatOption);
context.fillStyle = pattern;
context.fill();

当你做这样的事情时,例如在矩形上重复模式,保持宽高比(例如http://www.html5canvastutorials.com/tutorials/html5-canvas-patterns-tutorial/

1 个答案:

答案 0 :(得分:0)

你必须自己计算每个比率,因为纹理对像素一无所知。它只知道紫外线。