在 three.js 中反转球体的 material 图像

Question

我正在使用将 360/VR 视频实现到我们的视频播放器中的插件。它通过使用 Three.js 创建一个球体并获取视频本身并使其成为创建球体的 material 来实现。然后将视口设置在球体内部以提供 360 度视图。

我运行遇到的问题是 material 使用 THREE.DoubleSide 放置在球体上（THREE.BackSide 也可以，因为我们只查看它是从球体内部看到的），但是由于我们是从球体内部观察的，因此图像是倒转的。

有没有办法反转放置在球体上的图像material？

Answer 1

创建不倒置的球形全景图的一种方法是使用这种模式：

var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
var material = new THREE.MeshBasicMaterial( { map: texture } );

var mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( - 1, 1, 1 );
scene.add( mesh );

通常不建议在three.js中设置负比例值，但在这种情况下，由于您使用的MeshBasicMaterial不使用法线，因此可以这样做。

three.js r.75

在 three.js 中反转球体的 material 图像

Invert material image of sphere in three.js

javascript

three.js

virtual-reality

360-virtual-reality