Three.js:如何重复纹理

标签 three.js

使用以下代码,我想设置矩形的纹理,但问题是纹理图像不会在整个矩形上重复:

var penGeometry = new THREE.CubeGeometry(length, 15, 120);
var wallTexture = new THREE.ImageUtils.loadTexture('../../3D/brick2.jpg');
wallTexture.wrapS = wallTexture.wrapT = THREE.MirroredRepeatWrapping;
wallTexture.repeat.set(50, 1);
var wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture });
var line = new THREE.Mesh(penGeometry, wallMaterial);
line.position.x = PenArray.lastPosition.x + (PenArray.currentPosition.x - PenArray.lastPosition.x) / 2;
line.position.y = PenArray.lastPosition.y + (PenArray.currentPosition.y - PenArray.lastPosition.y) / 2;
line.position.z = PenArray.lastPosition.z + 60;
line.rotation.z = angle;

纹理图像为http://wysnan.com/NightClubBooth/brick1.jpg 结果是http://wysnan.com/NightClubBooth/brick2.jpg

只有一 block 纹理被正确渲染,而不是整个矩形,为什么? 以及如何用这个纹理图像渲染所有矩形?

最佳答案

对于重复环绕,纹理的尺寸必须是 2 的幂 (POT)。

例如 (512 x 512) 或 (512 x 256)。

三.js r.58

关于Three.js:如何重复纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16357372/

相关文章:

javascript - dat.GUI 用户输入不工作

javascript - EffectComposer 和 alpha channel 与 three.js

javascript - Three.js 中的平面与立方体重叠

javascript - 在同一视口(viewport)中加载多个 obj 元素

javascript - THREE.JS 不转换阴影

javascript - 使渲染器的背景透明而不是形状 three.js

javascript - 移动正交相机以沿着一条线移动

javascript - 将立方体面绘制为一个整体,而不是构成面的三 Angular 形 - Three.js

javascript - 三.js 和深度Func

javascript - 每面具有不同纹理 Material 的不规则多面体