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

Question

我正在使用Three.js开发游戏（但这是我的第一个游戏），并且正在制作一个Skybox，除了底部的图像翻转了180度外，所有图像都是完美的。

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

这是我的代码

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

var cubeMaterials =     [

Folder

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>

来自here

Answer 2

要旋转纹理，可以将texture.rotation设置为特定值旋转。

检查documentation以获得更多信息。

let texture = new THREE.TextureLoader().load( 'filepath' );
texture.center.set( 0.5, 0.5 ) // move rotation point to the center of the texture
texture.rotation = Math.PI; // rotates around center axis by 180 degrees.

https://jsfiddle.net/8czhmytL/