three.js - 天空盒的地板在 THREE.js 中旋转 180 度

Question

我正在用 three.js 开发一个游戏（但这是我的第一个），我正在制作一个天空盒，所有的图像都是完美的，除了底部的那个被翻转了 180 度。

我尝试在 mac os 预览中旋转图像，但这并没有改变任何东西，而且我在网上找不到任何帮助。

这是我的代码

//cube2 表示天空盒 //这是我的天空盒的所有代码（使用three.js）

var 立方体材料 = [

  new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'Images/skybox/PositiveX.png' ), side: THREE.DoubleSide } ), // Right side

  new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'Images/skybox/NegativeX.png' ), side: THREE.DoubleSide } ), // Left side

  new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'Images/skybox/NegativeY.png' ), side: THREE.DoubleSide } ), // Top side

  new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'Images/skybox/PositiveY.png' ), side: THREE.DoubleSide} ), // Bottom side

  new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'Images/skybox/PositiveZ.png' ), side: THREE.DoubleSide } ), // Front side

  new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader( ).load( 'Images/skybox/NegativeZ.png' ), side: THREE.DoubleSide } ) // Back side

];
// Create a MeshFaceMaterial, which allows the cube to have different materials on each face


var geometry2 = new THREE.BoxGeometry( 100000, 100000, 100000 );

var cube2 = new THREE.Mesh( geometry2, cubeMaterials );

scene.add( cube2 );

标签： three.js

Answer 1

在 three.js 中使用天空盒的方法要简单得多

使用CubeTextureLoader并将结果分配给scene.background这样的

const loader = new THREE.CubeTextureLoader();
const texture = loader.load([
  'path/to/pos-x.jpg',
  'path/to/neg-x.jpg',
  'path/to/pos-y.jpg',
  'path/to/neg-y.jpg',
  'path/to/pos-z.jpg',
  'path/to/neg-z.jpg',
]);
scene.background = texture;

例子

'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    canvas
  });

  const fov = 75;
  const aspect = 2; // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 0, 0);
  controls.update();

  const scene = new THREE.Scene();

  {
    const loader = new THREE.CubeTextureLoader();
    const texture = loader.load([
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/pos-x.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/neg-x.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/pos-y.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/neg-y.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/pos-z.jpg',
      'https://threejsfundamentals.org/threejs/resources/images/cubemaps/computer-history-museum/neg-z.jpg',
    ]);
    scene.background = texture;
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

body {
  margin: 0;
}

#c {
  width: 100vw;
  height: 100vh;
  display: block;
}

<canvas tabstop="1" id="c"></canvas>

<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r103/js/controls/OrbitControls.js"></script>

从这里