Javascript 在Three.js中旋转立方体纹理

我在3.js中得到了这个立方体结构。假设我想将立方体纹理本身旋转180度。我知道我可以通过旋转相机来做到这一点，但我想旋转纹理本身，而不是相机。我怎样才能做到这一点

我想旋转立方体纹理的x轴，使其显示另一侧。类似于

texture.flipX=true会很方便


编辑：

根据下面的讨论，用ThreeJS做你想做的事情似乎并不容易，甚至不可能，但在第一个链接中，它确实提到了用ThreeJS做这件事是可能的



原始答案：

你没有说哪个轴，所以我只使用Y轴。我也使用45度而不是180度，所以你可以看到它正在工作


var摄影机、场景、长方体、渲染器；
init（）；
制作动画（）；
函数init（）{
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
场景=新的三个。场景（）；
const texture=new THREE.CubeTextureLoader（）
.setCrossOrigin（“”）.setPath（“”）https://alca.tv/static/codepen/pens/common/SwedishRoyalCastle/加载（['px.jpg'，'nx.jpg'，'py.jpg'，'ny.jpg'，'pz.jpg'，'nz.jpg']）；
scene.background=纹理；
const geometry=新的3.BoxGeometry（1,1,1）；
const material=new THREE.MeshBasicMaterial（{color:new THREE.color（'skyblue'））}）；
长方体=新的三个网格（几何体、材质）；
///
///
///
///////////////////////////////
//因为threejs使用弧度，所以需要一个函数来从度中获取弧度
函数获取弧度（度）{
返回Math.PI/180*度；
}
//使用旋转.set（x，y，z）
框。旋转。设置（0，获取弧度（45），0）；
//直接设置旋转
box.rotation.y=getRadians（45）；
///////////////////////////////
///
///
///
场景。添加（框）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=5；
场景。添加（摄影机）；
document.body.appendChild（renderer.doElement）；
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
对不起，我不清楚。我想旋转立方体纹理，使其显示另一侧。这只会旋转立方体是否要旋转纹理而不是网格？
var camera, scene, box, renderer;

init();
animate();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    scene = new THREE.Scene();

    const texture = new THREE.CubeTextureLoader()
        .setCrossOrigin('')     .setPath('https://alca.tv/static/codepen/pens/common/SwedishRoyalCastle/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
    
    scene.background = texture;

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('skyblue') });
    box = new THREE.Mesh(geometry, material);
    scene.add(box);
    
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;
    scene.add(camera);
    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}