Three.js 仅在立方体的一个面上旋转纹理贴图

我有个问题要问你：

是否有方法仅在立方体几何体的一个面上将纹理贴图旋转90°

我的意思是，我可以通过克隆材质来获得6个相同的材质数组，为每个克隆指定一个克隆纹理，将其应用于立方体，然后仅旋转错误的uvmapped克隆纹理。 我想知道是否有更好的方法，因为我已经做了很多次了

---

提前谢谢你

作为一个选项，您可以通过一个修改的材质+6个纹理来完成：

var场景=新的三个场景； var摄像机=新的三视角摄像机60,1,1,1000； camera.position.set5、3、5； var renderer=new THREE.WebGLRenderer{ 反别名：对 }; var canvas=renderer.domeElement； document.body.appendChildcanvas； var contorls=新的三个控制点，画布； scene.addnew 3.GridHelper10,10； var texLoader=新的3.TextureLoader； 变量路径=https://threejs.org/examples/textures/; var纹理=[ texLoader.loadtexPath+colors.png， texLoader.loadtexPath+hardwood2_diffuse.jpg， texLoader.loadtexPath+metal.jpg， texLoader.loadtexPath+sprite.png， texLoader.loadtexPath+square-outline-textured.png， texLoader.loadtexPath+uv\u grid\u opengl.jpg ]; 变量={ 纹理：{ 价值：[ 纹理[0]， 纹理[1]， 纹理[2]， 纹理[3]， 纹理[4]， 纹理[5] ] }, 时间：{值：0} }; var boxGeom=新的三个BoxBufferGeometry4,4,4； boxGeom.setAttributeside，新的三个.Float32BufferAttribute[ 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5 ], 1; var boxMat=新的三网格基本材料； boxMat.defines={USE_UV:}； boxMat.onBeforeCompile=着色器=>{ shader.uniforms.textures=uniforms.textures； shader.uniforms.time=uniforms.time； shader.vertexShader=` 属性浮动边； 可变浮点数； `+shader.vertexShader； shader.vertexShader=shader.vertexShader.replace `包括`， `包括 vSide=侧面； ` ; shader.fragmentShader=` 均匀二维纹理[6]； 均匀浮动时间； 可变浮点数； `+shader.fragmentShader； shader.fragmentShader=shader.fragmentShader.replace `包括`， ` ifdef使用紫外线 vec4 texelColor=vec40； 浮箱侧=地板侧+0.1； vec2-uvs=vUv； 如果boxSide==0。{//旋转第一个侧面的纹理位置x uvs-=0.5； 浮动a=时间； uvs*=mat2cosa，-新浪、新浪、cosa； uvs+=0.5； } 如果boxSide==0.texelColor=texture2D纹理[0]，UV； 否则，如果boxSide==1.texelColor=texture2D纹理[1]，UV； 否则，如果boxSide==2.texelColor=texture2D纹理[2]，UV； 否则，如果boxSide==3.texelColor=texture2D纹理[3]，UV； 否则，如果boxSide==4.texelColor=texture2D纹理[4]，UV； 否则，如果boxSide==5.texelColor=texture2D纹理[5]，UV； //texelColor=mapTexelToLinear texelColor； 漫反射颜色*=texelColor； 恩迪夫 ` ; } var box=新的3.MeshboxGeom，boxMat； scene.addbox； var时钟=新的三个时钟； 提供 函数渲染{ .time.value=clock.getElapsedTime； 如果是resizerenderer{ camera.aspect=canvas.clientWidth/canvas.clientHeight； camera.updateProjectionMatrix； } renderer.renderscene，摄影机； requestAnimationFramerender； } 功能调整器{ const canvas=renderer.domeElement； const width=canvas.clientWidth； 常数高度=canvas.clientHeight； const needResize=canvas.width！==width | | canvas.height！==height； 如果需要，调整大小{ renderer.setSizewidth，height，false； } 返回需要调整大小； } html，正文{ 身高：100%； 保证金：0； 溢出：隐藏； } 帆布{ 宽度：100%； 身高：100%； 显示；块； }

---

作为一个选项，您可以通过一个修改的材质+6个纹理来完成此操作：

var场景=新的三个场景； var摄像机=新的三视角摄像机60,1,1,1000； camera.position.set5、3、5； var renderer=new THREE.WebGLRenderer{ 反别名：对 }; var canvas=renderer.domeElement； document.body.appendChildcanvas； var contorls=新的三个控制点，画布； scene.addnew 3.GridHelper10,10； var texLoader=新的3.TextureLoader； 变量路径=https://threejs.org/examples/textures/; var纹理=[ texLoader.loadtexPath+colors.png， texLoader.loadtexPath+hardwood2_diffuse.jpg， texLoader.loadtexPath+metal.jpg， texLoader.loadtexPath+sprite.png， texLoader.loadtexPath+square-outline-textured.png， texLoader.loadtexPath+uv\u grid\u opengl.jpg ]; 变量={ 纹理：{ 价值：[ 纹理[0]， 纹理[1]， 纹理[2]， 纹理[3]， 纹理[4]， 纹理[5] ] }, 时间：{值：0} }; var boxGeom=新的三个BoxBufferGeometry4,4,4； boxGeom.setAttrib uteside，新的3.Float32BufferAttribute[ 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5 ], 1; var boxMat=新的三网格基本材料； boxMat.defines={USE_UV:}； boxMat.onBeforeCompile=着色器=>{ shader.uniforms.textures=uniforms.textures； shader.uniforms.time=uniforms.time； shader.vertexShader=` 属性浮动边； 可变浮点数； `+shader.vertexShader； shader.vertexShader=shader.vertexShader.replace `包括`， `包括 vSide=侧面； ` ; shader.fragmentShader=` 均匀二维纹理[6]； 均匀浮动时间； 可变浮点数； `+shader.fragmentShader； shader.fragmentShader=shader.fragmentShader.replace `包括`， ` ifdef使用紫外线 vec4 texelColor=vec40； 浮箱侧=地板侧+0.1； vec2-uvs=vUv； 如果boxSide==0。{//旋转第一个侧面的纹理位置x uvs-=0.5； 浮动a=时间； uvs*=mat2cosa，-新浪、新浪、cosa； uvs+=0.5； } 如果boxSide==0.texelColor=texture2D纹理[0]，UV； 否则，如果boxSide==1.texelColor=texture2D纹理[1]，UV； 否则，如果boxSide==2.texelColor=texture2D纹理[2]，UV； 否则，如果boxSide==3.texelColor=texture2D纹理[3]，UV； 否则，如果boxSide==4.texelColor=texture2D纹理[4]，UV； 否则，如果boxSide==5.texelColor=texture2D纹理[5]，UV； //texelColor=mapTexelToLinear texelColor； 漫反射颜色*=texelColor； 恩迪夫 ` ; } var box=新的3.MeshboxGeom，boxMat； scene.addbox； var时钟=新的三个时钟； 提供 函数渲染{ .time.value=clock.getElapsedTime； 如果是resizerenderer{ camera.aspect=canvas.clientWidth/canvas.clientHeight； camera.updateProjectionMatrix； } renderer.renderscene，摄影机； requestAnimationFramerender； } 功能调整器{ const canvas=renderer.domeElement； const width=canvas.clientWidth； 常数高度=canvas.clientHeight； const needResize=canvas.width！==width | | canvas.height！==height； 如果需要，调整大小{ renderer.setSizewidth，height，false； } 返回需要调整大小； } html，正文{ 身高：100%； 保证金：0； 溢出：隐藏； } 帆布{ 宽度：100%； 身高：100%； 显示；块； }

---

哇@prisoner849这对我来说既复杂又神奇。我迟早要学会语言。尽管如此，我还是会尝试在脚本中实现您的代码，看看会发生什么。非常感谢你的回答。哇@prisoner849这对我来说既复杂又神奇。我迟早要学会语言。尽管如此，我还是会尝试在脚本中实现您的代码，看看会发生什么。非常感谢你的回答。