Three.js-添加纹理使其看起来黑色

我正在使用图像制作自定义三维对象。首先，我从图像中提取轮廓，在获得点后，我创建形状。然后我使用three.js挤出几何体使其看起来像3D对象

问题是我使用的纹理显示为完全黑色。我使用此代码缩放纹理

texture.wrapT = texture.wrapS = THREE.RepeatWrapping;
var rx = 1/img.width;
var ry = 1/img.height;
texture.repeat.set(rx,ry);

这在下图中给出了结果： 注意：我使用的是GLTF导出器

它正在正确缩放纹理，但我无法设置偏移。图像排列不正确。 我想动态设置偏移，因为我的图像每次都会不同。我可以手动设置偏移量，并获得下图所示的结果。但我希望这是动态的

注意：这是我手动为此图像设置的偏移量，以获得结果

texture.offset.set(0.188,0.934);

---

我真的需要帮助。任何帮助都将不胜感激。谢谢。

不清楚您想做什么，但是

texture.repeat

设置纹理重复的次数，因此

texture.repeat.set（2,3）

表示在整个纹理上重复两次，向下重复三次。这意味着您的代码

纹理。repeat.set（1/img.width，1/img.height）

将展开纹理，以便只有1个像素可见

repeat.set(2, 3);     

重复2到3下

repeat.set(1/2, 1/3);  

重复0.5次，穿过.33向下，或者换句话说，显示一半的纹理，1/3的纹理向下

offset

将纹理移动到

• 1=将其100%向左移动（如果纹理重复，则在1处不会有任何更改，因为您已将其移动100%）
• 0.5=向左移动50%
• 0.25=向左移动25%
• -0.10=向右移动-10%

如果你想以像素为单位移动它，你可以在这里使用img.width

• 1/img.width=向左移动一个像素

请参见本文底部的示例

正文{
保证金：0；
}
#c{
宽度：100vw；
高度：100vh；
显示：块；
}

将*作为三个源导入'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
常数fov=75；
const aspect=2；//画布默认值
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=2；
const scene=new THREE.scene（）；
常数几何=新的三个平面几何（1，1）；
const obs=[]；//只是一个可以用来旋转立方体的数组
const loader=new THREE.TextureLoader（）；
for（设i=0；i<10；++i）{
const texture=loader.load（'https://i.imgur.com/ZKMnXce.png');
//展开纹理，以便仅在平面上拉伸40%的纹理
纹理。重复。设置（0.4,0.4）；
//随机偏移纹理
纹理.offset.set（rand（1），rand（1））；
//重复一遍
texture.wrapps=3.repeat wrapping；
texture.wrapT=3.0；
texture.magFilter=3.NearestFilter；
常量材质=新的三网格基本材质({
贴图：纹理，
三面，双面，
});
const plane=新的三个网格（几何体、材质）；
平面位置集（rand（-1,1），rand（-1,1），0）；
平面位置集（rand（-1,1），rand（-1,1），0）；
场景。添加（平面）；
obs.push（plane）；//添加到要旋转的obs列表中
}
函数随机数（最小值、最大值）{
如果（最大值===未定义）{
最大值=最小值；
最小值=0；
}
返回Math.random（）*（max-min）+min；
}
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数渲染（时间）{
时间*=0.001；
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
}
obs.forEach（（obj，ndx）=>{
常数速度=.2+ndx*.1；
恒速=时间*速度；
对象旋转z=旋转；
});
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
}
main（）；