Question

我有一个遗留代码段，该段代码早已成为Web应用程序的一部分。目标是通过three.js从6个图像URL渲染一个多维数据集。问题在于，底部图像在其y轴上翻转。其他所有方面都很好。

由于原始图像是由外部服务提供的，因此无法翻转原始图像。另外，当我直接打开底部图像时，仅在翻转的Three.js多维数据集中，它才能正确显示。

由于我以前对Three.js没有任何经验，因此我首先查看了有关此功能的文档，并意识到不建议使用脚本中使用的代码。不幸的是，没有旧功能的详细文档（THREE.ImageUtils.loadTextureCube）-否则我根本找不到它（如果有人知道它在哪里，那么链接会很棒！）。

我知道从长远来看，重新实现以替换所有不推荐使用的功能将是有条理的，但是由于这将花费更多的时间（对于不熟悉Three.js的人），因此我首先想检查问题是否可以可以使用现有代码库进行修复。

我在其他各种帖子/问题中读到，这是一个已知问题，因为出于某些内部原因，Three.js在纹理上默认为flipY = true。我遇到的问题是，由于缺乏文档，我不知道如何仅在多维数据集的一侧更改此参数。我希望可以将一个函数应用于加载器，该函数可以为其中一张图像更新此参数，或者之后可以对转换后的图像应用转换。

我真的希望有人知道（记得）如何使用旧的加载程序功能来实现。

以下部分代码来自我的脚本：

// passed list of urls (images.bottom is flipped around)
var urls = [ images.left, images.right, images.top, images.bottom, images.back, images.front ];

  // SCENE
  scene = new THREE.Scene();

  // TEXTURES
  textureCube = THREE.ImageUtils.loadTextureCube( urls );
  textureCube.format = THREE.RGBFormat;
  textureCube.mapping = THREE.CubeReflectionMapping;

  // MATERIALS
  var cubeShader = THREE.ShaderLib[ "cube" ];
  var cubeMaterial = new THREE.ShaderMaterial( {
    fragmentShader: cubeShader.fragmentShader,
    vertexShader: cubeShader.vertexShader,
    uniforms: cubeShader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
  } );
  cubeMaterial.uniforms[ "tCube" ].value = textureCube;

  var cubeGeometry = new THREE.BoxGeometry(50,50,50);

  cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
  scene.add( cube );

  // RENDER
  renderer = new THREE.WebGLRenderer();
  renderer.autoClear = false;
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( containerWidth, containerHeight );
  renderer.setFaceCulling( THREE.CullFaceNone );
  $container.append( renderer.domElement );
  ...

Three.js：加载有loadTextureCube的翻转图像

0 个答案: