如何在three.js中旋转背景或天空盒? [英] How can I rotate a background or skybox in three.js?

问题描述

我需要能够在 x、y 或 z 轴上将背景旋转特定的度数.我该怎么做?

I need to be able to rotate the background by a specific number of degrees on the x, y, or z axes. How can I do this?

• scene.background 没有旋转轴属性.
• 如果我创建一个盒子，我只能看到外面的图像，不能看到里面的图像，而且它会相对于相机移动.它需要永远不会移动，即使我的距离和比例都达到了最大值(如 1e+16).当渲染远平面太高时会发生不好的事情.
• 此外，如果可能的话，我宁愿不必预先镜像所有天空盒纹理.
• three.js 基础知识页面没有说明这一点.
• 其他帖子已有 5 年以上的历史，可能在内置背景支持之前.

如果我设置 material.depthWrite = false 只会让某些东西出现在所有东西的后面，但这并不能阻止它移动，等等.

If I set material.depthWrite = false that just makes something appear behind everything, but that doesn't keep it from moving, etc.

抱歉，我对 Three.js 的了解非常有限，因为这不是我的专业领域.

Sorry I have very limited knowledge of three.js, as this is not my area of expertise.

推荐答案

我修改/更新了这篇文章中的代码 在 Three.js 中旋转天空盒，它现在可以正常工作，只有很小的透视效果(如果我一直缩小，背景会开始移动一点点，这是一个巨大的缩放级别)...

I modified/updated the code from this post Rotating a skybox in Three.js and it's working right now with only minor perspective effects (the background starts to move a tiny bit if i zoom out all the way, which is a massive zoom level)...

背景立方体将被缩放到 skyLength.skyHyp 用于设置最大观看距离.pxmICRF = 正 X，镜像，国际天体参考系.它是 base64 格式的 jpg 文件.这个变量名描述了图像，而不是它在three.js CGI坐标中的位置.

the background cube will be scaled to skyLength. skyHyp is used to set the maximum viewing distance. pxmICRF = Postive X, mirrored, International Celestial Reference Frame. it's a jpg file in base64. this variable name describes the image, NOT where it will go in three.js CGI coordinates.

• +x ICRF === +x CGI
• -x ICRF === -x CGI
• +y ICRF === -z CGI
• -y ICRF === +z CGI
• +z ICRF === +y CGI
• -z ICRF === -y CGI

转换是在 x 轴上旋转 90 度.

The conversion is a 90 degree rotation on the x axis.

你只需要知道左、右、上、下、中、后的数组顺序.center"表示需要旋转顶部和底部以匹配中心上方和下方.

all you need to know is the array order of left, right, top, bottom, center, back. "center" means that top and bottom need to be rotated to match above and below center.

let skyLength = 1e7;
let skyHyp = Math.sqrt(skyLength**2 + skyLength**2) + 1;

camera = new THREE.PerspectiveCamera(
    25,
    window.innerWidth / window.innerHeight,
    0.001,
    skyHyp
);

//           LEF      RIG      TOP      BOT      CEN      BAK
//           pxmCGI   nxmCGI   pymCGI   nymCGI   pzCGI    nzCGI
let walls = [pxmICRF, nxmICRF, pzmICRF, nzmICRF, nymICRF, pymICRF];
let materialArray = [];
for (let index = 0; index < 6; index++) {
  let texture = new THREE.TextureLoader().load(walls[index]);
  materialArray.push(new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.BackSide
  }));
}
let geometry = new THREE.CubeGeometry(1, 1, 1);
skybox = new THREE.Mesh(geometry, materialArray);
skybox.scale.set(skyLength, skyLength, skyLength);
skybox.rotation.x = - 23.44 * Math.PI / 180;
scene.add(skybox);

现在我可以根据需要旋转天空盒了..我会注意到在某些情况下使用 .rotation.x 是不可预测的.当我需要认真地旋转某物时，我使用rotateOnAxis() 和rotateOnWorldAxis().

now i can rotate the skybox as-needed.. i will note that using .rotation.x in some cases is unpredictable. when i need to be serious about rotating something, i use rotateOnAxis() and rotateOnWorldAxis().

这篇关于如何在three.js中旋转背景或天空盒?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！