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

Question

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

我想旋转立方体文本的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);
}

Answer 1

编辑：

根据以下讨论，使用ThreeJS似乎不容易，甚至不可能做到你所要求的，但在第一个链接中，它确实提到了使用BabylonJS可能做到这一点。

https://discourse.threejs.org/t/rotate-a-scenes-background-skybox-texture/12199https://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>