Javascript Three.js/WebGL如何镜像纹理的一面

我基本上是试图实现一个只有一面的万花筒效果，但我的工作有很多点，所以我希望这发生在着色器中。但是，如果有一个3JS技巧可以镜像一半的纹理或点对象，那就太好了。我试图应用转换矩阵，但无法使其发挥作用

我发现了一个需要使用EffectComposer的旧版本，但我想自己手动实现它（没有EffectComposer），我正在努力做到这一点。我正在使用FBO，并尝试在模拟和渲染着色器中添加来自该着色器的代码，但根本没有效果。我是否必须添加另一个FBO纹理，或者是否可以在现有着色器中进行这些计算

供视觉参考

我花了太多时间没有弄清这件事的真相，希望有人能给我指出正确的方向

---

谢谢

有一种纹理包裹模式可以进行镜像

texture.wrapS=texture.wrapT=THREE.MirroredRepeatWrapping

这有用吗

编辑：下面是一个示例，显示了两个轴上的mirroredrepeatwrapping：

---

有一种纹理包裹模式可以进行镜像

texture.wrapS=texture.wrapT=THREE.MirroredRepeatWrapping

这有用吗

编辑：下面是一个示例，显示了两个轴上的mirroredrepeatwrapping：

我只是跟着

从回购协议中粘贴代码似乎是可行的

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

将*作为三个源导入'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
从导入{EffectComposer}https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/postprocessing/EffectComposer.js';
从导入{RenderPass}https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/postprocessing/RenderPass.js';
从导入{ShaderPass}https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/postprocessing/ShaderPass.js';
从导入{GUI}'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.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（）；
{
常量颜色=0xFFFFFF；
常数强度=2；
恒定光=新的三个方向光（颜色、强度）；
灯。位置。设置（-1，2，4）；
场景。添加（灯光）；
}
常数boxWidth=1；
const-boxHeight=1；
常数boxDepth=1；
const geometry=新的三个.BoxGeometry（boxWidth、boxHeight、boxDepth）；
函数makeInstance（几何体、颜色、x）{
const material=新的3.MeshPhongMaterial（{color}）；
常量立方体=新的三个网格（几何体、材质）；
场景.添加（立方体）；
立方体位置x=x；
返回立方体；
}
常数立方=[
makeInstance（几何体，0x44aa88，0），
makeInstance（几何体，0x8844aa，-2），
makeInstance（几何体，0xaa8844，2），
];
const composer=新的效应生成器（渲染器）；
addPass（新的RenderPass（场景、摄影机））；
//发件人：
// https://github.com/mistic100/three.js-examples/blob/master/LICENSE
常数万花筒头={
制服：{
“tDiffuse”：{value:null}，
“边”：{value:6.0}，
“角度”：{值：0.0}
},
顶点着色器：`
可变vec2 vUv；
void main（）{
vUv=紫外线；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
`,
碎片着色器：`
均匀采样扩散；
均匀浮动边；
均匀浮动角；
可变vec2 vUv；
void main（）{
vec2p=vUv-0.5；
浮动r=长度（p）；
浮子a=atan（p.y，p.x）+角度；
浮点数tau=2.*3.1416；
a=模（a，头/侧）；
a=绝对值（a-头/侧面/2.）；
p=r*vec2（cos（a），sin（a））；
vec4颜色=纹理2d（t扩散，p+0.5）；
gl_FragColor=颜色；
}
`
};
const kaledoscopepass=新着色器类（kaledoscopeshader）；
万花筒pass.renderToScreen=true；
作曲家艾德帕斯（万花筒帕斯）；
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
constgui=newgui（）；
添加（kaledoscopepass.uniforms.sides，'value'，0,20）.name（'sides'）；
添加（kaleidoscopespass.uniforms.angle，'value'，0,6.28,0.01）.name（'angle'）；
然后设=0；
函数渲染（现在）{
现在*=0.001；//转换为秒
常数deltaTime=现在-那时；
然后=现在；
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight；
camera.updateProjectMatrix（）；
composer.setSize（canvas.width、canvas.height）；
}
cubes.forEach（（cube，ndx）=>{
恒速=1+ndx*.1；
恒速旋转=现在*速度；
立方体旋转x=旋转；
cube.rotation.y=rot；
});
作曲者。渲染（deltaTime）；
请求动画帧（渲染）；
}
请求动画帧（渲染）；
}
main（）；

我只是跟着

从回购协议中粘贴代码似乎是可行的

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

将*作为三个源导入'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
从导入{EffectComposer}https://threejsfundamentals.org/thre