CODEWITHSUNDEEP
javascriptthree.jstexturesskybox
acroscene
acroscene

Reputation: 1067

Rotate cubetexture in Three.js

I got this cubetexture in Three.js. Say I want to rotate the cubeTexture itself 180 degrees. I know I can do this by rotating the camera but I want to rotate the texture itself and not the camera. How can I achieve this?

I want to rotate the x axis of the cubeTexture causing it to display the opposite side. Something like texture.flipX = true; would be handy.

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

Upvotes: 2

Views: 728

Answers (1)

luek baja
luek baja

Reputation: 1674

Edit:

According to the following discussions it does not seem easy or even possible to do what you ask with ThreeJS, but in the first link it does mention that it may be possible with BabylonJS.

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

Original answer:

You didn't say which axis so I will just use the Y axis. I am also using 45 degrees instead of 180 so you can see it is working.

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>

Upvotes: 2

Related Questions