在Three.js中旋转cubetexture

问题描述

我在Three.js中得到了这个cubetexture。假设我想将cubeTexture本身旋转180度。我知道我可以通过旋转相机来做到这一点，但我想旋转纹理本身而不是相机。我该如何实现？

我想旋转cubeTexture的x轴，使其显示相反的一面。像texture.flipX = true;这样的东西会很方便。

https://codepen.io/haangglide/pen/GRZPqaw

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);
}

解决方法

编辑：

根据以下讨论，使用ThreeJS进行操作似乎并不容易，甚至不可能，但是在第一个链接中确实提到使用BabylonJS是可能的。

https://discourse.threejs.org/t/rotate-a-scenes-background-skybox-texture/12199 https://discourse.threejs.o9rg/t/rotate-a-scenes-background/3928/15

原始答案：

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

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);
    
    ///
    ///
    ///
    ///////////////////////////////
    //since threejs uses radians,you will need a function to get radians from degrees
    function getRadians(degrees) {
      return Math.PI / 180 * degrees;
    }
    
    //using rotation.set(x,y,z)
    box.rotation.set(0,getRadians(45),0);
    
    //directly setting the rotations
    box.rotation.y = getRadians(45);
    ///////////////////////////////
    ///
    ///
    ///
    
    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);
}

<script src="https://threejs.org/build/three.js"></script>